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;
 }