chore(theme): change color scheme

app/themes/laszlo/assets/css/00-setting/color.css

@@ -1,112 +1,105 @@
-/**
- * - Source color: #EFCD58
- * - Tertiary: #2E7D32 (adjusted manually)
- * - [x] Color match
- * - [x] Harmonize extended colors
- * - [x] Check contrast
- */
 @layer setting {
   :root {
-    --color-primary: rgb(114 92 0);
-    --color-surface-tint: rgb(114 92 0);
+    --color-primary: rgb(25 95 210);
+    --color-surface-tint: rgb(25 95 210);
     --color-on-primary: rgb(255 255 255);
-    --color-primary-container: rgb(239 205 88);
-    --color-on-primary-container: rgb(107 86 0);
-    --color-secondary: rgb(107 93 49);
+    --color-primary-container: rgb(220 235 255);
+    --color-on-primary-container: rgb(0 25 65);
+    --color-secondary: rgb(80 93 110);
     --color-on-secondary: rgb(255 255 255);
-    --color-secondary-container: rgb(242 223 167);
-    --color-on-secondary-container: rgb(112 98 53);
-    --color-tertiary: rgb(13 99 27);
-    --color-on-tertiary: rgb(255 255 255);
-    --color-tertiary-container: rgb(46 125 50);
-    --color-on-tertiary-container: rgb(203 255 194);
-    --color-error: rgb(186 26 26);
+    --color-secondary-container: rgb(229 233 239);
+    --color-on-secondary-container: rgb(40 47 58);
+    --color-tertiary: rgb(244 214 138);
+    --color-on-tertiary: rgb(60 50 0);
+    --color-tertiary-container: rgb(255 238 204);
+    --color-on-tertiary-container: rgb(60 50 0);
+    --color-error: rgb(220 38 38);
     --color-on-error: rgb(255 255 255);
-    --color-error-container: rgb(255 218 214);
-    --color-on-error-container: rgb(147 0 10);
-    --color-background: rgb(255 248 240);
-    --color-on-background: rgb(30 27 19);
-    --color-surface: rgb(255 248 240);
-    --color-on-surface: rgb(30 27 19);
-    --color-surface-variant: rgb(236 226 203);
-    --color-on-surface-variant: rgb(76 70 54);
-    --color-outline: rgb(126 119 100);
-    --color-outline-variant: rgb(207 198 176);
+    --color-error-container: rgb(254 226 226);
+    --color-on-error-container: rgb(127 29 29);
+    --color-background: rgb(250 251 252);
+    --color-on-background: rgb(26 28 30);
+    --color-surface: rgb(250 251 252);
+    --color-on-surface: rgb(26 28 30);
+    --color-surface-variant: rgb(229 231 235);
+    --color-on-surface-variant: rgb(57 62 71);
+    --color-outline: rgb(156 163 175);
+    --color-outline-variant: rgb(209 213 219);
     --color-shadow: rgb(0 0 0);
     --color-scrim: rgb(0 0 0);
-    --color-inverse-surface: rgb(52 48 39);
-    --color-inverse-on-surface: rgb(248 240 227);
-    --color-inverse-primary: rgb(229 196 80);
-    --color-primary-fixed: rgb(255 224 126);
-    --color-on-primary-fixed: rgb(35 27 0);
-    --color-primary-fixed-dim: rgb(229 196 80);
-    --color-on-primary-fixed-variant: rgb(86 69 0);
-    --color-secondary-fixed: rgb(245 225 169);
-    --color-on-secondary-fixed: rgb(35 27 0);
-    --color-secondary-fixed-dim: rgb(216 197 143);
-    --color-on-secondary-fixed-variant: rgb(82 70 28);
-    --color-tertiary-fixed: rgb(163 246 156);
-    --color-on-tertiary-fixed: rgb(0 34 4);
-    --color-tertiary-fixed-dim: rgb(136 217 130);
-    --color-on-tertiary-fixed-variant: rgb(0 83 18);
-    --color-surface-dim: rgb(224 217 204);
-    --color-surface-bright: rgb(255 248 240);
+    --color-inverse-surface: rgb(45 48 51);
+    --color-inverse-on-surface: rgb(241 243 245);
+    --color-inverse-primary: rgb(120 170 255);
+    --color-primary-fixed: rgb(220 235 255);
+    --color-on-primary-fixed: rgb(0 25 65);
+    --color-primary-fixed-dim: rgb(120 170 255);
+    --color-on-primary-fixed-variant: rgb(0 60 130);
+    --color-secondary-fixed: rgb(229 233 239);
+    --color-on-secondary-fixed: rgb(20 25 30);
+    --color-secondary-fixed-dim: rgb(195 203 215);
+    --color-on-secondary-fixed-variant: rgb(60 73 88);
+    --color-tertiary-fixed: rgb(255 238 204);
+    --color-on-tertiary-fixed: rgb(60 50 0);
+    --color-tertiary-fixed-dim: rgb(244 214 138);
+    --color-on-tertiary-fixed-variant: rgb(100 85 20);
+    --color-surface-dim: rgb(218 220 224);
+    --color-surface-bright: rgb(250 251 252);
     --color-surface-container-lowest: rgb(255 255 255);
-    --color-surface-container-low: rgb(250 243 229);
-    --color-surface-container: rgb(245 237 224);
-    --color-surface-container-high: rgb(239 231 218);
-    --color-surface-container-highest: rgb(233 226 213);
+    --color-surface-container-low: rgb(248 249 250);
+    --color-surface-container: rgb(245 246 247);
+    --color-surface-container-high: rgb(241 243 245);
+    --color-surface-container-highest: rgb(237 239 241);
   }
 
   [data-theme="dark"] {
-    --color-primary: rgb(255 235 176);
-    --color-surface-tint: rgb(229 196 80);
-    --color-on-primary: rgb(59 47 0);
-    --color-primary-container: rgb(239 205 88);
-    --color-on-primary-container: rgb(107 86 0);
-    --color-secondary: rgb(216 197 143);
-    --color-on-secondary: rgb(58 47 7);
-    --color-secondary-container: rgb(85 72 30);
-    --color-on-secondary-container: rgb(201 183 130);
-    --color-tertiary: rgb(136 217 130);
-    --color-on-tertiary: rgb(0 57 9);
-    --color-tertiary-container: rgb(46 125 50);
-    --color-on-tertiary-container: rgb(203 255 194);
-    --color-error: rgb(255 180 171);
-    --color-on-error: rgb(105 0 5);
-    --color-error-container: rgb(147 0 10);
-    --color-on-error-container: rgb(255 218 214);
-    --color-background: rgb(22 19 12);
-    --color-on-background: rgb(233 226 213);
-    --color-surface: rgb(22 19 12);
-    --color-on-surface: rgb(233 226 213);
-    --color-surface-variant: rgb(76 70 54);
-    --color-on-surface-variant: rgb(207 198 176);
-    --color-outline: rgb(152 144 124);
-    --color-outline-variant: rgb(76 70 54);
+    --color-primary: rgb(168 200 255);
+    --color-surface-tint: rgb(120 170 255);
+    --color-on-primary: rgb(0 25 65);
+    --color-primary-container: rgb(0 60 130);
+    --color-on-primary-container: rgb(220 235 255);
+    --color-secondary: rgb(195 203 215);
+    --color-on-secondary: rgb(40 47 58);
+    --color-secondary-container: rgb(60 73 88);
+    --color-on-secondary-container: rgb(229 233 239);
+    --color-tertiary: rgb(244 214 138);
+    --color-on-tertiary: rgb(60 50 0);
+    --color-tertiary-container: rgb(100 85 20);
+    --color-on-tertiary-container: rgb(255 238 204);
+    --color-error: rgb(248 113 113);
+    --color-on-error: rgb(127 29 29);
+    --color-error-container: rgb(153 27 27);
+    --color-on-error-container: rgb(254 226 226);
+    --color-background: rgb(26 28 30);
+    --color-on-background: rgb(226 228 231);
+    --color-surface: rgb(26 28 30);
+    --color-on-surface: rgb(226 228 231);
+    --color-surface-variant: rgb(68 71 76);
+    --color-on-surface-variant: rgb(195 199 206);
+    --color-outline: rgb(140 144 152);
+    --color-outline-variant: rgb(68 71 76);
     --color-shadow: rgb(0 0 0);
     --color-scrim: rgb(0 0 0);
-    --color-inverse-surface: rgb(233 226 213);
-    --color-inverse-on-surface: rgb(52 48 39);
-    --color-inverse-primary: rgb(114 92 0);
-    --color-primary-fixed: rgb(255 224 126);
-    --color-on-primary-fixed: rgb(35 27 0);
-    --color-primary-fixed-dim: rgb(229 196 80);
-    --color-on-primary-fixed-variant: rgb(86 69 0);
-    --color-secondary-fixed: rgb(245 225 169);
-    --color-on-secondary-fixed: rgb(35 27 0);
-    --color-secondary-fixed-dim: rgb(216 197 143);
-    --color-on-secondary-fixed-variant: rgb(82 70 28);
-    --color-tertiary-fixed: rgb(163 246 156);
-    --color-on-tertiary-fixed: rgb(0 34 4);
-    --color-tertiary-fixed-dim: rgb(136 217 130);
-    --color-on-tertiary-fixed-variant: rgb(0 83 18);
-    --color-surface-dim: rgb(22 19 12);
-    --color-surface-bright: rgb(61 57 48);
-    --color-surface-container-lowest: rgb(16 14 7);
-    --color-surface-container-low: rgb(30 27 19);
-    --color-surface-container: rgb(34 31 23);
-    --color-surface-container-high: rgb(45 42 33);
-    --color-surface-container-highest: rgb(56 52 44);
+    --color-inverse-surface: rgb(226 228 231);
+    --color-inverse-on-surface: rgb(45 48 51);
+    --color-inverse-primary: rgb(25 95 210);
+    --color-primary-fixed: rgb(220 235 255);
+    --color-on-primary-fixed: rgb(0 25 65);
+    --color-primary-fixed-dim: rgb(120 170 255);
+    --color-on-primary-fixed-variant: rgb(0 60 130);
+    --color-secondary-fixed: rgb(229 233 239);
+    --color-on-secondary-fixed: rgb(20 25 30);
+    --color-secondary-fixed-dim: rgb(195 203 215);
+    --color-on-secondary-fixed-variant: rgb(60 73 88);
+    --color-tertiary-fixed: rgb(255 238 204);
+    --color-on-tertiary-fixed: rgb(60 50 0);
+    --color-tertiary-fixed-dim: rgb(244 214 138);
+    --color-on-tertiary-fixed-variant: rgb(100 85 20);
+    --color-surface-dim: rgb(26 28 30);
+    --color-surface-bright: rgb(60 63 67);
+    --color-surface-container-lowest: rgb(18 20 22);
+    --color-surface-container-low: rgb(32 34 37);
+    --color-surface-container: rgb(36 39 42);
+    --color-surface-container-high: rgb(46 49 53);
+    --color-surface-container-highest: rgb(56 59 64);
   }
 }

