fix missing theming

src/frontend/src/main.css.ts

@@ -5,21 +5,22 @@ import { vars } from './theme';
 
 export const layoutHeader = style({
   paddingTop: vars.spacing.sm,
+  marginBottom: 10,
+
+  [vars.lightSelector]: {
     backgroundColor: vars.colors.gray[0],
-  //theme.colorScheme === 'dark' ? vars.colors.dark[6] : vars.colors.gray[0],
+    borderBottom: `${rem(1)} solid ${vars.colors.gray[2]}`
-  borderBottom: `1px solid ${
+  },
-    //theme.colorScheme === 'dark' ? 'transparent' : vars.colors.gray[2]
+  [vars.darkSelector]: {
-    vars.colors.gray[2]
+    backgroundColor: vars.colors.dark[6],
-  }`,
+    borderBottom: `${rem(1)} solid transparent`
-  marginBottom: 10
+  }
 });
 
 export const layoutFooter = style({
   marginTop: 10,
-  borderTop: `1px solid ${
+  [vars.lightSelector]: { borderTop: `1px solid ${vars.colors.gray[2]}` },
-    //theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[2]
+  [vars.darkSelector]: { borderTop: `1px solid ${vars.colors.dark[5]}` }
-    vars.colors.gray[2]
-  }`
 });
 
 export const layoutHeaderSection = style({
@@ -27,30 +28,32 @@ export const layoutHeaderSection = style({
 });
 
 export const layoutHeaderUser = style({
-  color:
-    //theme.colorScheme === 'dark' ? vars.colors.dark[0] : vars.black,
-    vars.colors.black,
   padding: `${vars.spacing.xs}px ${vars.spacing.sm}px`,
   borderRadius: vars.radiusDefault,
   transition: 'background-color 100ms ease',
 
+  [vars.lightSelector]: { color: vars.colors.black },
+  [vars.darkSelector]: { color: vars.colors.dark[0] },
+
   [vars.smallerThan('xs')]: {
     display: 'none'
   }
 });
 
 export const headerDropdownFooter = style({
-  backgroundColor:
-    //theme.colorScheme === 'dark' ? vars.colors.dark[7] : vars.colors.gray[0],
-    vars.colors.gray[0],
   margin: `calc(${vars.spacing.md} * -1)`,
   marginTop: vars.spacing.sm,
   padding: `${vars.spacing.md} calc(${vars.spacing.md} * 2)`,
   paddingBottom: vars.spacing.xl,
-  borderTop: `${rem(1)} solid ${
+
-    //theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[1]
+  [vars.lightSelector]: {
-    vars.colors.gray[1]
+    backgroundColor: vars.colors.gray[0],
-  }`
+    borderTop: `${rem(1)} solid ${vars.colors.gray[1]}`
+  },
+  [vars.darkSelector]: {
+    backgroundColor: vars.colors.dark[7],
+    borderTop: `${rem(1)} solid ${vars.colors.dark[5]}`
+  }
 });
 
 export const link = style({
@@ -60,25 +63,23 @@ export const link = style({
   paddingLeft: vars.spacing.md,
   paddingRight: vars.spacing.md,
   textDecoration: 'none',
-  color:
-    //theme.colorScheme === 'dark' ? vars.white: vars.black,
-    vars.colors.black,
   fontWeight: 500,
   fontSize: vars.fontSizes.sm,
 
+  [vars.lightSelector]: { color: vars.colors.black },
+  [vars.darkSelector]: { color: vars.colors.white },
+
   [vars.smallerThan('sm')]: {
     height: rem(42),
     display: 'flex',
     alignItems: 'center',
     width: '100%'
-  }
+  },
 
-  // ...theme.fn.hover({
+  ':hover': {
-  //   backgroundColor:
+    [vars.lightSelector]: { backgroundColor: vars.colors.gray[0] },
-  //     theme.colorScheme === 'dark'
+    [vars.darkSelector]: { backgroundColor: vars.colors.dark[6] }
-  //       ? vars.colors.dark[6]
+  }
-  //       : vars.colors.gray[0]
-  // })
 });
 
 export const subLink = style({
@@ -86,12 +87,10 @@ export const subLink = style({
   padding: `${vars.spacing.xs} ${vars.spacing.md}`,
   borderRadius: vars.radiusDefault,
 
-  // ...theme.fn.hover({
+  ':hover': {
-  //   backgroundColor:
+    [vars.lightSelector]: { backgroundColor: vars.colors.gray[0] },
-  //     theme.colorScheme === 'dark'
+    [vars.darkSelector]: { backgroundColor: vars.colors.dark[7] }
-  //       ? vars.colors.dark[7]
+  },
-  //       : vars.colors.gray[0]
-  // })
 
   ':active': {
     color: vars.colors.defaultHover
@@ -141,9 +140,8 @@ export const tab = style({
   backgroundColor: 'transparent',
 
   ':hover': {
-    backgroundColor:
+    [vars.lightSelector]: { backgroundColor: vars.colors.gray[1] },
-      //theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[1]
+    [vars.darkSelector]: { backgroundColor: vars.colors.dark[5] }
-      vars.colors.gray[1]
   }
 });
 
@@ -168,16 +166,13 @@ export const dashboardItemTitle = style({
 });
 
 export const card = style({
-  backgroundColor:
+  [vars.lightSelector]: { backgroundColor: vars.colors.white },
-    //theme.colorScheme === 'dark' ? vars.colors.dark[7] : vars.white
+  [vars.darkSelector]: { backgroundColor: vars.colors.dark[7] }
-    vars.colors.white
 });
 
 export const itemTopBorder = style({
-  borderTop: `1px solid ${
+  [vars.lightSelector]: { borderTop: `1px solid ${vars.colors.gray[2]}` },
-    //theme.colorScheme === 'dark' ? vars.colors.dark[4] : vars.colors.gray[2]
+  [vars.darkSelector]: { borderTop: `1px solid ${vars.colors.dark[4]}` }
-    vars.colors.gray[2]
-  }`
 });
 
 export const navigationDrawer = style({