feat: Switch from Highlight to AccentColor with fallback as base …

…color Signed-off-by: Felicitas Pojtinger <felicitas@pojtinger.com>
pojntfx · Feb 7, 2025 · 4bb4fff · 4bb4fff
1 parent 9f2bba4
commit 4bb4fff
Showing 1 changed file with 61 additions and 2 deletions.
diff --git a/pkg/frontend/src/main.scss b/pkg/frontend/src/main.scss
@@ -11,8 +11,30 @@ $pf-v6-global--image-path: "data-url:../node_modules/@patternfly/patternfly/asse
 @import "../node_modules/@patternfly/patternfly/patternfly-addons.scss";
 
 :root {
-  --pf-x-base-color: Highlight;
+  --pf-x-base-color: #0066cc;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --pf-x-base-color: #92c5f9;
+  }
+}
+
+@supports (color: AccentColor) {
+  :root {
+    --pf-x-base-color: color-mix(in srgb, AccentColor 60%, black);
+  }
+}
 
+@media (prefers-color-scheme: dark) {
+  @supports (color: AccentColor) {
+    :root {
+      --pf-x-base-color: oklch(from AccentColor max(0.85, l) c h);
+    }
+  }
+}
+
+:root {
   --pf-t--global--color--brand--100: color-mix(
     in srgb,
     var(--pf-x-base-color) 80%,
@@ -24,6 +46,25 @@ $pf-v6-global--image-path: "data-url:../node_modules/@patternfly/patternfly/asse
     var(--pf-x-base-color) 80%,
     black
   );
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --pf-t--global--color--brand--100: color-mix(
+      in srgb,
+      var(--pf-x-base-color) 80%,
+      black
+    );
+    --pf-t--global--color--brand--200: var(--pf-x-base-color);
+    --pf-t--global--color--brand--300: color-mix(
+      in srgb,
+      var(--pf-x-base-color) 80%,
+      white
+    );
+  }
+}
+
+:root {
   --pf-t--global--color--severity--none--100: var(
     --pf-t--global--color--brand--100
   );
@@ -36,7 +77,6 @@ $pf-v6-global--image-path: "data-url:../node_modules/@patternfly/patternfly/asse
   --pf-t--global--text--color--link--300: var(
     --pf-t--global--color--brand--300
   );
-
   --pf-t--global--dark--color--brand--100: color-mix(
     in srgb,
     var(--pf-x-base-color) 80%,
@@ -48,6 +88,25 @@ $pf-v6-global--image-path: "data-url:../node_modules/@patternfly/patternfly/asse
     var(--pf-x-base-color) 80%,
     black
   );
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --pf-t--global--dark--color--brand--100: color-mix(
+      in srgb,
+      var(--pf-x-base-color) 80%,
+      black
+    );
+    --pf-t--global--dark--color--brand--200: var(--pf-x-base-color);
+    --pf-t--global--dark--color--brand--300: color-mix(
+      in srgb,
+      var(--pf-x-base-color) 80%,
+      white
+    );
+  }
+}
+
+:root {
   --pf-t--global--dark--color--severity--none--100: var(
     --pf-t--global--dark--color--brand--100
   );