Theme Switch using CSS Variables

Be sure your league is setup properly before installing any scripts.Setup Video

This directory contains the files to start a custom theme switch. Using CSS variables you can create 1 stylesheet and switch between dozens of different colors for your site. The first thing to do is install the "Theme Switch script and HTML in a header message. Depening on how many different color schemes you want to create, you can edit the HTML portion to add as many different color variation names as you want. In the script directly. Do not edit the jQuery which is located above and below the HTML with the "Theme Switch" portion of the coding below. When you add new color themes you can set the font awesome icons to display a matching color by editing the inline HTML , you can rename each theme as you wish.

The next section in this example is the "Main CSS" , this will place a font awesome icon paint brush in the top left hand corner of your site , also it positions a popup box to select your color schemes. Each theme for each owner is saved in local storage. Edit this css to match your sites if light or dark using variables.

The last section called "CSS Variable" is a small snippet of CSS to illustrate how you use variables to color your body background , caption background and report background. You can install all 3 sections in a demo league and play with it. This will get you started.

The "script.js" file has an uncompressed version that can be edited and hosted on your own server. Here is a good resource that goes into detail on how to use CSS Variables.

All scripts require 1 instance of the cache.js file to be placed in a header message as the 1st line

<script src="https://www.mflscripts.com/mfl-apps/global/cache.js"></script>

Theme SwitchPlace in header message

<script>
// TEMPLETE THEME FUNCTION TO SET SKIN COLORS
function applyTheme(themeName) {
  document.documentElement.className = themeName;
}
function getStoredTheme(year, league_id, defaultTheme) {
  const storedTheme = localStorage.getItem(`theme_${year}_${league_id}`);
  return storedTheme || defaultTheme;
}
const defaultTheme = 'theme-dk-yellow'; 
const storedTheme = getStoredTheme(year, league_id, defaultTheme);
applyTheme(storedTheme);

function setTheme(themeName) {
	localStorage.setItem('theme_' + year + '_' + league_id, themeName);
	document.documentElement.className = themeName;
}
(() => {
	if (localStorage.hasOwnProperty(`theme_${year}_${league_id}`)) {
		setTheme(localStorage.getItem(`theme_${year}_${league_id}`));
	}
})();
var logoSvgInsertIcon = document.getElementById("logo_svg_inserticon");
if (logoSvgInsertIcon) {
	logoSvgInsertIcon.classList.add("nfl-icon-onload");
}
document.querySelectorAll(".MFLSkinSelectionbtn").forEach(function (element) {
	element.addEventListener("click", function () {
		document.getElementById("myMFLSkinSelection").style.display = "block";
		document.querySelector(".ThemeSwith_overlay").style.display = "block";
		document.getElementById("menu-trigger").style.opacity = "0.3";
		document.getElementById("menu-trigger").style.pointerEvents = "none";
		document.getElementById("myMFLSkinSelection").scrollTop = 0;
		try {
			bodyScrollLock.disableBodyScroll(document.querySelector("#myMFLSkinSelection"));
		} catch (error) {}
	});
});
document.querySelectorAll("#myMFLSkinSelection a").forEach(function (element) {
	element.addEventListener("click", function () {
		document.getElementById("myMFLSkinSelection").style.display = "none";
		document.querySelector(".ThemeSwith_overlay").style.display = "none";
		document.getElementById("menu-trigger").style.opacity = "";
		document.getElementById("menu-trigger").style.pointerEvents = "";
		try {
			var skinSelectPop = document.querySelector("#myMFLSkinSelection");
			bodyScrollLock.enableBodyScroll(skinSelectPop);
		} catch (error) {}
	});
});
document.querySelectorAll(".ThemeSwith_overlay, #myMFLSkinSelection .as_close_btn").forEach(function (element) {
	element.addEventListener("click", function () {
		document.getElementById("myMFLSkinSelection").style.display = "none";
		document.querySelector(".ThemeSwith_overlay").style.display = "none";
		document.getElementById("menu-trigger").style.opacity = "";
		document.getElementById("menu-trigger").style.pointerEvents = "";
		try {
			var skinSelectPop = document.querySelector("#myMFLSkinSelection");
			bodyScrollLock.enableBodyScroll(skinSelectPop);
		} catch (error) {}
	});
});
</script>

