#34

frontend/src/index.css

@@ -34,6 +34,15 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
     --theme-link: 221.2 83.2% 53.3%;
+    --top-nav-background: 48 96% 89%;
+    --top-nav-foreground: 20 14.3% 4.1%;
+    --top-nav-border: 45 93% 77%;
+    --top-nav-link: 334 84% 57%;
+    --top-nav-link-hover: 334 78% 69%;
+    --top-nav-active-background: 48 96% 89%;
+    --top-nav-active-foreground: 20 14.3% 4.1%;
+    --top-nav-submenu-background: 48 100% 96%;
+    --top-nav-submenu-foreground: 20 14.3% 4.1%;
 
     --tag-colour-deerjikist: #9f1239;
     --tag-colour-deerjikist-hover: #b62a51;
@@ -78,6 +87,15 @@
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
+    --top-nav-background: 0 49% 20%;
+    --top-nav-foreground: 345 100% 93%;
+    --top-nav-border: 0 38% 28%;
+    --top-nav-link: 335 82% 80%;
+    --top-nav-link-hover: 341 100% 92%;
+    --top-nav-active-background: 0 38% 28%;
+    --top-nav-active-foreground: 345 100% 93%;
+    --top-nav-submenu-background: 0 49% 20%;
+    --top-nav-submenu-foreground: 345 100% 93%;
   }
 
   body
@@ -197,6 +215,43 @@ body
   color: var(--tag-link-hover-colour) !important;
 }
 
+.top-nav-themed
+{
+  background: hsl(var(--top-nav-background));
+  color: hsl(var(--top-nav-foreground));
+  border-color: hsl(var(--top-nav-border));
+}
+
+.top-nav-themed a,
+.top-nav-themed button
+{
+  color: hsl(var(--top-nav-link));
+}
+
+.top-nav-themed a:hover,
+.top-nav-themed button:hover
+{
+  color: hsl(var(--top-nav-link-hover));
+}
+
+.top-nav-themed-active
+{
+  background: hsl(var(--top-nav-active-background));
+  color: hsl(var(--top-nav-active-foreground));
+}
+
+.top-nav-themed a.top-nav-themed-active,
+.top-nav-themed button.top-nav-themed-active
+{
+  color: hsl(var(--top-nav-active-foreground));
+}
+
+.top-nav-themed-submenu
+{
+  background: hsl(var(--top-nav-submenu-background));
+  color: hsl(var(--top-nav-submenu-foreground));
+}
+
 .tag-marquee__animated
 {
   position: absolute;