How to Make Changeable Themes Using CSS and JavaScript

How to make changeable themes using CSS and JavaScript

You can set an Id to the link tag and switch the css at runtime.

HTML

<link type="text/css" rel="stylesheet" media="all" href="../green.css" id="theme_css" />

JS

document.getElementById('buttonID').onclick = function () { 
    document.getElementById('theme_css').href = '../red.css';
};

Quick Demo:

    $( "#datepicker" ).datepicker();

$('button').button().on('click', function () {
  let linkHref = 'https://code.jquery.com/ui/1.11.4/themes/{THEME}/jquery-ui.css';

if ($('#swapTheme').prop('href').indexOf('pepper-grinder') >= 0) {
    $('#swapTheme').prop('href', linkHref.replace('{THEME}', 'black-tie'));
  } else {
    $('#swapTheme').prop('href', linkHref.replace('{THEME}', 'pepper-grinder'));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
              crossorigin="anonymous"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/pepper-grinder/jquery-ui.css" id="swapTheme" rel="stylesheet">
<div id="datepicker"></div>
<button style="padding: 5px 15px;"> Switch Theme </button>

A problem in Changeable Themes with JavaScript

While @LoaiMasri was on a good track to solve the issue, there is still great way of improvement. Espacially to make the code shorter and more efficient if you have more themes to add.

First change you should consider over LoaiMasri's solution is to use a switch-statement over listing tons of if/else-statements.

However that will be to complicated for more then just a handfull of themes. The most efficient way is to add the themes through CSS. For that you do LoaiMasri's approach of using the value-attribute on the option tag. However give it a more direct value like theme-1, theme-2...

Then you use the script below:

document.getElementById('Themes').addEventListener('change', function() {
  document.body.className = "";
  let theme = document.getElementById("Themes").value;
  document.body.classList.add(theme);
});

document.body.className = ""; -> This will remove all classes from the body-tag and works as a reset.

let theme = document.getElementById("Themes").value; -> That gets the value from the option-tag.

document.body.classList.add(theme); -> This will add now a class to the body-tag that equals the value of the option-tag.

All you now have to is to add classes to your CSS that equal the value of the option-tag. This will now solve the issue with 5 lines of JS code no matter how many themes you want to add (which is already smaller then LoaiMasri's solution).

document.getElementById('Themes').addEventListener('change', function() {
  document.body.className = "";
  let theme = document.getElementById("Themes").value;
  document.body.classList.add(theme);
});

.theme-1 {
  background-color: white;
  color: black;
}

.theme-2 {
  background-color: black;
  color: white;
}

.theme-3 {
  background-color: darkgray;
  color: white;
}

<select id="Themes">
  <option value="theme-1">White</option>
  <option value="theme-2">Black</option>
  <option value="theme-3">Dark</option>
</select>

How to make changeable themes using CSS and JavaScript

You can set an Id to the link tag and switch the css at runtime.

HTML

<link type="text/css" rel="stylesheet" media="all" href="../green.css" id="theme_css" />

JS

document.getElementById('buttonID').onclick = function () { 
    document.getElementById('theme_css').href = '../red.css';
};

Quick Demo:

    $( "#datepicker" ).datepicker();

$('button').button().on('click', function () {
  let linkHref = 'https://code.jquery.com/ui/1.11.4/themes/{THEME}/jquery-ui.css';

if ($('#swapTheme').prop('href').indexOf('pepper-grinder') >= 0) {
    $('#swapTheme').prop('href', linkHref.replace('{THEME}', 'black-tie'));
  } else {
    $('#swapTheme').prop('href', linkHref.replace('{THEME}', 'pepper-grinder'));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
              crossorigin="anonymous"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/pepper-grinder/jquery-ui.css" id="swapTheme" rel="stylesheet">
<div id="datepicker"></div>
<button style="padding: 5px 15px;"> Switch Theme </button>

How to toggle between two CSS documents with a button in HTML

Another way is to use a boolean. You can change the value of the boolean on each click. And you can toggle the css with this boolean.

<button onclick=getTheme()>Click to use this theme.</button>

Js

var bool = true;
function getTheme() { 
  function changeTheme (theme) {
    document.getElementById('style').setAttribute('href', theme);
  }  

  bool = !bool;
  var theme = bool ? 'css/dark.css' : 'css/main.css';
  changeTheme(theme);
}

Edit based on comment

This does work perfectly, however, is there a way to use document.getElementById("themeToggle").innerHTML = "New text!"; with this to change the button between "dark theme" or "light theme"

You can use the same logic, like:

var bool = true;
function getTheme() { 
  function changeTheme (theme, text) {
    document.getElementById('style').setAttribute('href', theme);
    document.getElementById('themeToggle').innerText = text;
  }  

  bool = !bool;
  var theme = bool ? 'css/dark.css' : 'css/main.css';
  var text  = bool ? 'Dark theme' : 'Light theme';
  changeTheme(theme, text);
}

How to change themes using SASS

Depending on your build process and requirements for older browsers, for example ie11.

Themes becomes easier with css custom properties (css variables). The basic idea is that you have your variables, and on theme change you change the color of the variables.

In my very very basic example the following things happen and why.

1. On root level set your variables for your default theme.
2. Have a class with the describing the theme, in my example it is .dark-theme
3. Set a class on the body when dark-theme is active with js, or postback depending on your backend and wanted approach. In my example I do it with js.

What happens here is that in .dark-theme we change the variables to the dark theme colors. That is the basics of it and will get you far.

Just a note, the approach on saving the theme all depends on what kind of site you have SPA, Wordpress, .NET ect. I seen mentions about saving it in the database and user, that kinda don't hold up if you don't have user signing. One approach is to save it in the browsers local storage and read it when you load the page.

const themeSwitcherButton = document.querySelector('.js-theme-switcher')

themeSwitcherButton.addEventListener('click', function() {
    const body = document.querySelector('body')
  
  if (body.classList.contains('dark-theme')) {
    body.classList.remove('dark-theme')
  } else {
    body.classList.add('dark-theme')
  }
})

:root {
  --primary-color: deepskyblue;
}

body.dark-theme {
  --primary-color: deeppink;
}

.block {
  margin-bottom: 3rem;
  padding: 2rem;
  background-color: var(--primary-color);
}

<body>
  <p class="block">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quos odio atque excepturi, aut voluptate. Similique autem, eos rem cum tenetur perspiciatis voluptatibus reprehenderit cumque, inventore, nam laudantium fugiat molestias eveniet sit commodi deleniti. Ipsa eum animi, excepturi tempore placeat.
  </p>
  
  <button class="js-theme-switcher">Theme switcher</button>
</body>

How would one implement custom themes into a website that is not wordpress?

I didn't get your question exactly. But these are my opinions.
Generally , Custom Themes are added using themes(Non Wordpress) which you can download from sites like themeforest , envato market ,template.net etc. Either you can tweak it and make it your own or just use as it is. But if you do so please do have a glance at the licensing to avoid future problems.

And Dropdown menu can be made using CSS and JavaScript. I would say that its not a must. Its the content which makes it notable.

---

Related Topics