<div class="MFLSkinSelection">
   <i class="fa-regular fa-paintbrush MFLSkinSelectionbtn" aria-hidden="true" title="Select Skin Color"></i>
   <div class="ThemeSwith_overlay" style="display:none"></div>
   <div id="myMFLSkinSelection" class="MFLSkinSelection-content" style="display:none">
      <div id="popup-selectLeagues-caption" style="position:relative">Select Skin <span id="MFLPlayerPopupClose" class="as_close_btn" style="transform:none;top:0;right:0;font-size:0.813rem;font-family:'Open Sans',sans-serif">X</span>
      </div>
      <a href="#" onclick="setTheme('theme-dk-green')" style="color:#008c9f!important">
         <i class="fa-regular fa-paintbrush" aria-hidden="true" title="Aqua"></i>Aqua </a>
      <a href="#" onclick="setTheme('theme-dk-blue')" style="color:#117DFF!important">
         <i class="fa-regular fa-paintbrush" aria-hidden="true" title="Blue"></i>Blue </a>
      <a href="#" onclick="setTheme('theme-dk-gold')" style="color:#b2784a!important">
         <i class="fa-regular fa-paintbrush" aria-hidden="true" title="Gold"></i>Gold </a>
      <a href="#" onclick="setTheme('theme-dk-grey')" style="color:#555!important">
         <i class="fa-regular fa-paintbrush" aria-hidden="true" title="Grey"></i>Grey </a>
      <a href="#" onclick="setTheme('theme-dk-orange')" style="color:#ff4200!important">
         <i class="fa-regular fa-paintbrush" aria-hidden="true" title="Orange"></i>Orange </a>
      <a href="#" onclick="setTheme('theme-dk-purple')" style="color:#8430c2!important">
         <i class="fa-regular fa-paintbrush" aria-hidden="true" title="Purple"></i>Purple </a>
      <a href="#" onclick="setTheme('theme-dk-red')" style="color:#da3636!important">
         <i class="fa-regular fa-paintbrush" aria-hidden="true" title="Red"></i>Red </a>
      <a href="#" onclick="setTheme('theme-dk-yellow')" style="color:#f7b534!important">
         <i class="fa-regular fa-paintbrush" aria-hidden="true" title="Yellow"></i>Yellow </a>
   </div>
</div>

Main CSSPlace in header or in css

<style>
.ThemeSwith_overlay {
  content: "";
  background-color: #000;
  opacity: .7;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0
}

#myMFLSkinSelection {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
  border-radius: 3px;
  padding: 10px!important;
  background: var(--site-bg-image, #111 url(https://www.mflscripts.com/ImageDirectory/script-images/body-bg.jpg))!important;
  z-index: 1;
  height: 200px;
  overflow: auto
}

.MFLSkinSelection i {
  padding-right: 6px;
  font-size: 16px;
  border: none;
  cursor: pointer
}

.MFLSkinSelectionbtn {
  color: #ccc;
  padding: 10px;
  border: none;
  cursor: pointer
}

.MFLSkinSelection {
  position: fixed;
  z-index: 99999;
  top: 0
}

.MFLSkinSelection-content {
  display: none;
  position: absolute;
  background: var(--site-bg-image-one , #111 url(https://www.mflscripts.com/ImageDirectory/script-images/body-bg1.jpg));
  min-width: 130px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-top: 4px
}

.MFLSkinSelection-content a {
  color: black;
  padding: 6px 4px;
  text-decoration: none;
  display: block
}

.MFLSkinSelection-content a:hover {
  background-color: rgba(0, 0, 0, .3);
}

.show {
  display: block
}
</style>

CSS VariablesPlace in header or in css

<style>
.theme-dk-gold {
  --accent: #b2784a;
  --accent-light: #B8835A;
  --accent-dark: #704D31;  
}
.theme-dk-orange {
  --accent: #ff4200;
  --accent-light: #FA5C25;
  --accent-dark: #B52F00;
}
.theme-dk-red {
  --accent: #da3636;
  --accent-light: #e63143;
  --accent-dark: #78161F;
}
.theme-dk-blue {
  --accent: #1353F2;
  --accent-light: #117DFF;
  --accent-dark: #0738B3;
}

body {
  background: var(--accent , #b2784a); <! after defining the variable coloring , always add a default color afterwards ->
}
caption {
  background: var(--accent-light , #B8835A); <! after defining the variable coloring , always add a default color afterwards ->
}
.report {
  background: var(--accent-dark , #704D31); <! after defining the variable coloring , always add a default color afterwards ->
}
</style>