Open mateusabelli opened 1 year ago
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:
/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?
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?
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.
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.
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?
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 componentsInitial 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 thegetHighlighter
function: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:Click to expand the array
```javascript [ '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:
tailwind.config.js
instead of hard coding them.Please let me know what you think.