[v13] Connect: Light theme

web/.storybook/preview.js

@@ -21,8 +21,11 @@ import { darkTheme, lightTheme } from './../packages/design/src/theme';
 import DefaultThemeProvider from '../packages/design/src/ThemeProvider';
 import Box from './../packages/design/src/Box';
 import '../packages/teleport/src/lib/polyfillRandomUuid';
-import { ThemeProvider as TeletermThemeProvider } from './../packages/teleterm/src/ui/ThemeProvider';
-import { theme as TeletermTheme } from './../packages/teleterm/src/ui/ThemeProvider/theme';
+import { StaticThemeProvider as TeletermThemeProvider } from './../packages/teleterm/src/ui/ThemeProvider';
+import {
+  darkTheme as teletermDarkTheme,
+  lightTheme as teletermLightTheme,
+} from './../packages/teleterm/src/ui/ThemeProvider/theme';
 import { handlersTeleport } from './../packages/teleport/src/mocks/handlers';
 
 // Checks we are running non-node environment (browser)
@@ -41,7 +44,10 @@ const ThemeDecorator = (storyFn, meta) => {
 
   if (meta.title.startsWith('Teleterm/')) {
     ThemeProvider = TeletermThemeProvider;
-    theme = TeletermTheme;
+    theme =
+      meta.globals.theme === 'Dark Theme'
+        ? teletermDarkTheme
+        : teletermLightTheme;
   } else {
     ThemeProvider = DefaultThemeProvider;
     theme = meta.globals.theme === 'Dark Theme' ? darkTheme : lightTheme;

web/packages/design/src/DataTable/InputSearch/InputSearch.tsx

@@ -56,10 +56,7 @@ const ChildWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${props =>
-    props.theme.name === 'dark'
-      ? props.theme.colors.spotBackground[0]
-      : props.theme.colors.spotBackground[0]};
+  background: ${props => props.theme.colors.spotBackground[0]};
   border-radius: 200px;
 `;
 

web/packages/design/src/DataTable/index.ts

@@ -22,7 +22,15 @@ import {
   LabelCell,
   ClickableLabelCell,
 } from './Cells';
-import { StyledPanel } from './StyledTable';
+import { StyledPanel, StyledTableWrapper } from './StyledTable';
 
-export { Cell, TextCell, DateCell, LabelCell, ClickableLabelCell, StyledPanel };
+export {
+  Cell,
+  TextCell,
+  DateCell,
+  LabelCell,
+  ClickableLabelCell,
+  StyledPanel,
+  StyledTableWrapper,
+};
 export default Table;

web/packages/design/src/theme/darkTheme.ts

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { fonts } from './fonts';
-import { getContrastRatio } from './utils/colorManipulator';
+import { getContrastRatio, lighten } from './utils/colorManipulator';
 import { blueGrey, lightBlue, yellow } from './palette';
 import typography, { fontSizes, fontWeights } from './typography';
 import { sharedStyles } from './sharedStyles';
@@ -148,6 +148,30 @@ const colors = {
     disabledBackground: 'rgba(255, 255, 255, 0.12)',
   },
 
+  terminal: {
+    foreground: '#F1F2F4',
+    background: '#010B1C', // bgTerminal
+    selectionBackground: 'rgba(255, 255, 255, 0.18)',
+    cursor: '#FFF',
+    cursorAccent: '#010B1C',
+    red: '#FF6257',
+    green: '#00BFA6',
+    yellow: '#FFAB00',
+    blue: '#009EFF',
+    magenta: '#9F85FF',
+    cyan: '#00D3F0',
+    brightWhite: lighten('#010B1C', 0.89),
+    white: lighten('#010B1C', 0.78),
+    brightBlack: lighten('#010B1C', 0.61),
+    black: '#000',
+    brightRed: '#FF948D',
+    brightGreen: '#2EFFD5',
+    brightYellow: '#FFD98C',
+    brightBlue: '#7BCDFF',
+    brightMagenta: '#B9A6FF',
+    brightCyan: '#74EEFF',
+  },
+
   subtle: blueGrey[50],
   link: '#009EFF',
   bgTerminal: '#010B1C',

web/packages/design/src/theme/lightTheme.ts

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { fonts } from './fonts';
-import { getContrastRatio } from './utils/colorManipulator';
+import { darken, getContrastRatio } from './utils/colorManipulator';
 import { lightBlue, blueGrey, yellow } from './palette';
 import typography, { fontSizes, fontWeights } from './typography';
 import { sharedStyles } from './sharedStyles';
@@ -144,6 +144,30 @@ const colors = {
     disabledBackground: 'rgba(255, 255, 255, 0.12)',
   },
 
+  terminal: {
+    foreground: '#000',
+    background: '#F1F2F4', // levels.sunken
+    selectionBackground: 'rgba(0, 0, 0, 0.18)',
+    cursor: '#000',
+    cursorAccent: '#F1F2F4',
+    red: '#9D0A00',
+    green: '#005742',
+    yellow: '#704B00',
+    blue: '#004B89',
+    magenta: '#3D1BB2',
+    cyan: '#015C6E',
+    brightWhite: darken('#F1F2F4', 0.55),
+    white: darken('#F1F2F4', 0.68),
+    brightBlack: darken('#F1F2F4', 0.8),
+    black: '#000',
+    brightRed: '#BF372E',
+    brightGreen: '#007562',
+    brightYellow: '#8F5F00',
+    brightBlue: '#006BB8',
+    brightMagenta: '#5531D4',
+    brightCyan: '#007282',
+  },
+
   subtle: blueGrey[50],
   link: '#0073BA',
   bgTerminal: '#010B1C',

web/packages/shared/components/FileTransfer/FileTransferStateless/CommonElements.tsx

@@ -56,10 +56,6 @@ export const PathInput = forwardRef<
 
 const StyledFieldInput = styled(FieldInput)`
   input {
-    border: 1px solid ${props => props.theme.colors.text.muted};
-    background: transparent;
-    color: white;
-    box-shadow: none;
     font-size: 14px;
     height: 32px;
   }

web/packages/shared/components/FileTransfer/FileTransferStateless/UploadForm/UploadForm.tsx

@@ -127,7 +127,7 @@ const Dropzone = styled.button`
   color: inherit;
   background-color: ${props => props.theme.colors.spotBackground[0]};
   margin-top: ${props => props.theme.space[3]}px;
-  border: 1px dashed ${props => props.theme.colors.spotBackground[1]};
+  border: 1px dashed ${props => props.theme.colors.text.muted};
   height: 128px;
   text-align: center;
   cursor: pointer;

web/packages/teleport/src/components/Toggle/Toggle.tsx

@@ -22,9 +22,10 @@ export default function Toggle({
   onToggle,
   children,
   disabled,
+  className,
 }: Props) {
   return (
-    <StyledWrapper disabled={disabled}>
+    <StyledWrapper disabled={disabled} className={className}>
       <StyledInput
         checked={isToggled}
         onChange={onToggle}
@@ -41,6 +42,7 @@ type Props = {
   onToggle: () => void;
   children?: ReactNode;
   disabled?: boolean;
+  className?: string;
 };
 
 const StyledWrapper = styled.label`

web/packages/teleterm/src/main.ts

@@ -18,7 +18,7 @@ import { spawn } from 'child_process';
 
 import path from 'path';
 
-import { app, globalShortcut, shell } from 'electron';
+import { app, globalShortcut, shell, nativeTheme } from 'electron';
 
 import MainProcess from 'teleterm/mainProcess';
 import { getRuntimeSettings } from 'teleterm/mainProcess/runtimeSettings';
@@ -59,6 +59,8 @@ async function initializeApp(): Promise<void> {
     jsonSchemaFile: configJsonSchemaFileStorage,
     platform: settings.platform,
   });
+
+  nativeTheme.themeSource = configService.get('theme').value;
   const windowsManager = new WindowsManager(appStateFileStorage, settings);
 
   process.on('uncaughtException', (error, origin) => {

web/packages/teleterm/src/mainProcess/fixtures/mocks.ts

@@ -68,6 +68,14 @@ export class MockMainProcessClient implements MainProcessClient {
   async openConfigFile() {
     return '';
   }
+
+  shouldUseDarkColors() {
+    return true;
+  }
+
+  subscribeToNativeThemeUpdate() {
+    return { cleanup: () => undefined };
+  }
 }
 
 export const makeRuntimeSettings = (

web/packages/teleterm/src/mainProcess/mainProcess.ts

@@ -26,6 +26,7 @@ import {
   ipcMain,
   Menu,
   MenuItemConstructorOptions,
+  nativeTheme,
   shell,
 } from 'electron';
 import { wait } from 'shared/utils/wait';
@@ -193,6 +194,10 @@ export default class MainProcess {
       event.returnValue = this.settings;
     });
 
+    ipcMain.on('main-process-should-use-dark-colors', event => {
+      event.returnValue = nativeTheme.shouldUseDarkColors;
+    });
+
     ipcMain.handle('main-process-get-resolved-child-process-addresses', () => {
       return this.resolvedChildProcessAddresses;
     });

web/packages/teleterm/src/mainProcess/mainProcessClient.ts

@@ -53,8 +53,20 @@ export default function createMainProcessClient(): MainProcessClient {
     removeTshSymlinkMacOs() {
       return ipcRenderer.invoke('main-process-remove-tsh-symlink-macos');
     },
-    openConfigFile(): Promise<string> {
+    openConfigFile() {
       return ipcRenderer.invoke('main-process-open-config-file');
     },
+    shouldUseDarkColors() {
+      return ipcRenderer.sendSync('main-process-should-use-dark-colors');
+    },
+    subscribeToNativeThemeUpdate: listener => {
+      const onThemeChange = (_, value: { shouldUseDarkColors: boolean }) =>
+        listener(value);
+      const channel = 'main-process-native-theme-update';
+      ipcRenderer.addListener(channel, onThemeChange);
+      return {
+        cleanup: () => ipcRenderer.removeListener(channel, onThemeChange),
+      };
+    },
   };
 }

web/packages/teleterm/src/mainProcess/types.ts

@@ -75,6 +75,13 @@ export type MainProcessClient = {
 
   /** Opens config file and returns a path to it. */
   openConfigFile(): Promise<string>;
+  shouldUseDarkColors(): boolean;
+  /** Subscribes to updates of the native theme. Returns a cleanup function. */
+  subscribeToNativeThemeUpdate: (
+    listener: (value: { shouldUseDarkColors: boolean }) => void
+  ) => {
+    cleanup: () => void;
+  };
 };
 
 export type ChildProcessAddresses = {

web/packages/teleterm/src/mainProcess/windowsManager.ts

@@ -16,11 +16,18 @@
 
 import path from 'path';
 
-import { app, BrowserWindow, Menu, Rectangle, screen } from 'electron';
+import {
+  app,
+  BrowserWindow,
+  Menu,
+  Rectangle,
+  screen,
+  nativeTheme,
+} from 'electron';
 
 import { FileStorage } from 'teleterm/services/fileStorage';
 import { RuntimeSettings } from 'teleterm/mainProcess/types';
-import theme from 'teleterm/ui/ThemeProvider/theme';
+import { darkTheme, lightTheme } from 'teleterm/ui/ThemeProvider/theme';
 
 type WindowState = Rectangle;
 
@@ -47,13 +54,16 @@ export class WindowsManager {
   }
 
   createWindow(): void {
+    const activeTheme = nativeTheme.shouldUseDarkColors
+      ? darkTheme
+      : lightTheme;
     const windowState = this.getWindowState();
     const window = new BrowserWindow({
       x: windowState.x,
       y: windowState.y,
       width: windowState.width,
       height: windowState.height,
-      backgroundColor: theme.colors.levels.sunken,
+      backgroundColor: activeTheme.colors.levels.sunken,
       minWidth: 400,
       minHeight: 300,
       show: false,
@@ -88,6 +98,12 @@ export class WindowsManager {
       this.popupUniversalContextMenu(window, props);
     });
 
+    nativeTheme.on('updated', () => {
+      window.webContents.send('main-process-native-theme-update', {
+        shouldUseDarkColors: nativeTheme.shouldUseDarkColors,
+      });
+    });
+
     window.webContents.session.setPermissionRequestHandler(
       (webContents, permission, callback) => {
         // deny all permissions requests, we currently do not require any

web/packages/teleterm/src/services/config/appConfigSchema.ts

@@ -106,6 +106,10 @@ export const createAppConfigSchema = (platform: Platform) => {
       .max(256)
       .default(15)
       .describe('Font size for the terminal.'),
+    theme: z
+      .enum(['light', 'dark', 'system'])
+      .default('system')
+      .describe('Color theme for the app.'),
   });
 };
 

web/packages/teleterm/src/ui/DocumentCluster/ClusterNavButton/ClusterNavButton.tsx

@@ -48,7 +48,7 @@ export type NavButtonProps = {
 const StyledNavButton = styled.button(props => {
   return {
     color: props.active
-      ? props.theme.colors.light
+      ? props.theme.colors.text.main
       : props.theme.colors.text.slightlyMuted,
     cursor: 'pointer',
     fontFamily: 'inherit',

web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterResources.tsx

@@ -40,7 +40,7 @@ export default function ClusterResources() {
 
   return (
     <StyledMain>
-      <Flex mt={3} pb={5} flexDirection="column">
+      <Flex pb={5} flexDirection="column">
         <SideNav mb={2} />
         <HorizontalSplit>
           {clusterCtx.isLocationActive('/resources/servers') && <Servers />}