#34

frontend/src/index.css

@@ -10,6 +10,10 @@
   {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
 
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
@@ -29,6 +33,7 @@
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
+    --theme-link: 221.2 83.2% 53.3%;
 
     --tag-colour-deerjikist: #9f1239;
     --tag-colour-deerjikist-hover: #b62a51;
@@ -50,6 +55,10 @@
   {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
 
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
@@ -73,16 +82,16 @@
 
   body
   {
-    @apply overflow-x-clip;
+    @apply overflow-x-clip bg-background text-foreground;
   }
 
   a
   {
-    @apply text-blue-700 dark:text-blue-300;
+    color: hsl(var(--theme-link));
   }
   a:hover
   {
-    @apply text-blue-500 dark:text-blue-100;
+    opacity: .85;
   }
 }
 
@@ -93,8 +102,8 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color: hsl(var(--foreground));
+  background-color: hsl(var(--background));
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -135,28 +144,15 @@ body
 {
   margin: 0;
   min-width: 320px;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
 }
 
 #root
 {
   min-height: 100dvh;
-}
-
-@media (prefers-color-scheme: light)
-{
-  :root
-  {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover
-  {
-    color: #747bff;
-  }
-  button
-  {
-    background-color: #f9f9f9;
-  }
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
 }
 
 @keyframes wiki-blink