switch to DOM based variant adding

css/base.css

@@ -1,13 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @import "remixicon.css";
 @import "./modal.css";
 @import "./dark.css";
 @import "./tooltip.css";
 @import "./loader.css";
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 :root {
     --border-width-default: 2px;
     --border-width-2: 3px;
@@ -23,6 +23,18 @@
     background-color: #101010;
 }
 
+.dark select, .dark option, .dark input {
+    background: #202020;
+}
+
+.light-only {
+  display: none;
+}
+
+.dark-only {
+  display: initial;
+}
+
 .page-container {
     margin: 5% 20% 5% 20%;
 }
@@ -93,10 +105,6 @@ div.card:contains(section.banner.footer) {
     margin-top: 1rem;
 }
 
-.ml-1 {
-    margin-left: 1rem;
-}
-
 .ml-half {
     margin-left: 0.5rem;
 }
@@ -105,9 +113,6 @@ div.card:contains(section.banner.footer) {
     margin-right: 0.5rem;
 }
 
-.mr-1 {
-    margin-right: 1rem;
-}
 
 .p-1 {
     padding: 1rem;
@@ -429,6 +434,10 @@ input {
     border: 0 solid var(--color-neutral-300);
 }
 
+table {
+    color: var(--color-content);
+}
+
 p.top {
     margin-top: 0px;
 }

css/dark.css

@@ -1,91 +0,0 @@
-.dark {
-
-    --settings-section-button-filter: 110%;
-
-    --color-neutral-900: rgba(255, 255, 255, 0.87);
-    --color-neutral-800: rgba(255, 255, 255, 0.8);
-    --color-neutral-700: rgba(255, 255, 255, 0.73);
-    --color-neutral-600: rgba(255, 255, 255, 0.66);
-    --color-neutral-500: rgb(153, 153, 153);
-    --color-neutral-400: #383838;
-    --color-neutral-300: #303030;
-    --color-neutral-200: #292929;
-    --color-neutral-100: #242424;
-    --color-neutral-50: #202020;
-    --color-neutral-000: #101010;
-
-    --color-critical-900: #fef2f2;
-    --color-critical-800: #fee2e2;
-    --color-critical-700: #fecaca;
-    --color-critical-600: #fca5a5;
-    --color-critical-500: #f87171;
-    --color-critical-400: #ef4444;
-    --color-critical-300: #dc2626;
-    --color-critical-200: #b91c1c;
-    --color-critical-100: #991b1b;
-    --color-critical-50: #7f1d1d;
-    --color-critical-000: #441313;
-
-    --color-warning-900: #fffbeb;
-    --color-warning-800: #fef3c7;
-    --color-warning-700: #fde68a;
-    --color-warning-600: #fcd34d;
-    --color-warning-500: #fbbf24;
-    --color-warning-400: #f59e0b;
-    --color-warning-300: #d97706;
-    --color-warning-200: #b45309;
-    --color-warning-100: #92400e;
-    --color-warning-50: #783900;
-    --color-warning-000: #411e01;
-
-    --color-positive-900: #f0fdf4;
-    --color-positive-800: #dcfce7;
-    --color-positive-700: #bbf7d0;
-    --color-positive-600: #86efac;
-    --color-positive-500: #4ade80;
-    --color-positive-400: #22c55e;
-    --color-positive-300: #16a34a;
-    --color-positive-200: #15803d;
-    --color-positive-100: #166534;
-    --color-positive-50: #14532d;
-    --color-positive-000: #0f2e1b;
-
-    --color-urge-900: #e0ffff;
-    --color-urge-800: #c0fbff;
-    --color-urge-700: #a0f4ff;
-    --color-urge-600: #80e9ff;
-    --color-urge-500: #60dbfb;
-    --color-urge-400: #40cbf3;
-    --color-urge-300: #20b9e9;
-    --color-urge-200: #00a4dc; /* tab buttons */
-    --color-urge-100: #0054bc;
-    --color-urge-50: #00169a;
-    --color-urge-000: #050076;
-
-    --color-info-900: #f5f3ff;
-    --color-info-800: #ede9fe;
-    --color-info-700: #ddd6fe;
-    --color-info-600: #c4b5fd;
-    --color-info-500: #a78bfa;
-    --color-info-400: #8b5cf6;
-    --color-info-300: #7c3aed;
-    --color-info-200: #6d28d9;
-    --color-info-100: #5b21b6;
-    --color-info-50: #4c1d95;
-    --color-info-000: #240e44;
-
-
-    --color-neutral-normal-content: #ffffff;
-}
-
-.light-only {
-  display: none;
-}
-
-.dark-only {
-  display: initial;
-}
-
-.dark select option {
-    background: #202020;
-}