feat(ui): support auto theme

ui/src/app/app.tsx

@@ -8,7 +8,7 @@ import applications from './applications';
 import help from './help';
 import login from './login';
 import settings from './settings';
-import {Layout} from './shared/components/layout/layout';
+import {Layout, ThemeWrapper} from './shared/components/layout/layout';
 import {Page} from './shared/components/page/page';
 import {VersionPanel} from './shared/components/version-info/version-info-panel';
 import {AuthSettingsCtx, Provider} from './shared/context';
@@ -194,7 +194,7 @@ export class App extends React.Component<
  <PageContext.Provider value={{title: 'Argo CD'}}>
  <Provider value={{history, popup: this.popupManager, notifications: this.notificationsManager, navigation: this.navigationManager, baseHref: base}}>
  <DataLoader load={() => services.viewPreferences.getPreferences()}>
- {pref => <div className={pref.theme ? 'theme-' + pref.theme : 'theme-light'}>{this.state.popupProps && <Popup {...this.state.popupProps} />}</div>}
+ {pref => <ThemeWrapper theme={pref.theme}>{this.state.popupProps && <Popup {...this.state.popupProps} />}</ThemeWrapper>}
  </DataLoader>
  <AuthSettingsCtx.Provider value={this.state.authSettings}>
  <Router history={history}>

ui/src/app/settings/components/appearance-list/appearance-list.scss

@@ -13,11 +13,13 @@
  }
  border-radius: 4px;
  box-shadow: 1px 2px 3px rgba(#000, 0.1);
- }
+ & .row {
+ justify-content: space-between;
+ align-items: center;
 
- &__button {
- position: absolute;
- top: 25%;
- right: 30px;
+  .select {
+  min-width: 160px;
+  }
+ }
  }
-}
+}

ui/src/app/settings/components/appearance-list/appearance-list.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {DataLoader, Page} from '../../../shared/components';
 import {services} from '../../../shared/services';
+import {Select, SelectOption} from 'argo-ui';
 
 require('./appearance-list.scss');
 