app/themes/laszlo/assets/css/02-element/a.css

@@ -1,9 +1,9 @@
 @layer element {
   a {
-    --_link-color: var(--link-color, var(--color-tertiary));
-    --_link-color-hover: var(--link-color-hover, var(--color-tertiary));
-    --_link-visited: var(--link-visited, var(--color-tertiary));
-    --_link-color-active: var(--link-color-active, var(--color-tertiary));
+    --_link-color: var(--link-color, var(--color-primary));
+    --_link-color-hover: var(--link-color-hover, var(--color-primary));
+    --_link-visited: var(--link-visited, var(--color-primary));
+    --_link-color-active: var(--link-color-active, var(--color-primary));
     --_link-color-broken: var(--link-color-broken, var(--color-error));
     --_link-text-decoration-thickness: var(
       --link-text-decoration-thickness,

app/themes/laszlo/assets/css/02-element/body.css

@@ -1,13 +1,7 @@
 @layer element {
   :root {
-    --page-background-color: var(--color-surface-container);
-    --page-background-image:
-      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.1'/></svg%3E"),
-      radial-gradient(
-        at 50%,
-        var(--color-surface-bright) 20%,
-        var(--color-surface-dim) 120%
-      );
+    --page-background-color: var(--color-background);
+    --page-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/></svg%3E");
   }
 
   body {

app/themes/laszlo/assets/css/02-element/code.css

@@ -1,25 +1,31 @@
 @layer element {
   code {
+    --inline-color: #d73a49;
+
     color: var(--color-on-surface);
-    border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-1);
-    background: var(--color-surface-container-low);
+    background: var(--color-surface-container-high);
     box-decoration-break: clone;
     font: var(--typography-code);
   }
 
+  [data-theme="dark"] {
+    --inline-color: #ff7b72;
+  }
+
   pre > code {
     display: block;
     overflow-x: auto;
     padding: var(--spacing-5);
     border-radius: var(--spacing-2);
-    background: var(--color-surface-container-lowest);
+    background: var(--color-surface-container-high);
   }
 
   :not(pre) > code {
     padding: var(--spacing-1);
     vertical-align: middle;
     word-break: break-word;
+    color: var(--inline-color);
     font-size: 0.8em;
   }
 }

app/themes/laszlo/assets/css/03-component/form/comment-comment-node-blog-entry-form.css

@@ -3,9 +3,9 @@
     display: flex;
     flex-direction: column;
     padding: var(--spacing-6);
-    border: 1px solid var(--color-surface-dim);
+    border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-4);
-    background: var(--color-surface-container-low);
+    background: var(--color-surface-container-lowest);
     gap: var(--spacing-6);
   }
 

app/themes/laszlo/components/content/article-card/article-card.css

@@ -13,7 +13,7 @@
     border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-4);
     outline: var(--default-focus-outline-width) solid transparent;
-    background: var(--color-surface);
+    background: var(--color-surface-container-lowest);
     gap: var(--spacing-6);
     box-shadow: color-mix(in sRGB, var(--color-shadow), transparent 90%) 0 2px
       8px 0;

app/themes/laszlo/components/content/article/article.css

@@ -1,14 +1,8 @@
 @layer component.content {
   .article {
     --_article-spacing: var(--spacing-8);
-    --_article-header-background: var(
-      --article-header-background,
-      var(--color-surface, transparent)
-    );
-    --_article-main-background: var(
-      --article-main-background,
-      var(--color-surface, transparent)
-    );
+    --_article-header-background: var(--color-surface-container-lowest);
+    --_article-main-background: var(--color-surface-container-lowest);
     --article-border: 1px solid var(--color-outline-variant);
     --article-border-radius: var(--spacing-4);
     --article-box-shadow:

app/themes/laszlo/components/content/comment/comment.css

@@ -6,9 +6,9 @@
     flex-direction: column;
     padding: var(--spacing-6);
     color: var(--color-on-surface);
-    border: 1px solid var(--color-surface-dim);
+    border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-2);
-    background: var(--color-surface-container-low);
+    background: var(--color-surface-container-lowest);
     gap: var(--_comment-gap);
   }
 
@@ -59,6 +59,6 @@
   .comment pre {
     padding: var(--spacing-4);
     border-radius: var(--spacing-2);
-    background: var(--color-surface-container-lowest);
+    background: var(--color-surface-container-low);
   }
 }

