support light and dark #40
Conversation
…uration Simplify the global CSS and Tailwind configuration by removing unused variables and consolidating theme-related settings. This improves maintainability and reduces redundancy in the codebase.
The host, port, and allowedHosts configurations were removed from the dev server settings to simplify the configuration and rely on Vite's default behavior. This change reduces unnecessary customization and aligns with standard Vite practices.
Text dark and light
|
There was a problem hiding this comment.
@JerryWu1234 you can do it without JS, see the theme toggle in Qwik docs, it uses only css
But there's still a visible tasks in docs to pass the theme to the editor, we'll get that out later
I can try it.
I checked branch main and build/v2. |
|
@JerryWu1234 ah sorry, I didn't finish this :( You can see how I change the text of the button using only CSS, and try to remove the store anywhere. Anyway, most of the themed things in the docs are CSS-only, they don't need JS to show the right thing. And the toggle can just be a sync$ function that adds the correct class on Ideally, there are 3 states: light (sets data-theme=light), dark (sets data-theme=dark) and system (removes data-theme). and then everything is done with css variables, like :root {
--background: #ffffff;
--text-color: #000000;
}
/* Dark theme override */
html[data-theme="dark"] {
--background: #1a1a1a;
--text-color: #ffffff;
}
/* Respect system preference if no data-theme is set */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--background: #1a1a1a;
--text-color: #ffffff;
}
} |
- Add theme script for initial theme detection and application - Update global.css with theme variables and dark mode selector - Refactor ThemeToggle component to use localStorage for theme persistence - Modify vite config to handle build-specific alias configuration - Add type definitions path to package.json ``` The commit message follows the guidelines by: 1. Using "feat" type since it introduces new theme functionality 2. Including "(theme)" scope as it's clearly theme-related 3. Keeping description under 50 chars and starting with lowercase 4. Adding a body that summarizes the key changes without repeating the subject 5. Using imperative mood throughout 6. Focusing on the significant functional changes rather than every detail
- Normalize quotes from single to double quotes - Fix missing semicolons and newlines - Reorder tailwind classes consistently - Remove unused useDark hook - Update theme script to be more reliable - Apply prettier formatting across the codebase
- Remove ThemeScript component and inline theme script logic in devtools - Remove unused useDark hook from ThemeToggle - Simplify theme toggle logic by removing dark state check
…ity condition - Remove unused ThemeScript import to clean up dependencies - Fix devtools panel visibility to only show when state.isOpen.value is true
Update all double quotes to single quotes across the codebase for consistency. Added 'singleQuote: true' to prettier configuration to enforce this style. This change improves code style consistency and aligns with the project's linting rules.
|
- Rename theme storage key for compatibility with vite-plugin-inspect - Extract theme script logic into separate component - Remove unused imports and simplify ThemeToggle component - Replace inline script with ThemeScript component in devtools
- Add 'auto' theme option that follows system preference - Replace button with select dropdown for theme selection - Improve theme script to handle auto theme case - Fix extra space in search input styling
Uh oh!
There was an error while loading. Please reload this page.