Member Avatar for tiger86

Hey, I am hoping some kind soul out there can help me out. I want to make a site I am working on able to have more then one theme for example: Blue: Pink:Green:Flames is it possible to make it so when the person clicks the link it can load a css stylesheet for the whole website? I don't want to make each page in every theme color.

  • 4 Contributors
  • 12 Replies
  • 368 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by MelechM

Dani AI

Generated

Short answer: yes — and it doesn't require duplicating every page. As noted, a stored preference plus scripting is needed; and showed that switching styles with JavaScript works. A more maintainable, modern pattern is to keep one base stylesheet that uses CSS custom properties (tokens) and switch a small theme flag (class or data attribute). That minimizes duplicated rules, avoids extra full-file downloads for every theme, and makes maintenance far easier.

Example (conceptual) — theme tokens and usage:

:root {
  --bg: #fff;
  --text: #111;
}
[data-theme="dark"] {
  --bg: #111;
  --text: #eee;
}
body {
  background: var(--bg);
  color: var(--text);
}

Persist the choice in localStorage and apply it early (prevents a visible flash of the default theme):

// run this inline in the <head> before stylesheets
(function(){
  var t = localStorage.getItem('theme');
  if (t) document.documentElement.setAttribute('data-theme', t);
})();
function setTheme(name){
  document.documentElement.setAttribute('data-theme', name);
  localStorage.setItem('theme', name);
}

Practical notes and pitfalls: apply the theme flag at documentElement or body before CSS loads to avoid FOUC; prefer localStorage or server-side user prefs over cookies for simplicity; when using frameworks (Bootstrap, etc.) either override variables at the root or build theme-specific CSS from SASS to keep consistency. Always check contrast/accessibility for each theme and test for specificity clashes (theme rules should use variables rather than many !important overrides). For logged-in users, set the theme on the server so the first HTML render already reflects their preference.

Recommended Answers

All 12 Replies

Member Avatar for mike_g

Yes, but AFAIK it would require a little scripting. You could save the style in a cookie, then select a stylesheet based on the value when the page loads.

Member Avatar for tiger86

Okay... so put the css style sheet within a cookie and then how will it know to load that cookie?

Member Avatar for mike_g

Not quite. You just store an id indicating which stylesheet to load. When loading the page you would then check for the id in the cookie, and if the cookie does not exits use the default style. You could then have a switch/if statement which includes the correct stylesheet.

Member Avatar for tiger86

could you give me a site that does this so I can read the source code to get a better understanding? Please and Thank you.

Member Avatar for essential

Yeah it is possible! But in this case we&#39;l have to use some script to work over it! You my try JavaScript instead!

Member Avatar for tiger86

Thanks, I don't know that much Javascript I am currently studying actionscript.

Member Avatar for essential

I can work on it if you really need it! Just lemme know, ok!

Member Avatar for tiger86

Thanks a ton!

Member Avatar for essential

I can provide you some script on that 1! Just lemme know, ok!

Member Avatar for essential

Ok il let you know when am done!

commented: Essential is very nice and helpful. +1
Member Avatar for MelechM

It's possible. I got it running on my site, before I went all wordpress. I can send you an example and you can learn for yourself.

Member Avatar for MelechM

Here you go:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Theme Changer</title>
	<link rel="stylesheet" type="text/css" href="DefaultCSS.css" title="A_Title_no_spaces" media="screen" />
    <link rel="alternate stylesheet" type="text/css" href="TheAlternativeCSS.css" title="A_Title_no_spaces_Different_from_above_title" media="screen" />
    <script src="style.js" language="JavaScript" type="text/javascript"></script>
</head>

<body>
<!-- This can go anywhere in your HTML -->
<a href="#" onclick="setActiveStyleSheet('A_Title_no_spaces');return false;">Default Theme!</a>
<a href="#" onclick="setActiveStyleSheet('A_Title_no_spaces_Different_from_above_title');return false;">Change the Theme to blue Theme etc!</a>
</body>
</html>

and 

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

Have fun!

commented: Thanks :) +1
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.