app/themes/laszlo/components/content/tag-card/tag-card.css

@@ -8,7 +8,7 @@
     color: var(--color-on-surface);
     border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-2);
-    background: var(--color-surface);
+    background: var(--color-surface-container-lowest);
     gap: var(--spacing-2);
 
     &:focus-within,

app/themes/laszlo/components/layout/author-page/author-page.css

@@ -18,7 +18,7 @@
     padding: var(--page-side-gap);
     border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-4);
-    background-color: var(--color-surface);
+    background-color: var(--color-surface-container-lowest);
     box-shadow:
       color-mix(in sRGB, var(--color-shadow), transparent 95%) 0 4px 16px,
       color-mix(in sRGB, var(--color-shadow), transparent 99%) 0 8px 32px;

app/themes/laszlo/components/ui/branding/branding.css

@@ -5,17 +5,17 @@
     --logo-fill-1: color-mix(
       in sRGB,
       var(--logo-color-primary),
-      var(--logo-color-secondary) 70%
+      var(--logo-color-secondary) 85%
     );
     --logo-fill-2: color-mix(
       in sRGB,
       var(--logo-color-primary),
-      var(--logo-color-secondary) 80%
+      var(--logo-color-secondary) 92%
     );
     --logo-fill-3: color-mix(
       in sRGB,
       var(--logo-color-primary),
-      var(--logo-color-secondary) 90%
+      var(--logo-color-secondary) 98%
     );
     --logo-fill-4: var(--color-primary);
 
@@ -42,6 +42,7 @@
   .branding__name {
     color: var(--color-primary);
     font: var(--typography-headline-medium);
+    font-weight: 900;
   }
 
   .branding__slogan {

app/themes/laszlo/components/ui/button/button.css

@@ -64,13 +64,13 @@
   }
 
   .button--variant--contained.button--color--primary {
-    --button-background-color: var(--color-primary-container);
+    --button-background-color: var(--color-primary);
     --button-background-color-hover: color-mix(
       in sRGB,
       var(--button-background-color),
-      var(--color-surface-container-lowest) 15%
+      var(--color-surface-container-lowest) 10%
     );
-    --button-color: var(--color-on-primary-container);
+    --button-color: var(--color-on-primary);
     --button-color-hover: var(--button-color);
   }