search

justinfagnani / codemirror-elements

A set of CodeMirror custom HTML elements
MIT License
38 stars 2 forks source link

[Question] Would you be interested in a CSS variable theme distro'd through this repo? #1

Open michaelwarren1106 opened 1 year ago

michaelwarren1106 commented 1 year ago

Taking a look at how all the "default CM6 themes are built with css-in-js approaches, it occurs to me that making a single css variable based theme would be WAY easier than rewriting all the boiler plate code for a css-in-js theme. If a generic theme was created with css vars as values instead of hardcoded hex codes, then changing theme colors would be as simple as setting css vars and no one would have to search to find some theme they wanted as a package, etc. Also, with css vars, a light/dark mode theme could be supported out of the box just by changing the css var values at runtime based on the mode or prefers-color-scheme settings etc.

Would this repo be a good place to create such a theme or do you think it should be its own repo/pkg?

justinfagnani commented 1 year ago

I just looked into this a little, and yeah, I would be very interested. I think it's be especially useful for themes that just change colors and fonts.

We'd need to map out all the tokens and work out a default system so that the component could ship with a default theme that's still overridable.

michaelwarren1106 commented 1 year ago

i tried it for my web component playroom app. it’s definitely super feasible for all the highlighting tags, but css vars is much harder for the “customize the editor itself” part of the theme. i think what we’d need to do is create a visual design (or just change an existing one like one dark) and implement it with css vars instead of hardcoded hex like they are now.

that way we could narrow the styles in the editor customization down in order to have css vars we could make that make sense