JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<main>
  <div class="bg-light-theme-background">
    Some Element
  </div>
  <div class="bg-light-theme-sidebar">
    Some Element
  </div>
  <div class="bg-light-theme-topbar">
    Some Element
  </div>
</main>

SCSS

.bg-light-theme-background {
  background-color: red;
}

.bg-light-theme-sidebar {
  background-color: orange;
}

.bg-light-theme-topbar {
  background-color: yellow;
}


.bg-dark-theme-background {
  background-color: gray;
}

.bg-dark-theme-sidebar {
  background-color: darkgray;
}

.bg-dark-theme-topbar {
  background-color: lightgray;
}

Vue

let elems = document.querySelectorAll("[class*='-light-']");
let previewTheme = "dark"

elems.forEach(elem => function(){
	/**
  *	the idea was to basically change any instance of -light- to -dark- on the page to
  *	be able to preview the theme before permanently switching the setting in the DB.
  *	I wasn't sure if there was an easy find and replace way of doing it in JS or if
  *	there was a way to reclare itself by using a matching element in an array like:
  *
  *	let oldClasses = ['bg-light-theme-background', 'bg-light-theme-sidebar', 'bg-light-theme-topbar'];
  *	let newClasses = ['bg-dark-theme-background', 'bg-dark-theme-sidebar', 'bg-dark-theme-topbar'];
  *
  *	in PHP you can easily do classes = str_replace(oldClasses, newClasses); which would achieve my goal
  *	but my problem solving knowledge in JS is limited to what it is in PHP haha!
  **/
});