fix: dark mode color schemes

ccontrols · May 30, 2020 · 97bd559 · 97bd559
1 parent 94f7ba4
commit 97bd559
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/ui/app-components/src/ColorMode/ColorMode.tsx b/ui/app-components/src/ColorMode/ColorMode.tsx
@@ -10,7 +10,10 @@ import { Toggle, ToggleProps } from '@component-controls/components';
 /**
  * dark/light mode toggle for theme-ui themes
  */
-export const ColorMode: FC<ToggleProps> = props => {
+export const ColorMode: FC<Omit<
+  ToggleProps,
+  'checked' | 'onChange'
+>> = props => {
   const [colorMode, setColorMode] = useColorMode();
   const isDark = colorMode === `dark`;
   const toggleColorMode = (checked: boolean) => {

diff --git a/ui/app-components/src/Navmenu/Navmenu.tsx b/ui/app-components/src/Navmenu/Navmenu.tsx
@@ -286,6 +286,9 @@ export const Navmenu: FC<NavMenuProps> = props => {
               alignItems: 'center',
               position: 'relative',
               ml: 1 + level,
+              '& strong': {
+                color: 'text',
+              },
             }}
           >
             {items && (
@@ -306,7 +309,12 @@ export const Navmenu: FC<NavMenuProps> = props => {
               <Flex sx={{ flexDirection: 'row', alignItems: 'center' }}>
                 {icon && <Box sx={{ mr: 2 }}>{icon}</Box>}
                 {typeof label === 'string' ? (
-                  <Text sx={{ whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
+                  <Text
+                    sx={{
+                      whiteSpace: 'nowrap',
+                      textOverflow: 'ellipsis',
+                    }}
+                  >
                     {items ? <strong>{label}</strong> : label}
                   </Text>
                 ) : (

diff --git a/ui/components/src/ThemeContext/ThemeContext.tsx b/ui/components/src/ThemeContext/ThemeContext.tsx
@@ -106,7 +106,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
           ...polaris.colors,
           gray: '#f6f6f6',
           header: '#edebe8',
-          highlight: '#b3e6e4',
+          highlight: '#d9f2f1',
           action: '#3B817D',
           selected: '#027AC5',
           fadedText: '#69768C',
@@ -117,7 +117,9 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
               background: '#38404a',
               text: '#d3d4db',
               header: '#111111',
-              fadedText: '#b3b4ba',
+              fadedText: '#c9cacf',
+              selected: '#b3d9ff',
+              action: '#d9f2f1',
               shadow: transparentize(0.9, '#d3d4db'),
             },
           },