webui: md3 splash icon colors take 2

Author: KOWX712

webui/styles.css

@@ -30,25 +30,15 @@ body {
 }
 
 .splash-icon {
-    --icon-bg: var(--md-sys-color-primary);
-    --icon-fill: var(--md-sys-color-surface-container);
-
     border-radius: 50%;
-    background-color: var(--icon-bg);
+    background-color: var(--md-sys-color-primary-fixed);
     transition: opacity 0.05s ease;
     opacity: 0;
 
     svg {
         width: min(45vw, 240px);
         height: auto;
-        fill: var(--icon-fill);
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    .splash-icon {
-        --icon-bg: var(--md-sys-color-primary);
-        --icon-fill: var(--md-sys-color-surface-container);
+        fill: var(--md-sys-color-on-primary-fixed);
     }
 }
 

webui/theme.css

@@ -43,6 +43,10 @@
     --md-sys-color-surface-container-low: var(--surfaceContainerLow, #F7F2FA);
     --md-sys-color-surface-container-high: var(--surfaceContainerHigh, #ECE6F0);
     --md-sys-color-surface-container-highest: var(--surfaceContainerHighest, #E6E0E9);
+
+    /* Extra */
+    --md-sys-color-primary-fixed: var(--md-sys-color-primary-container);
+    --md-sys-color-on-primary-fixed: var(--md-sys-color-on-primary-container);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -83,5 +87,9 @@
         --md-sys-color-surface-container-low: var(--surfaceContainerLow, #1D1B20);
         --md-sys-color-surface-container-high: var(--surfaceContainerHigh, #2B2930);
         --md-sys-color-surface-container-highest: var(--surfaceContainerHighest, #36343B);
+
+        /* Extra */
+        --md-sys-color-primary-fixed: var(--md-sys-color-on-primary-container);
+        --md-sys-color-on-primary-fixed: var(--md-sys-color-on-primary);
     }
 }