From fbdb0cf1d96e2a0af4f5b2cef50e6259e9b1cfd1 Mon Sep 17 00:00:00 2001
From: Matthias Mair <code@mjmair.com>
Date: Wed, 1 May 2024 16:03:01 +0200
Subject: [PATCH] fix color schema usage

---
 .../components/items/GettingStartedCarousel.css.ts | 14 ++++++--------
 .../src/components/widgets/WidgetLayout.css.ts     |  7 +++----
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/components/items/GettingStartedCarousel.css.ts b/src/frontend/src/components/items/GettingStartedCarousel.css.ts
index e2b40e77e6..19e75afb37 100644
--- a/src/frontend/src/components/items/GettingStartedCarousel.css.ts
+++ b/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] }
 });
diff --git a/src/frontend/src/components/widgets/WidgetLayout.css.ts b/src/frontend/src/components/widgets/WidgetLayout.css.ts
index 6aee1840f5..467dd24b60 100644
--- a/src/frontend/src/components/widgets/WidgetLayout.css.ts
+++ b/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({