How to change default theme?
See original GitHub issueThis is probably due to my lack of JS experience, but I am unsure about how should I change the CSS style of the default theme. Note that I would like to change it once, not dynamically.
I tried to create a simple GUI with red background, but I am of course doing something wrong:
import { GUI } from 'https://cdn.skypack.dev/lil-gui';
const root = document.documentElement;
root.style.setProperty('--background-color', '#ff0000');
root.style.setProperty('--title-background-color', '#ff0000');
const gui = new GUI();
gui.add( document, 'title' );
I guess I am setting the wrong property. 😂
Is const style = Array.from( document.querySelectorAll( 'style' ) ).find( v => /lil-gui/.test( v.innerHTML ) ); and then replacing the innerHTML as in the kitchen sink example the only/best way to do it?
If there is a way to change styles without iterating (i.e.: before instantiating the GUI elements), that would be great.
Issue Analytics
- State:
- Created 2 years ago
- Comments:7 (5 by maintainers)
Top Results From Across the Web
Change a theme and make it the default in Word or Excel
To change themes, simply pick a different theme from the Themes menu. To return to the default theme, choose the Office theme. To...
Read more >How to Set a Default Theme in Excel - Xelplus - Leila Gharani
Open a new blank workbook. · Go to Themes under the Page Layout tab. · Select the custom theme you want to set...
Read more >WordPress Default Theme: What It Is and How to Change It
If you want to change the default theme that comes with WordPress, it's pretty easy to do. Go to Appearance > Themes >...
Read more >How to Set a Default Theme in Microsoft PowerPoint
Right-click on the theme and select Set as Default Theme . Set as Default Theme. The theme will be applied to your future...
Read more >How to Change Google Chrome Default Theme - Technipages
On the settings page, on the left-hand side, look for Appearance and click on it. A new page will open with various options....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Extending the GUI class isn’t really something I had in mind. If you’re only extending the GUI class to apply custom styles, I would still recommend doing what I described in my first comment: it seems just as much trouble to include a CSS file as it would a custom JS class.
Oh, I see—you just want it in one file for portability’s sake. That’s totally valid, lil-gui does the same thing internally after all.
The library inserts style tags (as opposed to defining inline styles), which is nice because you can write CSS verbatim, use pseudo-selectors etc:
I’m considering exposing
injectStylesas I write a custom controller guide.