-
Notifications
You must be signed in to change notification settings - Fork 154
Theming of the UI #376
Comments
I want to start working on this |
Sure, please give it a shot. But if you're having a version to review, please open a draft pull request and I'll have a look. Semantic colors PR is merged. So there shouldn't be a blocker for this and semantic color names can be used for the themed UI. If you're having any questions, please let me know. |
I have only one question before I start Are we gonna have our theme or are we gonna let the users set their colors ? |
Yes, the light theme is the existing one. I would do a fixed color theme, so the user can pick a theme with predefined colors. I think there are no specific colors for the dark theme. Maybe @joshwcomeau has an idea for prefered colors. The mockup sounds great. |
I think it would be nice to have theming support so the user can change between different themes.
I would start with a light (default) & dark theme - later we can have more themes but two themes is a good starting point.
Light theme will be the current UI styling and dark will be a variant of it.
Proposed theme data structure
src/themes/default.js
:Describe the solution you'd like
src\themes
e.g. default (light) & darkThemeProvider
inApp
componentselectedTheme
toapp-settings.reducer
& addselectTheme
actionAdditional context
At the moment, we're updating color constants (using semantic color name) so we have to wait for the PR #326 before we can start this.
Here is a Codesandbox with a basic theming example.
Discussion
button, sidebar, ...
. Global themed styles can be added to top-level directly. e.g. background color, text color.Notes
RAW_COLORS
in the theme files as we don't need the added complexity that semantic color would introduce. I think once theming is ready every semantic colorCOLORS
will have a theme prop - so we can remove semantic constants.We're keeping semantic constants for now because it will help to do the normalization of the used colors.
The text was updated successfully, but these errors were encountered: