Update PocketBase Theme

src/base.css

@@ -1,67 +1,35 @@
-html {
-  --bg_h: #f9f5d7 !important;
-  --bg: #fbf1c7 !important;
-  --bg_s: #f2e5bc !important;
-  --bg1: #ebdbb2 !important;
-  --bg2: #d5c4a1 !important;
-  --bg3: #bdae93 !important;
-  --bg4: #a89984 !important;
+:root {
+  --bg_h: #1d2021;
+  --bg: #282828;
+  --bg_s: #32302f;
+  --bg1: #3c3836;
+  --bg2: #504945;
+  --bg3: #665c54;
+  --bg4: #7c6f64;
 
-  --fg: #282828 !important;
-  --fg1: #3c3836 !important;
-  --fg2: #504945 !important;
-  --fg3: #665c54 !important;
-  --fg4: #7c6f64 !important;
+  --fg: #fbf1c7;
+  --fg1: #ebdbb2;
+  --fg2: #d5c4a1;
+  --fg3: #bdae93;
+  --fg4: #a89984;
 
-  --red: #9d0006 !important;
-  --green: #79740e !important;
-  --yellow: #b57614 !important;
-  --blue: #076678 !important;
-  --purple: #8f3f71 !important;
-  --aqua: #427b58 !important;
-  --orange: #af3a03 !important;
-  --gray: #928374 !important;
+  --red: #fb4934;
+  --green: #b8bb26;
+  --yellow: #fabd2f;
+  --blue: #83a598;
+  --purple: #d3869b;
+  --aqua: #8ec07c;
+  --gray: #928374;
+  --orange: #fe8019;
 
-  --red-dim: #cc2412 !important;
-  --green-dim: #98971a !important;
-  --yellow-dim: #d79921 !important;
-  --blue-dim: #458598 !important;
-  --purple-dim: #b16286 !important;
-  --aqua-dim: #689d6a !important;
-  --orange-dim: #d65d0e !important;
-  --gray-dim: #7c6f64 !important;
-}
-
-html.dark {
-  --bg_h: #1d2021 !important;
-  --bg: #282828 !important;
-  --bg_s: #32302f !important;
-  --bg1: #3c3836 !important;
-  --bg2: #504945 !important;
-  --bg3: #665c54 !important;
-  --bg4: #7c6f64 !important;
-
-  --fg: #fbf1c7 !important;
-  --fg1: #ebdbb2 !important;
-  --fg2: #d5c4a1 !important;
-  --fg3: #bdae93 !important;
-  --fg4: #a89984 !important;
-
-  --red: #fb4934 !important;
-  --green: #b8bb26 !important;
-  --yellow: #fabd2f !important;
-  --blue: #83a598 !important;
-  --purple: #d3869b !important;
-  --aqua: #8ec07c !important;
-  --gray: #928374 !important;
-  --orange: #fe8019 !important;
-
-  --red-dim: #cc2412 !important;
-  --green-dim: #98971a !important;
-  --yellow-dim: #d79921 !important;
-  --blue-dim: #458588 !important;
-  --purple-dim: #b16286 !important;
-  --aqua-dim: #689d6a !important;
-  --gray-dim: #a89984 !important;
-  --orange-dim: #d65d0e !important;
+  --red-dim: #cc2412;
+  --green-dim: #98971a;
+  --yellow-dim: #d79921;
+  --blue-dim: #458588;
+  --purple-dim: #b16286;
+  --aqua-dim: #689d6a;
+  --gray-dim: #a89984;
+  --orange-dim: #d65d0e;
+  --monospaceFontFamily: "ComicCodeLigatures Nerd Font", "Ubuntu Mono",
+    monospace, emoji;
 }

src/pocketbase.user.css

@@ -1,5 +1,5 @@
 /* ==UserStyle==
-@name           Dracula for Pocketbase
+@name           Gruvbox for Pocketbase
 @namespace      git.m3.fyi/Marsn3
 @version        1.0.0
 @description    A dark Theme for Pocketbase
@@ -12,35 +12,67 @@
 @-moz-document domain("api.m3.fyi") {
   /*~~~~~ Base Colors ~~~~~*/
   :root {
+    --bg_h: #1d2021;
+    --bg: #282828;
+    --bg_s: #32302f;
+    --bg1: #3c3836;
+    --bg2: #504945;
+    --bg3: #665c54;
+    --bg4: #7c6f64;
+
+    --fg: #fbf1c7;
+    --fg1: #ebdbb2;
+    --fg2: #d5c4a1;
+    --fg3: #bdae93;
+    --fg4: #a89984;
+
+    --red: #fb4934;
+    --green: #b8bb26;
+    --yellow: #fabd2f;
+    --blue: #83a598;
+    --purple: #d3869b;
+    --aqua: #8ec07c;
+    --gray: #928374;
+    --orange: #fe8019;
+
+    --red-dim: #cc2412;
+    --green-dim: #98971a;
+    --yellow-dim: #d79921;
+    --blue-dim: #458588;
+    --purple-dim: #b16286;
+    --aqua-dim: #689d6a;
+    --gray-dim: #a89984;
+    --orange-dim: #d65d0e;
     --monospaceFontFamily: "ComicCodeLigatures Nerd Font", "Ubuntu Mono",
       monospace, emoji;
-    --txtPrimaryColor: #f8f8f2;
-    --txtHintColor: #7b81a6;
-    --txtDisabledColor: #9599b7;
-    --primaryColor: #969dca;
-    --bodyColor: #282a36;
-    --baseColor: #282a36;
-    --baseAlt1Color: #585b74;
-    --baseAlt2Color: #4d5166;
-    --baseAlt3Color: #424457;
-    --baseAlt4Color: #373949;
-    --infoColor: #8be9fd;
-    --infoAltColor: #8be9fd;
-    --successColor: #50fa7b;
-    --successAltColor: #50fa7b;
-    --dangerColor: #ff5555;
-    --dangerAltColor: #ff5555;
-    --warningColor: #bd93f9;
-    --warningAltColor: #ffffa5;
-    --overlayColor: rgba(65, 82, 105, 0.25);
-    --tooltipColor: rgba(255, 255, 255, 0.85);
-    --shadowColor: rgba(0, 0, 0, 0.05);
-    accent-color: var(--primaryColor);
+
+    --txtPrimaryColor: var(--fg);
+    --txtHintColor: var(--fg2);
+    --txtDisabledColor: var(--fg3);
+    --primaryColor: var(--green-dim);
+    --bodyColor: var(--bg);
+    --baseColor: var(--bg);
+    --baseAlt1Color: var(--bg4);
+    --baseAlt2Color: var(--bg3);
+    --baseAlt3Color: var(--bg2);
+    --baseAlt4Color: var(--bg1);
+    --infoColor: var(--blue);
+    --infoAltColor: var(--blue-dim);
+    --successColor: var(--green);
+    --successAltColor: var(--green-dim);
+    --dangerColor: var(--red);
+    --dangerAltColor: var(--red-dim);
+    --warningColor: var(--orange);
+    --warningAltColor: var(--orange-dim);
+    --overlayColor: rgba(168, 153, 132,0.25);
+    --tooltipColor: var(--bg4)
+    --shadowColor: rgba(50, 48, 47, 0.5);
+    --accent-color: var(--primaryColor);
   }
 
   /*~~~~~ Buttoms ~~~~~*/
   .btn-sm .btn-warning {
-    background-color: pink !important;
+    background-color: var(--warningColor) !important;
   }
   .btn.btn-secondary,
   .btn.btn-outline {
@@ -83,16 +115,16 @@
     color: var(--warningColor);
   }
   .prism-light .token.number {
-    color: #ffb86c;
+    color: var(--orange);
   }
   .prism-light .token.class-name {
-    color: #8be9fd;
+    color: var(--blue);
   }
   .prism-light .token.comment {
-    color: #9599b7;
+    color: var(--fg4);
   }
   .prism-light .token.function {
-    color: #bd93f9;
+    color: var(--purple);
   }
 
   /*~~~~~ Colored Delete Icon ~~~~~*/
@@ -102,7 +134,7 @@
 
   /*~~~~~ Syntax Highlighting for Regex Fields ~~~~~*/
   .ͼb {
-    color: #bd93f9;
+    color: var(--purple);
   }
   .ͼe {
     color: var(--dangerColor);