feat: add system mode to the theme selector #7853
Merged
+301
−56
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
# Conflicts: # excalidraw-app/App.tsx
dwelle
approved these changes
Apr 8, 2024
There was a problem hiding this comment.
Awesome, thanks @arnostpleskot! 🚀
I've made a few tweaks, notably:
- for now, defaulting to
lighttheme on init for new users - move app theme logic into its own hook to clean up, and also remove the reducer in favor of separate state and effects. IMO it simplifies the state mgmt (YMMV), but also removes side effects from the reducer function. Also makes it more obvious what value the host various handlers are setting and why (there's now less hidden assumptions).
dwelle
added a commit
that referenced
this pull request
Apr 8, 2024
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds the system option to the theme selector:
ToggleThemeaccepts new props:props: | { allowSystemTheme: true; theme: "light" | "dark" | "system"; onSelect: (theme: "light" | "dark" | "system") => void; } | { allowSystemTheme?: false; onSelect?: (theme: "light" | "dark") => void; },This should ensure that it works as it did until now, but it also allows the
onSelecthandler to be specified, which will reflect the change to the host app. Also, it adds anallowSystemThemeprop, which will change the button to a button set (similar to one used for selecting scale in the export dialog. In this case, passing the current host appthemeprop is also necessary as the editor itself is unaware of thesystemtheme.The Excalidraw app now has a new reducer and useEffect to handle theme changes and a listener for changing the system theme.
The Excalidraw app is now grabbing keyboard shortcut for theme change and sends the change down to the editor.
Script in the HTML of the Excalidraw app now also reflects the system theme when selected and stored in localStorage