💄 use color themes

Konnektoren · Jun 13, 2024 · 8ca4e39 · 8ca4e39
1 parent e525ef5
commit 8ca4e39
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 16 deletions.
diff --git a/styles/abstracts/_themes.scss b/styles/abstracts/_themes.scss
@@ -1,9 +1,9 @@
 @mixin light-theme {
-  --background-primary: #ffffff;
-  --text-primary: #121212;
+    --background-primary: #f5f5f5;
+    --text-primary: #121212;
 }
 
 @mixin dark-theme {
-  --background-primary: #121212;
-  --text-primary: #ffffff;
+    --background-primary: #121212;
+    --text-primary: #f5f5f5;
 }
diff --git a/styles/base/_global.scss b/styles/base/_global.scss
@@ -1,19 +1,22 @@
 @use "../abstracts" as *;
 
 body {
-    --bg-color: var(--tg-theme-bg-color);
+    @include light-theme;
+
+    --bg-color: var(--tg-theme-bg-color, var(--background-primary));
+    --text-color: var(--tg-theme-text-color, var(--text-primary));
+    background-color: var(--bg-color);
+    color: var(--text-color);
     font:
         12px/18px "Lucida Grande",
         "Lucida Sans Unicode",
         Arial,
         Helvetica,
         Verdana,
         sans-serif;
-    background-color: var(--bg-color);
-    color: var(--tg-theme-text-color);
     margin: 8px 4px;
     padding: 0;
-    color-scheme: var(--tg-color-scheme);
+    color-scheme: var(--tg-color-scheme, light);
 }
 
 a {

diff --git a/styles/components/_challenge.scss b/styles/components/_challenge.scss
@@ -10,7 +10,6 @@ h1 {
     align-items: center;
     justify-content: center;
     padding: 1em;
-    background-color: #f5f5f5;
     text-align: center;
 
     h1 {
@@ -59,15 +58,13 @@ h1 {
 }
 
 .challenge-page.correct {
-    background-color: #28a745;
     animation: flicker-correct 0.5s linear;
     .challenge {
         background-color: transparent;
     }
 }
 
 .challenge-page.incorrect {
-    background-color: #dc3545;
     animation: flicker-incorrect 0.5s linear;
     .challenge {
         background-color: transparent;

diff --git a/styles/components/_claim.scss b/styles/components/_claim.scss
@@ -1,5 +1,4 @@
 .claim {
-    background-color: #f8f9fa;
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

diff --git a/styles/components/_footer.scss b/styles/components/_footer.scss
@@ -1,7 +1,8 @@
 @use "../abstracts" as *;
 
 .footer {
-    background-color: $footer-background-color;
-    border-top: 1px solid $footer-border-color;
+    margin-top: 2rem;
+    padding: 1rem;
+    border-top: 2px solid $footer-border-color;
     text-align: center;
 }
diff --git a/styles/components/_multiple_choice_options.scss b/styles/components/_multiple_choice_options.scss
@@ -4,7 +4,6 @@
     align-self: center;
     border: 1px solid #ccc;
     border-radius: 10px;
-    background-color: #fff;
     padding: 1em;
     text-align: left;
     border: 1px solid #007bff;

diff --git a/styles/components/_result_summary.scss b/styles/components/_result_summary.scss
@@ -1,8 +1,8 @@
 @use "../abstracts" as *;
 
 .result-summary {
+    margin-top: 5rem;
     padding: 2em;
-    background-color: #f5f5f5;
     text-align: center;
 
     h2 {