add cc, dark theme and hide default values

styles.css

@@ -1,9 +1,11 @@
 /* CSS Custom Properties - Material Design 3 inspired */
 :root {
+    /* Light theme (default) */
     --md-sys-color-primary: #1976D2;
     --md-sys-color-primary-dark: #1565C0;
     --md-sys-color-on-primary: #FFFFFF;
     --md-sys-color-surface: #FAFAFA;
+    --md-sys-color-surface-container: #FFFFFF;
     --md-sys-color-surface-variant: #E3E3E3;
     --md-sys-color-on-surface: #1C1B1F;
     --md-sys-color-on-surface-variant: #49454F;
@@ -12,6 +14,8 @@
     --md-sys-color-background: #F5F5F5;
     --md-sys-color-error: #B3261E;
     --md-sys-color-success: #2E7D32;
+    --md-sys-color-preview-bg: #E8E8E8;
+    --md-sys-color-preview-pattern: #D0D0D0;
 
     --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
     --md-sys-elevation-2: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1);
@@ -27,6 +31,31 @@
     --md-sys-typescale-label-large: 500 0.875rem/1.25rem 'Roboto', sans-serif;
 }
 
+/* Dark theme - follows system preference */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --md-sys-color-primary: #90CAF9;
+        --md-sys-color-primary-dark: #64B5F6;
+        --md-sys-color-on-primary: #003258;
+        --md-sys-color-surface: #1E1E1E;
+        --md-sys-color-surface-container: #2D2D2D;
+        --md-sys-color-surface-variant: #3D3D3D;
+        --md-sys-color-on-surface: #E6E1E5;
+        --md-sys-color-on-surface-variant: #CAC4D0;
+        --md-sys-color-outline: #938F99;
+        --md-sys-color-outline-variant: #49454F;
+        --md-sys-color-background: #121212;
+        --md-sys-color-error: #F2B8B5;
+        --md-sys-color-success: #81C784;
+        --md-sys-color-preview-bg: #2D2D2D;
+        --md-sys-color-preview-pattern: #3D3D3D;
+
+        --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.24);
+        --md-sys-elevation-2: 0 2px 4px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.3);
+        --md-sys-elevation-3: 0 4px 8px rgba(0,0,0,0.3), 0 8px 16px rgba(0,0,0,0.3);
+    }
+}
+
 /* Reset */
 *, *::before, *::after {
     box-sizing: border-box;
@@ -57,13 +86,14 @@ body {
 
 /* App Bar */
 .app-bar {
-    background-color: var(--md-sys-color-primary);
-    color: var(--md-sys-color-on-primary);
+    background-color: var(--md-sys-color-surface);
+    color: var(--md-sys-color-on-surface);
     padding: 16px 24px;
     box-shadow: var(--md-sys-elevation-2);
     position: sticky;
     top: 0;
     z-index: 100;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
 }
 
 .app-bar-content {
@@ -81,6 +111,7 @@ body {
 
 .app-bar .material-icons {
     font-size: 28px;
+    color: var(--md-sys-color-primary);
 }
 
 /* Main Content */
@@ -110,7 +141,7 @@ body {
     gap: 12px;
     padding: 20px 24px;
     border-bottom: 1px solid var(--md-sys-color-outline-variant);
-    background-color: #fff;
+    background-color: var(--md-sys-color-surface-container);
 }
 
 .card-header h2 {
@@ -149,7 +180,7 @@ body {
     padding: 14px 16px;
     border: 1px solid var(--md-sys-color-outline-variant);
     border-radius: var(--md-sys-shape-corner-medium);
-    background-color: #fff;
+    background-color: var(--md-sys-color-surface-container);
     color: var(--md-sys-color-on-surface);
     transition: border-color 0.2s, box-shadow 0.2s;
     width: 100%;
@@ -248,19 +279,19 @@ body {
     padding: 24px;
     display: flex;
     justify-content: center;
-    background-color: #E8E8E8;
+    background-color: var(--md-sys-color-preview-bg);
     background-image:
-        linear-gradient(45deg, #D0D0D0 25%, transparent 25%),
-        linear-gradient(-45deg, #D0D0D0 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, #D0D0D0 75%),
-        linear-gradient(-45deg, transparent 75%, #D0D0D0 75%);
+        linear-gradient(45deg, var(--md-sys-color-preview-pattern) 25%, transparent 25%),
+        linear-gradient(-45deg, var(--md-sys-color-preview-pattern) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--md-sys-color-preview-pattern) 75%),
+        linear-gradient(-45deg, transparent 75%, var(--md-sys-color-preview-pattern) 75%);
     background-size: 20px 20px;
     background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
 }
 
 /* Sticker Preview */
 .sticker-preview {
-    background-color: #fff;
+    background-color: var(--md-sys-color-surface-container);
     padding: 8px;
     box-shadow: var(--md-sys-elevation-2);
 }
@@ -271,6 +302,7 @@ body {
     font-family: Arial, sans-serif;
     font-size: 11px;
     background: #fff;
+    color: #000;
 }
 
 .sticker-header {
@@ -343,8 +375,8 @@ body {
 .snackbar {
     visibility: hidden;
     min-width: 280px;
-    background-color: #323232;
-    color: #fff;
+    background-color: var(--md-sys-color-surface-variant);
+    color: var(--md-sys-color-on-surface);
     text-align: center;
     border-radius: var(--md-sys-shape-corner-medium);
     padding: 16px 24px;
@@ -357,6 +389,13 @@ body {
     box-shadow: var(--md-sys-elevation-3);
 }
 
+@media (prefers-color-scheme: light) {
+    .snackbar {
+        background-color: #323232;
+        color: #fff;
+    }
+}
+
 .snackbar.show {
     visibility: visible;
     animation: fadein 0.3s, fadeout 0.3s 2.7s;
@@ -364,10 +403,12 @@ body {
 
 .snackbar.success {
     background-color: var(--md-sys-color-success);
+    color: #fff;
 }
 
 .snackbar.error {
     background-color: var(--md-sys-color-error);
+    color: #fff;
 }
 
 @keyframes fadein {