We have a client on Sage 8.5.1 that we have not yet transitioned to Sage 9
They have expressed an interest in having a light-themed alternative to the dark theme we did for them initially, and being able to switch between them and save that info on a per-user basis (which we have done before on a pure bootstrap 3 site using two pre-built themes)
I am a bit unsure how one would accomplish the “light theme + dark theme, both active, user chosen, dark default” when the theme itself is being built by npm from bootstrap’s sass within Sage.
Has anyone else had to do this?
(Don’t concern yourself with the theme switcher, or how one would remember this for that client, the next time they visit the site; We’ve already got that code solid, having done that part before. – I’m just specifically concerned with how one would build two separate theme.css files, intending for both to be used, within Sage constraints… )
Should be easy to have 2 seperate css files, just add a new one in the manifest. I’d make a main-light.scss and just load a different variables.scss file in.
1 Like
I’ve been looking at this for a series of sites that I do that all use the same theme with different primary colors.
Right now I’m keeping the theme in each site’s repo and just manually merging changes as needed across the sites.
If I could instead generate all 6-or-so in a single (very long) yarn build and then choose which one to use in a Customizer setting (or whatever) that might be cleaner…
If I can make this work I’ll post an example. If anyone else has it working can you post one for me?
Just to share a few bits of code that we’d used on a pure Bootstrap 3 site (no wordpress) a while back to implement the theme switcher with html5 data storage persistence, as a starting point for furthering this discussion:
( function ($) {
/* enable theme switching */
$('body').on('click', '.change-style-menu-item', function() {
var theme = $(this).data('themeurl');
set_theme(theme);
});
})(jQuery);
/* support functions for style switcher */
function supports_html5_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
var supports_storage = supports_html5_storage();
function set_theme(theme) {
$('link[title="main"]').attr('href', theme);
if (supports_storage) {
localStorage.theme = theme;
}
}
/* On load, set theme from local storage */
if (supports_storage) {
var theme = localStorage.theme;
if (theme) {
set_theme(theme);
}
} else {
/* Don't annoy user with options that don't persist */
$('#theme-dropdown').hide();
}
the < head > uses
<link href="/bootstrap/theme/cerulean.min.css" rel="stylesheet" title="main">
and then the navbar had an additional element:
<li class="dropdown" id="theme-dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown"><i class="icon-cogs icon-large"></i> Theme<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" class="change-style-menu-item"
data-themeurl="/bootstrap/theme/cerulean.min.css"><i class="fa fa-pencil"></i> Light</a></li>
<li><a href="#" class="change-style-menu-item"
data-themeurl="/bootstrap/theme/slate.min.css"><i class="fa fa-pencil"></i> Dark</a></li>
</ul>
</li>
This particular site still being on 8.5.1 just by way of mention, I am still not grokking how one would load them separately, when the process smashes everything together into a single minified css file, so that the user can choose one vs the other. I had given this idea some consideration but stumbled mentally on how one would keep them separate enough to use them individually.
(also see theme switcher code above I cadged from one of our earlier bootstrap 3 sites from a few years back, that I want to implement within this system somehow.)
Could you share a little more detail for my edification (and others) on how to accomplish this? doing it in pure bootstrap is easy – wordpress (and sage itself) throw a few wrenches in the works that make it harder to see the forest for the trees)
I read the first time around that it’s on v8.5.1. Doesn’t change the fact that with either version of Sage it’s easy to add separate files to be minified. On 8.5.1 that would just be a new section in the manifest.json, like I said in my first response. The Sage book covers all of that btw.
You could do it almost as simply as you do it with just normal Bootstrap if you’d like to do it that way. There are multiple ways to go about this, with varying degrees of how much WordPress or Sage would even be involved. If you’re going to use the manifest to create a separate CSS file, you’ll want to make sure to enqueue it in the setup.php file along with the main stylesheet.
I’m sorry in that I’m not going to be able to provide a step by step simply because I’ve got to get my own work done. We’re available for hire if you need personalized help with coming up with a solution for it as well.
No no, that’s not what I was interested in – not in having the work done for me step by step, but in just a slight bit more exposition (which you accomplished) on where to start.
Hoever, to enqueue both of them at once – would they not just step on each other if I did that?
the built link for one primary stylesheet (production) resembles
< link rel=‘stylesheet’ id=‘sage/css-css’ href=‘http://example.com/wp-content/themes/MYTHEME/dist/styles/main-a74297f791.css’ type=‘text/css’ media=‘all’ />
so I can identify it by id (instead of by title like we had done in the above scripting) and replace the href with the desired alternate theme, provided I have a way to insert them both in the nav as a data-themeurl value, to ensure that only one is initially enqueued, and only one is active at any given time, and if there’s an HTML datavalue stored, switch the default out for the stored choice as early as possible.
Well, they’re cascading stylesheets, so it all depends on how you want to code the CSS! If you’d prefer to have 2 separate stylesheets yeah you’d want to swap them out.