SCSS Theme Picker Creation - CSS-Tricks

This topic is empty.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
February 17, 2017 at 9:02 pm #251641

Burlingame
Participant

Hi everyone. I am redesigning the front end on an old app and want to use SCSS to create a theme picker. I am fairly new to SCSS however and am not 100% sure on how I would go about doing this. I was looking at creating separate scss files and housing variables specific to the colors then having one main file with all my css in it. I am not sure if there is an easy way to use javascript or some other method to point to different scss files to import based upon a user selection. That way I could dynamically change the css being applied to the components.

February 18, 2017 at 12:15 am #251644

Shikkediel
Participant

an easy way to use javascript or some other method to point to different scss files to import based upon a user selection. That way I could dynamically change the css being applied to the components.

If you’re using jQuery, it shouldn’t be too difficult. You would really only need a single text file and cache that content with Ajax. Then you could filter the currently appropriate style from that and paste it into the document accordingly. When another layout is requested, remove it and paste those new style rules instead.

Should also be doable with vanilla JS and XMLHttpRequest but slightly more complicated. I’m not familiar with SCSS though and any differences that might occur compared to regular CSS (but don’t really expect any).

February 18, 2017 at 2:57 pm #251675
Shikkediel
Participant
Here’s an example, text file could look like this:
```
<style id="theme1">

...

</style>

<style id="theme2">

...

</style>
```
```
var style = {};

$.ajax({
  url: '/path-to/styles.txt',
  dataType: 'text',
  success: function(data) {
  var styles = $(data).filter('style').each(function() {
  var theme = this.id;
  style[theme] = this;
  });
  }
});
```
It’s mostly untested because one can make a demo of this unless the file is on the same domain. But it should create an object you can switch the styles with. Which would like like this:
```
[var style]

{
theme1: '<style id="theme1"> ... </style>',
theme2: '<style id="theme2"> ... </style>'
}
```
February 20, 2017 at 2:29 pm #251744

Burlingame
Participant

Thanks a lot I will give it a look.

February 27, 2017 at 9:11 am #252037
Gabriel
Participant
Seems like the simplest way would be to just switch a classname on the <body> element with JS to apply the different theme styles?

So maybe you have a <select> menu, and that will switch out a body class depending on which one you pick (Google how to do that, should be pretty straightforward with jQuery), and then in your SCSS:
```
.element-1 {
  // base styles

  .theme-1 & {
    // theme 1 styles
  }

  .theme-2 & {
    // theme 2 styles
  }

  // ...etc
}
```
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The forum ‘CSS’ is closed to new topics and replies.