Is dynamic background/colors a good idea?

[mateusabelli]

The Problem

At the moment the project is hard coded to use rose-pine-moon color scheme, including the background and text colors on the components

Initial thoughts

I'd like to know if it would be interesting to refactor everything to allow easier colors customization. After doing some research I've found out that the library shiki provides the following methods for the getHighlighter function:

const myTheme = 'rose-pine-moon'

const highlighter = await shiki.getHighlighter({
  theme: myTheme
})

highlighter.getBackgroundColor(myTheme) // #232136
highlighter.getForegroundColor(myTheme) // #e0def4

With this, it opens the doors for what @isneru tried to implement in their PR

After some more digging through shiki library I've discovered all of their current supported themes, it's available on their docs or by running the following code:

console.log(shiki.BUNDLED_THEMES)

Click to expand the array

[
  'css-variables',
  'dark-plus',
  'dracula-soft',
  'dracula',
  'github-dark-dimmed',
  'github-dark',
  'github-light',
  'hc_light',
  'light-plus',
  'material-theme-darker',
  'material-theme-lighter',
  'material-theme-ocean',
  'material-theme-palenight',
  'material-theme',
  'min-dark',
  'min-light',
  'monokai',
  'nord',
  'one-dark-pro',
  'poimandres',
  'rose-pine-dawn',
  'rose-pine-moon',
  'rose-pine',
  'slack-dark',
  'slack-ochin',
  'solarized-dark',
  'solarized-light',
  'vitesse-dark',
  'vitesse-light'
]

Drawbacks

It seems like they don't have yet a large amount of themes available, so a dynamic theme switch using Diego's Gist could very quickly break away from the library's supported themes. In a situation like this a fallback theme rose-pine-moon for example could be provided.

Final thoughts

I feel like this is a nice feature to explore and we can take away two outcomes from discussing it more below in the comments. Here are the outcomes:

• We just refactor everything to use colors from tailwind.config.js instead of hard coding them.
• We discuss further the implementation of such dynamic theming coming from the Gist with some sort of fallback.

Please let me know what you think.

[isneru]

There aren't many solutions available at this point. @diego3g could extend the colours in tailwind.config.js to define his most liked/recent themes, follows the example:

// tailwind.config.js

module.exports = {
  content: [],
  theme: {
    extend: {
      colors: {
          "min-dark": {
              // most prominent colors in Min Theme (Dark) theme
          },
          "rose-pine-moon": {
              // most prominent colors in Rose Pine Moon theme
          }
        },
    },
  },
  plugins: [],
}

Then, we could try 2 approaches:

1. A CLI that would request @diego3g to select the theme (would have to manually run the script locally)
2. An admin panel in some route of the application (/dashboard) to select the wanted theme.

OBS: These options are viable considering you could fetch the theme you selected from somewhere. In both options, after selecting the theme, there would be a POST request to update the theme in a possible database. Then the application would need to fetch that value and relate the theme to the ones provided in tailwind.config.js.

What do you think?

[mateusabelli]

Hello @isneru thanks for the feedback. I feel like you have some valid approaches, however they would increase the complexity of the project too much if it went to production.

From my initial thoughts where I mentioned your PR I was thinking of a way to implement your original idea, of a dynamic theming from the Gist using methods from the shiki library. This way with one fetch and some code the theme of the whole app would change accordingly. How do you feel about it?

[isneru]

Well, @mateusabelli, I disagree. Automatizing the Gist thingy and whatnot is way more complicated (since there isn't a solid way to achieve it) than simply deploying a database and create an endpoint that accepts a POST request. Prisma is an ORM that's really flexible and easy to use, and by using Next.js, it becomes even easier to complete this task.

[diego3g]

Hey guys! Thanks for this discussion.

About how we could implement the color change based on a theme, we could use simple CSS variables mixed with Tailwind.

We can load our theme, the default colors and add a <style> tag to our page head:

<style type="text/css">
  :root {
    --color-bg: #121214;
    --color-fg: #e1e1e6;
    // other colors here
  }
</style>

And inside Tailwind Config:

module.exports = {
  content: [],
  theme: {
    extend: {
      colors: {
        app: {
          bg: 'var(--color-bg)',
          fg: 'var(--color-fg)'
        }
      },
    },
  },
}

Just an example!

About the variety of themes, I think we should not rely on shiki itself! It would be great if we could somehow fetch the colors from any theme from VSCode, I mean, maybe create a script that downloads the theme from the marketplace and extract the main colors from it.

I don't know how to do this yet.

[gabriellopes00]

Is having a background color really a good idea? I mean, I'm not sure what @diego3g's real purpose is for putting it in, but wouldn't it be better (more usefull) if the editor could fit the entire screen? In addition to better visibility, it would have more space to see the contents of the "configuration files"... What do you think?