Conversation
…nd interactive color picker
…system preference detection
… self-hosted styles
…ast in theme system
…ted Material Design 3 color palette
| color-scheme: light dark; | ||
| --light-color: #ffcfb8; | ||
| --dark-color: #113134; | ||
| --md-primary: #ea6a00; |
There was a problem hiding this comment.
material design variables originally set
| sans-serif; | ||
| top: 20px; | ||
| right: 20px; | ||
| background: var(--md-surface-container-high); |
There was a problem hiding this comment.
surface container higher so it's more visible https://m3.material.io/blog/tone-based-surface-color-m3
| </main> | ||
|
|
||
| <script> | ||
| function hexToRgb(hex) { |
There was a problem hiding this comment.
picks a hex but needs to convert to rgb in order to do math on it
| const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b); | ||
|
|
||
| // Generate tonal palette (MD3 approach) | ||
| const lightness = hsl.l; |
There was a problem hiding this comment.
use lightness for md3 conversion https://m3.material.io/styles/color/system/how-the-system-works
| outlinedHover: `hsla(${hsl.h}, ${hsl.s}%, ${lightness + 40}%, 0.08)`, | ||
| // If primary lightness > 60%, uses dark text (same hue at 20% lightness) | ||
| // Otherwise uses white text | ||
| onPrimary: primaryL > 60 ? `hsl(${hsl.h}, ${hsl.s}%, 20%)` : '#ffffff' |
There was a problem hiding this comment.
ensure that color is still visible
| applyTheme(colorPicker.value); | ||
|
|
||
| // Re-apply theme when system color scheme changes | ||
| window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { |
There was a problem hiding this comment.
ensure that theme is still updated
| X-XSS-Protection = "1; mode=block" | ||
| X-Content-Type-Options = "nosniff" | ||
| Content-Security-Policy = "default-src 'self'; style-src 'unsafe-inline';" | ||
| Content-Security-Policy = "default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline';" |
There was a problem hiding this comment.
allow scripts to run inline; may use a different framework so this is easier to do on the page
|
|
||
| function generateColorScheme(baseColor) { | ||
| const rgb = hexToRgb(baseColor); | ||
| const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b); |
There was a problem hiding this comment.
Probably more complicated (but easier if you can include a library), but OKLCH is better for lightness manipulations than HSL: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
2 participants
Goals
Questions
Todo
In progress