Allow for dynamic window colour with inline CSS variables #88
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Thanks for the PR, I'll have a closer look when I get the time. |
khang-nd
requested changes
Feb 25, 2024
There was a problem hiding this comment.
Hi @liam-mills, thanks for bringing this up and even bother contributing with a PR. What you've done here makes perfect sense from my pov as well. Considering that CSS variables are now widely supported, I don't think it's necessary to have them transformed statically, and even leads to difficulty in customization in this case.
Just added the point that we may remove the plugin completely from the build step as we no longer need it. Appreciated :)
khang-nd
approved these changes
Mar 11, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hi @khang-nd,
I had a use case where I was wanting to allow for window colours to be dynamically and globally changed by updating the
--window-background-colorvariable. I personally wasn't too keen on having to add a<style>tag and overwrite the window::beforepseudo element and.title-barmanually (as seen here), so I opted for this method instead. I also wanted to be able to change this colour on the fly through JS, and updating the CSS variable rather than updating the<style>element seems more straightforward.Changes
--window-background-colorvariable as thebackground-colorfor.windowand.title-bar, allowing for it to be redefined within the inlinestyleattribute of each element.postcss-css-variablesto preserve CSS variables. Ideally I would like to set it to explicitly preserve just the--window-background-colorand allow for all other CSS variables to be converted to their static counterpart as per original functionality, but I don't believe thatpostcss-css-variablesallows for this. There is an open issue in the postcss-css-variables repo asking for this functionality. This does now mean that all CSS variables are now non-static. Keen to hear if you have any thoughts on whether there is a better way to approach this.calc()used in_treeview.scssto work with the above modification topostcss-css-variables. The end result of the calculation remains the same as previous.<style>overwrite to instead set the--window-background-coloron both windows demonstrating the colour change functionality.Would love to hear your thoughts on this and whether you had any feedback. Happy to edit my PR if changes are required. Cheers.