feat: Add dark mode support #110
Conversation
| @@ -26,7 +26,6 @@ export default { | |||
| input, | |||
| plugins: [ | |||
| litcss({ | |||
| include: '/**/*.css', | |||
There was a problem hiding this comment.
It matches css files by default, using regex. It seems that regex works cross-platform and glob is POSIX only.
src/jio-locale.ts
Outdated
| @@ -21,7 +21,7 @@ export const setLocaleFromUrl = async () => { | |||
| const locale = url.searchParams.get('locale') || (new Intl.NumberFormat()).resolvedOptions().locale || sourceLocale; | |||
| await setLocale(locale); | |||
| }; | |||
| setLocaleFromUrl().catch(e => console.error(`Error loading locale: ${(e as Error).message}`)); | |||
| setLocaleFromUrl().catch(e => console.log(`Error loading locale: ${(e as Error).message}`)); | |||
There was a problem hiding this comment.
Unrelated to dark mode, but not showing this as error on each page load helps with debuging.
There was a problem hiding this comment.
Can you make this a seperate fix pr?
|
@halkeye could you please check/merge this? |
|
when you change the control it doesn't seem to change anything. Is that expected? Can you setup a story to demo it? |
It should change the header background from pitch-black (dark mode) to dark gray (light mode); auto mode is identical to one of these, depending on your system theme. If you're using some auto-dark-mode browser feature, the difference may not be visible at all. |
|
Okay I see it now, the colors on my laptop are not that vivid, with the white background it wasn't hugely noticable shift. Btw, I think https://storybook.js.org/addons/storybook-dark-mode is installed if you want to hook it up to that instead of a custom property, though I think the property override is a good plan. |
|
🎉 This PR is included in version 1.27.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Adds theme attribute that can be either light (default), dark or auto. That should allow adding dark mode to plugin site before we add it to the others and allow adding a color theme toggle to the page in the future.