@@ -16,16 +17,16 @@ export const AppearanceList = () => {
  <div className='appearance-list'>
  <div className='argo-container'>
  <div className='appearance-list__panel'>
- <div className='columns'>Dark Theme</div>
- <div className='columns'>
- <button
- className='argo-button argo-button--base appearance-list__button'
- onClick={() => {
-  const targetTheme = pref.theme === 'light' ? 'dark' : 'light';
- services.viewPreferences.updatePreferences({theme: targetTheme});
- }}>
- {pref.theme === 'light' ? 'Enable' : 'Disable'}
- </button>
+ <div className='row'>
+  <span>Dark Theme</span>
+ <Select
+ value={pref.theme}
+ onChange={(value: SelectOption) => services.viewPreferences.updatePreferences({theme: value.value})}
+ options={[
+ {value: 'auto', title: 'Auto'},
+  {value: 'light', title: 'Light'},
+  {value: 'dark', title: 'Dark'}
+  ]}></Select>
  </div>
  </div>
  </div>

ui/src/app/shared/components/layout/layout.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {Sidebar} from '../../../sidebar/sidebar';
 import {ViewPreferences} from '../../services';
+import {useTheme} from '../../utils';
 
 require('./layout.scss');
 
@@ -13,15 +14,23 @@ export interface LayoutProps {
 
 const getBGColor = (theme: string): string => (theme === 'light' ? '#dee6eb' : '#100f0f');
 
+export const ThemeWrapper = (props: {children: React.ReactNode; theme: string}) => {
+ const [systemTheme] = useTheme({
+ theme: props.theme
+ });
+ return <div className={'theme-' + systemTheme}>{props.children}</div>;
+};
+
 export const Layout = (props: LayoutProps) => {
+ const [theme] = useTheme({theme: props.pref.theme});
  React.useEffect(() => {
- if (props.pref.theme) {
- document.body.style.background = getBGColor(props.pref.theme);
+ if (theme) {
+ document.body.style.background = getBGColor(theme);
  }
- }, [props.pref.theme]);
+ }, [theme]);
 
  return (
- <div className={props.pref.theme ? 'theme-' + props.pref.theme : 'theme-light'}>
+ <div className={`theme-${theme}`}>
  <div className={'cd-layout'}>
  <Sidebar onVersionClick={props.onVersionClick} navItems={props.navItems} pref={props.pref} />
  <div className={`cd-layout__content ${props.pref.hideSidebar ? 'cd-layout__content--sb-collapsed' : 'cd-layout__content--sb-expanded'} custom-styles`}>

ui/src/app/shared/components/monaco-editor.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import * as monacoEditor from 'monaco-editor';
 import {services} from '../services';
+import {getTheme, useSystemTheme} from '../utils';
 
 export interface EditorInput {
  text: string;
@@ -28,10 +29,25 @@ const MonacoEditorLazy = React.lazy(() =>
  import('monaco-editor').then(monaco => {
  const Component = (props: MonacoProps) => {
  const [height, setHeight] = React.useState(0);
+ const [theme, setTheme] = React.useState('dark');
+
+ React.useEffect(() => {
+ const destroySystemThemeListener = useSystemTheme(systemTheme => {
+ if (theme === 'auto') {
+ monaco.editor.setTheme(systemTheme === 'dark' ? 'vs-dark' : 'vs');
+ }
+ });
+
+ return () => {
+ destroySystemThemeListener();
+ };
+ }, [theme]);
 
  React.useEffect(() => {
  const subscription = services.viewPreferences.getPreferences().subscribe(preferences => {
- monaco.editor.setTheme(preferences.theme === 'dark' ? 'vs-dark' : 'vs');
+ setTheme(preferences.theme);
+
+ monaco.editor.setTheme(getTheme(preferences.theme) === 'dark' ? 'vs-dark' : 'vs');
  });
 
  return () => {

ui/src/app/shared/components/version-info/version-info-panel.tsx

@@ -2,6 +2,7 @@ import {DataLoader, SlidingPanel, Tooltip} from 'argo-ui';
 import * as React from 'react';
 import {VersionMessage} from '../../models';
 import {services} from '../../services';
+import {ThemeWrapper} from '../layout/layout';
 
 interface VersionPanelProps {
  isShown: boolean;
@@ -26,14 +27,14 @@ export class VersionPanel extends React.Component<VersionPanelProps, {copyState:
  <DataLoader load={() => this.props.version}>
  {version => {
  return (
- <div className={'theme-' + pref.theme}>
+ <ThemeWrapper theme={pref.theme}>
  <SlidingPanel header={this.header} isShown={this.props.isShown} onClose={() => this.props.onClose()} hasCloseButton={true} isNarrow={true}>
  <div className='argo-table-list'>{this.buildVersionTable(version)}</div>
  <div>
  <Tooltip content='Copy all version info as JSON'>{this.getCopyButton(version)}</Tooltip>
  </div>
  </SlidingPanel>
- </div>
+ </ThemeWrapper>
  );
  }}
  </DataLoader>

ui/src/app/shared/utils.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export function hashCode(str: string) {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
@@ -34,3 +36,71 @@ export function isValidURL(url: string): boolean {
  }
  }
 }
+
+export const colorSchemes = {
+ light: '(prefers-color-scheme: light)',
+ dark: '(prefers-color-scheme: dark)'
+};
+
+/**
+ * quick method to check system theme
+ * @param theme auto, light, dark
+ * @returns dark or light
+ */
+export function getTheme(theme: string) {
+ if (theme !== 'auto') {
+ return theme;
+ }
+
+ const dark = window.matchMedia(colorSchemes.dark);
+
+ return dark.matches ? 'dark' : 'light';
+}
+
+/**
+ * create a listener for system theme
+ * @param cb callback for theme change
+ * @returns destroy listener
+ */
+export const useSystemTheme = (cb: (theme: string) => void) => {
+ const dark = window.matchMedia(colorSchemes.dark);
+ const light = window.matchMedia(colorSchemes.light);
+
+ const listener = () => {
+ cb(dark.matches ? 'dark' : 'light');
+ };
+
+ dark.addEventListener('change', listener);
+ light.addEventListener('change', listener);
+
+ return () => {
+ dark.removeEventListener('change', listener);
+ light.removeEventListener('change', listener);
+ };
+};
+
+export const useTheme = (props: {theme: string}) => {
+ const [theme, setTheme] = React.useState(getTheme(props.theme));
+
+ React.useEffect(() => {
+ let destroyListener: (() => void) | undefined;
+
+ // change theme by system, only register listener when theme is auto
+ if (props.theme === 'auto') {
+ destroyListener = useSystemTheme(systemTheme => {
+ setTheme(systemTheme);
+ });
+ }
+
+ // change theme manually
+ if (props.theme !== theme) {
+ setTheme(getTheme(props.theme));
+ }
+
+ return () => {
+ destroyListener?.();
+ };
+ }, [props.theme]);
+
+ return [theme];
+};