Theming of the UI

[AWolf81]

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:

export default {
  app: {
    // global app wide styles - can be used everywhere
    background: RAW_COLORS.gray[900],
    text: RAW_COLORS.black,
    textOnBackground: RAW_COLORS.white
  },
  link: { // maybe we could also name this button
    text: RAW_COLORS.blue[700],
    disabled: RAW_COLORS.gray[700], // I think we don't have this - just an example
    hover: RAW_COLORS.purple[700] // not used yet - also an example
  },
  sidebar: {
    background: `linear-gradient(
              85deg,
              ${RAW_COLORS.blue[900]},
              ${RAW_COLORS.blue[700]}
            )`
  }
  // ... other component specific styles ...
};

Describe the solution you'd like

• [ ] Add a theme selection in preferences menu
• [ ] Add two themes to src\themes e.g. default (light) & dark
• [ ] Use ThemeProvider in App component
• [ ] Add selectedTheme to app-settings.reducer & add selectTheme action
• [ ] Add unit tests for selection & settings.reducer

Additional 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

• Is it OK to use imports and add it to a themes array like in the codesandbox? Or do we need to use dynamic imports for this? I think it's OK to start with importing all and add it to array - could be optimized later.
• How should we structure the theming data? I think it would be good to have a top-level object for each themed component like button, sidebar, .... Global themed styles can be added to top-level directly. e.g. background color, text color.
• Is a JS file for the theme file OK or is it better to use a yaml, toml, ... file? I would start with a js file.

Notes

• Use only 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 color COLORS 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.
• Naming conventions in themes:
  • Color don't need a special prefix
  • For special theme props e.g. themed divider thickness - it's important that it's clear that it is no color:

    {
    divider: {
    color: RAW_COLORS.gray[100],
    line: "1px", // bad, as it's not clear during usage it with this.props.theme.divider.line --> expecting a line color
    thickness: "1px" // good
    }
    }

[osamajandali]

I want to start working on this

[AWolf81]

Sure, please give it a shot. I haven't worked on the project for some time.

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.

[osamajandali]

I have only one question before I start the light theme is the existing one, isn't it ? and is there any specific colors for the dark theme ? I can provide design mockup here before I start implementing so we could decide together which colors shall we go with.

Are we gonna have our theme or are we gonna let the users set their colors ?

[AWolf81]

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.