fix color schema usage

src/frontend/src/components/items/GettingStartedCarousel.css.ts

@@ -15,18 +15,16 @@ export const card = style({
 
 export const title = style({
   fontWeight: 900,
-  color:
-    //vars.colorScheme === 'dark' ? vars.colors.white[0] : vars.colors.dark[0],
-    vars.colors.dark[0],
   lineHeight: 1.2,
   fontSize: rem(32),
-  marginTop: 0
+  marginTop: 0,
+  [vars.lightSelector]: { color: vars.colors.dark[0] },
+  [vars.darkSelector]: { color: vars.colors.white[0] }
 });
 
 export const category = style({
-  color:
-    //vars.colorScheme === 'dark' ? vars.colors.white : vars.colors.dark,
-    vars.colors.dark[0],
   opacity: 0.7,
-  fontWeight: 700
+  fontWeight: 700,
+  [vars.lightSelector]: { color: vars.colors.dark[0] },
+  [vars.darkSelector]: { color: vars.colors.white[0] }
 });

src/frontend/src/components/widgets/WidgetLayout.css.ts

@@ -3,12 +3,11 @@ import { style } from '@vanilla-extract/css';
 import { vars } from '../../theme';
 
 export const backgroundItem = style({
-  backgroundColor:
-    //theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.white,
-    vars.colors.white,
   maxWidth: '100%',
   padding: '8px',
-  boxShadow: vars.shadows.md
+  boxShadow: vars.shadows.md,
+  [vars.lightSelector]: { backgroundColor: vars.colors.white },
+  [vars.darkSelector]: { backgroundColor: vars.colors.dark[5] }
 });
 
 export const baseItem = style({