From 49093718537b72e22ede342bae5a05dbde9bd10c Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 19 Jun 2022 23:18:32 +0800 Subject: [PATCH] fix: patch primer themes --- src/containers/Theme.tsx | 38 ++++++++++++++++++++------------------ 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/src/containers/Theme.tsx b/src/containers/Theme.tsx index 3ba2551..b9f44b9 100644 --- a/src/containers/Theme.tsx +++ b/src/containers/Theme.tsx @@ -1,27 +1,29 @@ +import primitives from '@primer/primitives' import { BaseStyles, ThemeProvider } from '@primer/react' import theme from '@primer/react/lib-esm/theme' import * as React from 'react' +// Temporary color fix for out-of-date embedded @primer/primitives in @primer/react +// The `*_tritanopia` themes are actually not bundled within @primer/react@35.2.2 +// TODO: Upgrade @primer/react to support these themes +const fixedTheme = { + ...theme, + colorSchemes: { + ...theme.colorSchemes, + light_tritanopia: theme.colorSchemes.light, + dark_tritanopia: theme.colorSchemes.dark, + }, +} + +const validColorSchemes = Object.keys(fixedTheme.colorSchemes) as EnumString< + keyof typeof primitives['colors'] +>[] + const colorModeMap: Record = { dark: 'night', light: 'day', } -const validColorSchemes = Object.keys(theme.colorSchemes) as EnumString< - | 'light' - | 'light_high_contrast' - | 'light_colorblind' - | 'light_tritanopia' - | 'dark' - | 'dark_dimmed' - | 'dark_high_contrast' - | 'dark_colorblind' - | 'dark_tritanopia' ->[] -// The `*_tritanopia` themes are actually not bundled within @primer/react@35.2.2 -// TODO: Upgrade @primer/react to support these themes -// BUT: Do not remove the validation, there might be other themes in future - const getPreferenceFromDOM = () => { // { return { colorMode: (colorMode && colorModeMap[colorMode]) || 'auto', - dayScheme: lightTheme && validColorSchemes.includes(lightTheme) ? lightTheme : undefined, - nightScheme: darkTheme && validColorSchemes.includes(darkTheme) ? darkTheme : undefined, + dayScheme: lightTheme && validColorSchemes.includes(lightTheme) ? lightTheme : 'light', + nightScheme: darkTheme && validColorSchemes.includes(darkTheme) ? darkTheme : 'dark', } as const } @@ -49,7 +51,7 @@ function useThemePreference() { export function Theme({ children }: React.PropsWithChildren<{}>) { const themePreference = useThemePreference() return ( - + {children} )