Dark mode functionality - by Claude #1022
Conversation
- Create ThemeModeProvider for managing light/dark/system theme preferences - Implement user preferences storage in user data - Add dark mode styles for UI components in Tailwind and CSS - Create theme toggle control in user settings panel - Support system theme preference detection
- Create custom theme icons since the sun and moon icons aren't available in @wordpress/icons - Add missing getUserPreference and saveUserPreference methods to IPC API interface
This commit improves dark mode styling throughout the app, with a focus on: 1. Fixed modal styling for Add Site modal by adding body.dark selectors 2. Enhanced form controls with proper dark mode colors for text inputs, borders, and placeholder text 3. Improved site form elements in dark mode including folder icons, help text, and borders 4. Added dark mode support for button variants to ensure proper styling in all contexts 5. Fixed text colors and contrast ratios for better readability in dark mode 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Not sure I like the background color too much but I guess it works for people that like Dark mode. cc @matt-west for design input. |
| @@ -0,0 +1,25 @@ | |||
| # WordPress Studio Development Guide | |||
There was a problem hiding this comment.
We should probably remove that file, I'm not sure we should be adding the config files/intructions for all the AIs at the moment.
|
|
||
| export const ThemeModeProvider = ({ children }: { children: ReactNode }) => { | ||
| const [themeMode, setThemeModeState] = useState<ThemeMode>('system'); | ||
| const [isDarkMode, setIsDarkMode] = useState(false); |
There was a problem hiding this comment.
It might worth consolidating theme state with language state at some point instead of local state that is spread between multiple Providers/hooks.
Ideally all the preferences are handled in the same low level abstraction/way.
It's fine to be a follow-up I would say but let's not let this kind of thing slip.
| props.className | ||
| ) } | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default TextControlComponent; | ||
| export default TextControlComponent; |
| </I18nDataProvider> | ||
| </ReduxProvider> | ||
| </ErrorBoundary> | ||
| ); | ||
| }; | ||
| export default Root; | ||
| export default Root; |
| .dark .assistant-markdown hr { | ||
| border-top: 1px solid theme( 'colors.gray.700' ); | ||
| } | ||
|
|
There was a problem hiding this comment.
Feels like there's a lot of CSS overrides for dark mode, I wonder if there's a way to avoid all of that by using CSS variables.
| @@ -1159,3 +1159,18 @@ export async function isFullscreen( _event: IpcMainInvokeEvent ): Promise< boole | |||
| const window = await getMainWindow(); | |||
| return window.isFullScreen(); | |||
| } | |||
|
|
|||
| export async function getUserPreference( _event: IpcMainInvokeEvent, key: string ): Promise< unknown > { | |||
There was a problem hiding this comment.
I'm not sure we need these two functions or the nested "preferences" key. For the "locale", there's no nested "preferences" key, so I think we should just map what we're doing for the user's "locale".
|
I noticed that some modals apply dark mode (add site) but others don't (edit site, user preferences, connect site) |
The AI chat inputs are not great. |
|
Preview sites table 
|
Playful attempt at adding #743
Summary
options
Details
This PR implements a comprehensive dark mode solution for the WordPress Studio application:
New Features
UI Enhancements
Technical Implementation
Accessibility
Technical Details
The implementation uses Tailwind's dark mode with the 'class' strategy, applying a 'dark'
class to the root element when dark mode is active. For elements that may be appended to the
document body (like modals), we've implemented both .dark and body.dark selectors to ensure
consistent styling.
Theme preference is stored in the app's user preferences system via IPC calls to ensure
persistence across sessions.
Testing
Screenshots