feat: primer color schemes

src/main/main.ts

@@ -94,9 +94,15 @@ app.whenReady().then(async () => {
 
   nativeTheme.on('updated', () => {
     if (nativeTheme.shouldUseDarkColors) {
-      mb.window.webContents.send(namespacedEvent('update-theme'), 'DARK');
+      mb.window.webContents.send(
+        namespacedEvent('update-theme'),
+        'DARK_DEFAULT',
+      );
     } else {
-      mb.window.webContents.send(namespacedEvent('update-theme'), 'LIGHT');
+      mb.window.webContents.send(
+        namespacedEvent('update-theme'),
+        'LIGHT_DEFAULT',
+      );
     }
   });
 

src/renderer/App.css

@@ -9,9 +9,15 @@
 @import "@primer/primitives/dist/css/functional/typography/typography.css";
 
 /* Themes and Colors */
-/* TODO Add support for setting color modes (dark_dimmed) - see #1748 */
 @import "@primer/primitives/dist/css/functional/themes/light.css";
+@import "@primer/primitives/dist/css/functional/themes/light-tritanopia.css";
+@import "@primer/primitives/dist/css/functional/themes/light-high-contrast.css";
+@import "@primer/primitives/dist/css/functional/themes/light-colorblind.css";
 @import "@primer/primitives/dist/css/functional/themes/dark.css";
+@import "@primer/primitives/dist/css/functional/themes/dark-colorblind.css";
+@import "@primer/primitives/dist/css/functional/themes/dark-dimmed.css";
+@import "@primer/primitives/dist/css/functional/themes/dark-high-contrast.css";
+@import "@primer/primitives/dist/css/functional/themes/dark-tritanopia.css";
 
 html,
 body,

src/renderer/App.tsx

@@ -21,6 +21,10 @@ import { NotificationsRoute } from './routes/Notifications';
 import { SettingsRoute } from './routes/Settings';
 
 import './App.css';
+import {
+  DEFAULT_DAY_COLOR_SCHEME,
+  DEFAULT_NIGHT_COLOR_SCHEME,
+} from './utils/theme';
 
 function RequireAuth({ children }) {
   const { isLoggedIn } = useContext(AppContext);
@@ -35,8 +39,11 @@ function RequireAuth({ children }) {
 
 export const App = () => {
   return (
-    // TODO Add support for setting color modes (dark_dimmed) - see #1748
-    <ThemeProvider dayScheme="light" nightScheme="dark">
+    <ThemeProvider
+      colorMode="auto"
+      dayScheme={DEFAULT_DAY_COLOR_SCHEME}
+      nightScheme={DEFAULT_NIGHT_COLOR_SCHEME}
+    >
       <BaseStyles>
         <AppProvider>
           <Router>

src/renderer/components/settings/AppearanceSettings.test.tsx

@@ -17,7 +17,7 @@ describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => {
     jest.clearAllMocks();
   });
 
-  it('should change the theme radio group', async () => {
+  it('should change the theme mode dropdown', async () => {
     await act(async () => {
       render(
         <AppContext.Provider
@@ -34,7 +34,8 @@ describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Light'));
+    const select = screen.getByTestId('settings-theme') as HTMLSelectElement;
+    fireEvent.change(select, { target: { value: 'LIGHT' } });
 
     expect(updateSetting).toHaveBeenCalledTimes(1);
     expect(updateSetting).toHaveBeenCalledWith('theme', 'LIGHT');

src/renderer/components/settings/AppearanceSettings.tsx

@@ -13,24 +13,34 @@ import {
   TagIcon,
   XCircleIcon,
 } from '@primer/octicons-react';
-import { Button, ButtonGroup, IconButton, useTheme } from '@primer/react';
+import {
+  Button,
+  ButtonGroup,
+  IconButton,
+  Select,
+  useTheme,
+} from '@primer/react';
 
 import { namespacedEvent } from '../../../shared/events';
 import { AppContext } from '../../context/App';
 import { Size, Theme } from '../../types';
 import { hasMultipleAccounts } from '../../utils/auth/utils';
-import { getColorModeFromTheme, setTheme } from '../../utils/theme';
+import {
+  DEFAULT_DAY_COLOR_SCHEME,
+  DEFAULT_NIGHT_COLOR_SCHEME,
+  isDayScheme,
+  setScrollbarTheme,
+} from '../../utils/theme';
 import { zoomLevelToPercentage, zoomPercentageToLevel } from '../../utils/zoom';
 import { Checkbox } from '../fields/Checkbox';
 import { FieldLabel } from '../fields/FieldLabel';
-import { RadioGroup } from '../fields/RadioGroup';
 import { Title } from '../primitives/Title';
 
 let timeout: NodeJS.Timeout;
 const DELAY = 200;
 
 export const AppearanceSettings: FC = () => {
-  const { setColorMode } = useTheme();
+  const { setColorMode, setDayScheme, setNightScheme } = useTheme();
   const { auth, settings, updateSetting } = useContext(AppContext);
   const [zoomPercentage, setZoomPercentage] = useState(
     zoomLevelToPercentage(webFrame.getZoomLevel()),
@@ -41,14 +51,15 @@ export const AppearanceSettings: FC = () => {
       namespacedEvent('update-theme'),
       (_, updatedTheme: Theme) => {
         if (settings.theme === Theme.SYSTEM) {
-          const mode = getColorModeFromTheme(updatedTheme);
-
-          setTheme(updatedTheme);
-          setColorMode(mode);
+          const mode = isDayScheme(updatedTheme) ? 'day' : 'night';
+          setColorMode('auto');
+          setDayScheme(DEFAULT_DAY_COLOR_SCHEME);
+          setNightScheme(DEFAULT_NIGHT_COLOR_SCHEME);
+          setScrollbarTheme(mode);
         }
       },
     );
-  }, [settings.theme, setColorMode]);
+  }, [settings.theme, setColorMode, setDayScheme, setNightScheme]);
 
   window.addEventListener('resize', () => {
     // clear the timeout
@@ -65,20 +76,48 @@ export const AppearanceSettings: FC = () => {
     <fieldset>
       <Title icon={PaintbrushIcon}>Appearance</Title>
 
-      <RadioGroup
-        name="theme"
-        label="Theme:"
-        value={settings.theme}
-        options={[
-          { label: 'System', value: Theme.SYSTEM },
-          { label: 'Light', value: Theme.LIGHT },
-          { label: 'Dark', value: Theme.DARK },
-        ]}
-        onChange={(evt) => updateSetting('theme', evt.target.value as Theme)}
-      />
+      <div className="flex items-center mt-3 mb-2 text-sm">
+        <FieldLabel name="theme" label="Theme:" />
+
+        <Select
+          id="theme"
+          value={settings.theme}
+          onChange={(evt) => updateSetting('theme', evt.target.value as Theme)}
+          data-testid="settings-theme"
+        >
+          <Select.OptGroup label="System">
+            <Select.Option value={Theme.SYSTEM}>System</Select.Option>
+          </Select.OptGroup>
+          <Select.OptGroup label="Light">
+            <Select.Option value={Theme.LIGHT}>Light default</Select.Option>
+            <Select.Option value={Theme.LIGHT_HIGH_CONTRAST}>
+              Light high contrast
+            </Select.Option>
+            <Select.Option value={Theme.LIGHT_COLORBLIND}>
+              Light Protanopia & Deuteranopia
+            </Select.Option>
+            <Select.Option value={Theme.LIGHT_TRITANOPIA}>
+              Light Tritanopia
+            </Select.Option>
+          </Select.OptGroup>
+          <Select.OptGroup label="Dark">
+            <Select.Option value={Theme.DARK}>Dark default</Select.Option>
+            <Select.Option value={Theme.DARK_HIGH_CONTRAST}>
+              Dark high contrast
+            </Select.Option>
+            <Select.Option value={Theme.DARK_COLORBLIND}>
+              Dark Protanopia & Deuteranopia
+            </Select.Option>
+            <Select.Option value={Theme.DARK_TRITANOPIA}>
+              Dark Tritanopia
+            </Select.Option>
+            <Select.Option value={Theme.DARK_DIMMED}>Dark dimmed</Select.Option>
+          </Select.OptGroup>
+        </Select>
+      </div>
 
       <div className="flex items-center mt-3 mb-2 text-sm">
-        <FieldLabel name="zoom" label="Zoom" />
+        <FieldLabel name="zoom" label="Zoom:" />
 
         <ButtonGroup>
           <IconButton

src/renderer/context/App.tsx

@@ -49,7 +49,13 @@ import {
 import { Constants } from '../utils/constants';
 import { getNotificationCount } from '../utils/notifications/notifications';
 import { clearState, loadState, saveState } from '../utils/storage';
-import { getColorModeFromTheme, setTheme } from '../utils/theme';
+import {
+  DEFAULT_DAY_COLOR_SCHEME,
+  DEFAULT_NIGHT_COLOR_SCHEME,
+  isDayScheme,
+  mapThemeModeToColorScheme,
+  setScrollbarTheme,
+} from '../utils/theme';
 import { zoomPercentageToLevel } from '../utils/zoom';
 
 export const defaultAuth: AuthState = {
@@ -125,7 +131,7 @@ interface AppContextState {
 export const AppContext = createContext<Partial<AppContextState>>({});
 
 export const AppProvider = ({ children }: { children: ReactNode }) => {
-  const { setColorMode } = useTheme();
+  const { setColorMode, setDayScheme, setNightScheme } = useTheme();
   const [auth, setAuth] = useState<AuthState>(defaultAuth);
   const [settings, setSettings] = useState<SettingsState>(defaultSettings);
   const {
@@ -144,11 +150,18 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
   }, []);
 
   useEffect(() => {
-    const mode = getColorModeFromTheme(settings.theme);
-    setColorMode(mode);
+    const colorScheme = mapThemeModeToColorScheme(settings.theme);
 
-    setTheme(settings.theme); // TODO - Replace fully with Primer design tokens and components
-  }, [settings.theme, setColorMode]);
+    if (isDayScheme(settings.theme)) {
+      setDayScheme(colorScheme ?? DEFAULT_DAY_COLOR_SCHEME);
+      setColorMode('day');
+      setScrollbarTheme('day');
+    } else {
+      setNightScheme(colorScheme ?? DEFAULT_NIGHT_COLOR_SCHEME);
+      setColorMode('night');
+      setScrollbarTheme('night');
+    }
+  }, [settings.theme, setColorMode, setDayScheme, setNightScheme]);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: We only want fetchNotifications to be called for account changes
   useEffect(() => {