docs: light mode dark mode #8050
Conversation
- Added dark mode support in global CSS with new color variables. - Refactored ThemeScript component to improve theme preference handling. - Updated theme toggle components to accept class props for better styling. - Simplified theme toggle logic in ThemeToggle component. - Removed deprecated ThemeScript import from root component. - Cleaned up unused CSS styles related to theme toggle.
|
built with Refined Cloudflare Pages Action⚡ Cloudflare Pages Deployment
|
- Added CSS rules for dark mode image filtering and temporary workarounds. - Updated theme toggle components to remove unused imports and streamline code. - Introduced light mode styles for ecosystem elements based on user preferences.
- Added dark mode styles for various components including code sandbox and API documentation. - Removed sun-and-moon theme toggle components and associated CSS to streamline the codebase. - Updated theme icon styles for better responsiveness and consistency.
There was a problem hiding this comment.
Thanks for your help @JerryWu1234
with this change the top right icons are not visible anymore. 🤔
https://qwik.dev/ |
done |
| background-color: #161616; | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: dark) { |
There was a problem hiding this comment.
I think all these dark mode changes should only look at data-theme.
| stroke-linecap: round; | ||
| html[data-theme='light'] .themeIcon.light, | ||
| html[data-theme='dark'] .themeIcon.dark, | ||
| html:not([data-theme]) .themeIcon.auto { |
There was a problem hiding this comment.
Data-theme should always hold the current theme even if it's auto. That way the css is much simpler.
So for auto mode we need a different prop. Maybe data-theme-name? Then all three icons can check that. And data-theme basically only ever contains "dark" (unless we add more themes).
| export type ThemePreference = 'dark' | 'light' | 'auto'; | ||
| export const setPreference = (theme: ThemePreference) => { | ||
| if (theme === 'auto') { | ||
| document.firstElementChild?.removeAttribute('data-theme'); |
There was a problem hiding this comment.
Here it should pick the media query answer
packages/docs/src/routes/api/api.css
Outdated
| [data-theme="dark"] .docs.api table { | ||
| box-shadow: 0 0 30px 0 rgba(80,80,80,0.1); | ||
| } | ||
|
|
There was a problem hiding this comment.
How did this extra space get here?
We should make sure prettier also formats these files
- Removed dark mode CSS rules from global styles and various components to simplify the codebase. - Updated theme toggle logic to improve responsiveness and ensure consistent theme application based on user preferences. - Enhanced theme script to handle theme attributes more robustly.
- Changed the fill attribute in Discord, GitHub, and Twitter logo SVGs from a specific color to 'currentColor' for better adaptability in different themes. - Cleaned up unnecessary CSS rules in the API styles to enhance maintainability.
- Moved the ThemeScript import to the theme-toggle component for better structure. - Removed the obsolete theme-script file to clean up the codebase. - Updated the colorSchemeChangeListener import to reflect the new file structure.
3 participants
What is it?
Description
Feature: Add System-Sync ("Auto") Theme to Docs
Checklist
pnpm change