[Feature 🚀]: Custom Themes

[Alexhuszagh]

Feature

It would be nice to allow users to define a custom theme, similar to the excellent Dracula theme. This would allow me to, for example, slightly toggle the colors without modifying the source to create a Breeze-like theme for KDE.

Solution

I can imagine one of 2 solutions:

• Use JSON to dictate color settings, which is then converted to CSS.
• Allow users to directly modify CSS (more advanced).

JSON

{
  "bg-primary": "#282a36",
  "bg-secondary": "#333648",
  "bg-tertiary": "#20274d",
  "bg-hover": "#3b3e51",
  "bg-hover-secondary": "#474c68",
  "bg-hover-tertiary": "#222d6e",
  "bg-active": "#333855",
  "bg-active-secondary": "#3f456b",
  "bg-active-tertiary": "#2d366c",
  "bg-separator": "#44475a33",
  "bg-border": "#44475a33",
  "bg-scrollbar": "#44475a33",
  "font-color-primary": "#ccc",
  "font-color-secondary": "#f8f8f2",
  "font-color-tertiary": "#fff",
  "font-color-warning": "#ff5555",
  "font-color-brand": "#007262",
  "font-color-disable": "#a19f9d",
  "bg-ms-planner": "#50fa7b",
  "bg-ms-one-note": "#bd93f9",
  "bg-ms-excel": "#50fa7b",
  "bg-ms-word": "#6272a4",
  "bg-ms-power-point": "#ff5555",
  "bg-ms-teams": "#bd93f9",
  "red": "#ff5555",
  "blue": "#288be1",
  "skyblue": "#8be9fd",
  "purple": "#bd93f9",
  "green": "#50fa7b"
}

CSS (Identical to the Dracula Theme)

html.dracula-mode {
  --bg-primary: #282a36 !important;
  --bg-secondary: #333648 !important;
  --bg-tertiary: #20274d !important;
  --bg-hover: #3b3e51 !important;
  --bg-hover-secondary: #474c68 !important;
  --bg-hover-tertiary: #222d6e !important;
  --bg-active: #333855 !important;
  --bg-active-secondary: #3f456b !important;
  --bg-active-tertiary: #2d366c !important;
  --bg-separator: #44475a33 !important;
  --bg-border: #44475a33 !important;
  --bg-scrollbar: #44475a33 !important;
  --font-color-primary: #ccc !important;
  --font-color-secondary: #f8f8f2 !important;
  --font-color-tertiary: #fff !important;
  --font-color-warning: #ff5555 !important;
  --font-color-brand: #007262 !important;
  --font-color-disable: #a19f9d !important;
  --bg-ms-planner: #50fa7b !important;
  --bg-ms-one-note: #bd93f9 !important;
  --bg-ms-excel: #50fa7b !important;
  --bg-ms-word: #6272a4 !important;
  --bg-ms-power-point: #ff5555 !important;
  --bg-ms-teams: #bd93f9 !important;
  --red: #ff5555;
  --blue: #288be1;
  --skyblue: #8be9fd;
  --purple: #bd93f9;
  --green: #50fa7b;
}

Validation

If we're using a JSON file, it's probably a good idea to sanitize the input using the Javascript CSS.supports('color', color) (if supported by the current Electron version, I haven't used Electron). If the color is supported, you can write the property to the CSS file using a template.

This prevents anything weird like:

> CSS.supports('color', 'red');
true
> CSS.supports('color', 'red; #id { background-color: blue; }');
false

Logic

The logic (in valid Javacript) could be:

let themeString = '...';
let theme = JSON.parse(themeString);
if (Object.values(theme).every(color => CSS.supports('color', color)) {
  // We've validated our colors, so we should be good.
  const cssTheme = `
    --bg-primary: ${theme['bg-primary']} !important;
    --bg-secondary: ${theme['bg-secondary']} !important;
    --bg-tertiary: ${theme['bg-tertiary']} !important;
    --bg-hover: ${theme['bg-hover']} !important;
    --bg-hover-secondary: ${theme['bg-hover-secondary']} !important;
    --bg-hover-tertiary: ${theme['bg-hover-tertiary']} !important;
    --bg-active: ${theme['bg-active']} !important;
    --bg-active-secondary: ${theme['bg-active-secondary']} !important;
    --bg-active-tertiary: ${theme['bg-active-tertiary']} !important;
    --bg-separator: ${theme['bg-separator']}33 !important;
    --bg-border: ${theme['bg-border']}33 !important;
    --bg-scrollbar: ${theme['bg-scrollbar']}33 !important;
    --font-color-primary: ${theme['font-color-primary']}mportant;
    --font-color-secondary: ${theme['font-color-secondary']} !important;
    --font-color-tertiary: ${theme['font-color-tertiary']}mportant;
    --font-color-warning: ${theme['font-color-warning']} !important;
    --font-color-brand: ${theme['font-color-brand']} !important;
    --font-color-disable: ${theme['font-color-disable']} !important;
    --bg-ms-planner: ${theme['bg-ms-planner']} !important;
    --bg-ms-one-note: ${theme['bg-ms-one-note']} !important;
    --bg-ms-excel: ${theme['bg-ms-excel']} !important;
    --bg-ms-word: ${theme['bg-ms-word']} !important;
    --bg-ms-power-point: ${theme['bg-ms-power-point']} !important;
    --bg-ms-teams: ${theme['bg-ms-teams']} !important;
    --red: ${theme['red']};
    --blue: ${theme['blue']};
    --skyblue: ${theme['skyblue']};
    --purple: ${theme['purple']};
    --green: ${theme['green']};
  `;
  // Do something with the theme: write it to file or parse it as-is in a 
  // configuration file.
}

[davidsmorais]

Hey @Alexhuszagh :wave:

Thank you for the feedback and the tips with the validation :wink: After changing the way we're setting the themes, I already had something like this planned, so deffly expect to see it in Kuro in an upcoming release :+1:

[pavangayakwad]

There must be an option to clear the themes, I like light themes, after trying out some dark themes, I now have no way to revert my default light theme.

[davidsmorais]

@pavangayakwad you can use the keyboard shortcut to disable your currently selected theme, or you can use the context menu.

Also, next time open a proper issue/discussion if you have doubts please