improve theme

src/base/_theme-css-variables.scss

@@ -1,18 +1,68 @@
-
 .o-container {
   /* Color */
-  --o-transparent: transparent;
-  --o-white: white;
-  --o-black: black;
-  --o-light: #c7e9fe;
-  --o-dark: #000300;
-  --o-primary: #e23a48;
-  --o-secondary: #685ca0;
-  --o-info: #7085b7;
-  --o-accent1: #a0dbf7;
-  --o-accent2: #e7508a;
-  --o-accent3: #ccc1d3;
-  --o-success: #6fb72b;
-  --o-warning: #fec785;
-  --o-danger: #f8166b;
+
+  --primary-color-dark: #2c2455; /* Darker Indigo */
+  --secondary-color-dark: #502963; /* Darker Purple */
+  --tertiary-color-dark: #7e3d6d; /* Darker Magenta */
+  --quaternary-color-dark: #a8626d; /* Darker Rose */
+
+  --background-color-dark: #202020; /* Very Dark Grey for background */
+  --text-color-dark: #e0e0e0; /* Light Grey for text */
+
+  --accent-color-dark: #ffd166; /* Mustard Yellow for accents (unchanged) */
+
+  --primary-color-light: #37306b; /* Original Deep Indigo */
+  --secondary-color-light: #66347f; /* Original Rich Purple */
+  --tertiary-color-light: #9e4784; /* Original Muted Magenta */
+  --quaternary-color-light: #d27685; /* Original Soft Rose */
+
+  --background-color-light: #f3f3f3; /* Light Grey for background */
+  --text-color-light: #333333; /* Dark Grey for text */
+
+  --accent-color-light: #ffd166; /* Mustard Yellow for accents (unchanged) */
+
+  --o-primary-color: var(--primary-color-light);
+  --o-secondary-color: var(--secondary-color-light);
+  --o-tertiary-color: var(--tertiary-color-light);
+  --o-quaternary-color: var(--quaternary-color-light);
+  --o-background-color: var(--background-color-light);
+  --o-text-color: var(--text-color-light);
+  --o-accent-color: var(--accent-color-light);
+}
+.theme-dark {
+  --o-primary-color: var(--primary-color-dark);
+  --o-secondary-color: var(--secondary-color-dark);
+  --o-tertiary-color: var(--tertiary-color-dark);
+  --o-quaternary-color: var(--quaternary-color-dark);
+
+  --o-background-color: var(--background-color-dark);
+  --o-text-color: var(--text-color-dark);
+
+  --o-accent-color: var(--accent-color-dark);
+}
+
+.theme-light {
+  --o-primary-color: var(--primary-color-light);
+  --o-secondary-color: var(--secondary-color-light);
+  --o-tertiary-color: var(--tertiary-color-light);
+  --o-quaternary-color: var(--quaternary-color-light);
+
+  --o-background-color: var(--background-color-light);
+  --o-text-color: var(--text-color-light);
+
+  --o-accent-color: var(--accent-color-light);
+}
+
+@media (prefers-color-scheme: dark) {
+  .o-container {
+    --o-primary-color: var(--primary-color-dark);
+    --o-secondary-color: var(--secondary-color-dark);
+    --o-tertiary-color: var(--tertiary-color-dark);
+    --o-quaternary-color: var(--quaternary-color-dark);
+
+    --o-background-color: var(--background-color-dark);
+    --o-text-color: var(--text-color-dark);
+
+    --o-accent-color: var(--accent-color-dark);
+  }
 }

src/components/_container-theme.scss

@@ -1,5 +1,5 @@
 /* container */
 .o-container {
-  border: 1px dashed var(--o-dark);
+  border: 0px solid;
   padding: 30px;
 }

src/components/_core-theme.scss

@@ -1,4 +1,4 @@
 
 .o-core {
-  border: 1px solid rgb(255, 5, 5);
+  border:1px solid var(--o-secondary-color);
 }

src/components/_label-theme.scss

@@ -1,14 +1,14 @@
 /* element theme */
 .o-label {
-  border-color: var(--o-info);
+  border-color: var(--o-quaternary-color);
 }
 
 .o-label::before {
-  border-bottom-color: var(--o-info);
+  border-bottom-color: var(--o-quaternary-color);
 }
 
 .o-label > .o-text {
-  background-color: var(--o-light);
-  border-color: var(--o-info);
-  color: var(--o-info);
+  background-color: var(--o-background-color);
+  border-color: var(--o-quaternary-color);
+  color: var(--o-quaternary-color);
 }

src/components/_orbit-theme.scss

@@ -1,4 +1,4 @@
 
 .o-orbit {
-  border: 0px solid var(--o-dark);
+  border: 0px solid var(--o-secondary-color);
 }

src/components/_orbiter-theme.scss

@@ -1,6 +1,6 @@
 /* orbiter */
 .o-orbiter {
-  background-color: var(--o-light);
-  border-color: var(--o-dark);
+  background-color: var(--o-background-color);
+  border-color: var(--o-primary-color);
   border: 0px solid;
 }

src/components/_progress-theme.scss

@@ -1,8 +1,8 @@
 /* progress */
 .o-progress {
-  background-image: radial-gradient(circle, var(--o-light) 64%, transparent 65%),
+  background-image: radial-gradient(circle, var(--o-background-color) 64%, transparent 65%),
     conic-gradient(
-      var(--o-primary) calc((var(--o-percentage) - 1) * 1deg),
-      var(--o-secondary) calc(var(--o-percentage) * 1deg)
+      var(--o-tertiary-color) calc((var(--o-percentage) - 1) * 1deg),
+      var(--o-accent-color) calc(var(--o-percentage) * 1deg)
     );
 }

src/components/_sector-theme.scss

@@ -1,7 +1,7 @@
 .o-sector {
-  border-color: var(--o-accent2);
+  border-color: var(--o-secundary-color);
   background-color: transparent;
 }
 .o-sector:hover {
-  border-color: var(--o-accent3);
+  border-color: var(--o-tertiary-color);
 }

src/components/_svg-markers-theme.scss

@@ -1,5 +1,5 @@
 /* svg */
 .o-svg > .o-svg-markers {
   fill: none;
-  stroke: #9119e069;
+  stroke: var(--o-accent-color);
 }