Alternative Themes

With the 3.0 update to Solaris, Solaris now has two theme variants. Depending on the preference you've set, Solaris will either appear in a dark theme or a light theme. This guide will go over how I did it.
 
 

Subscriber Group Themes

So you're not happy with simple media queries, and want to let people decide which theme they use. We can use subscriber groups to set this up. Using subscriber groups in this way wasn't my idea, it was something that my good friend Rin Garnett theorized as a potential use a while ago. For more interesting ways to use subscriber groups, check out their article Advanced Use of Subscriber Groups.
 

Detecting subscriber group

To set those subscriber groups to work, we're going to need a way to detect what, if any, subscriber group the person viewing the page has joined. There's no elegant solution for this, but we can place an exclusive subscriber group in a global field, and then set up our css code in a way that checks if that subscriber is present.
  1.First you're going to want to set up subscriber groups for each theme. I named mine Dark Theme and Light Theme. I gave them both the exclusive tag "theme" so that you could only have one theme group active, and I made sure that they were self-assignable.
  2.The next step is to set up the subscriber containers. Grab the subscriber container for your subscriber groups from the Access Rights Management page. In the subcontainer for your dark theme group, put the dark theme section, and vice versa for the light theme subscriber group container. I put these on my global world header block field. You can find it as one of the global content fields in the display options of your configuration settings. Make sure you do not use this class anywhere else, because if you do that page will have the associated theme.
 
  3. The last step is to write the actual code. Our goal is to make sure that a preferred theme will take priority over a browser preference, so we're going to nest our code inside of a media query for the opposite colour scheme preference. Then we use :has to see if the page has a specific class, and list out the preferred colour scheme. I also included .wob and .bow, the classes used by the prose page to swap between white text on a black background (wob) and black text on a white background (bow) while I was at it.
  If you aren't doing a browser-preference light and dark theme like I am, you don't need the first two lines with the media query and wob or bow.

@media (prefers-color-scheme: light) {
 .user-css-presentation:has(.wob),
  .user-css-presentation:has(.active-dark) {
 --bg: var(--black);
 --bgalt: #2f2346;
 --border: var(--purple);
 --accent: var(--pink);
 --t: var(--light);
 }
}

@media (prefers-color-scheme: dark) {
  .user-css-presentation:has(.bow),
  .user-css-presentation:has(.active-light) {
  --bg: var(--white);
  --bgalt: var(--light);
  --border: var(--grey);
  --accent: var(--blue);
  --t: var(--black);
  }
}

 
 

Toggle Widget

If you want to add a toggle like the one in my sidebar, or at the top of the page, you're going to want to create your own widget. On the Access Rights Management page you can grab the self-assignable embed for any self-assignable group. You can swap out the text to say whatever you want, or even replace it with an icon using a section and font awesome code. (If you're adding an icon, remember to leave an empty space in the section.)
  You can put this self-assignable embed inside of a button, which you can also create with a section. You can make the default button of your world with [section:btn btn-primary] [/section]. Since the text itself is clickable, you could also use CSS to hide the checkbox like I did.