How to make changeable themes using CSS and JavaScript

后端未结

关注

 6  1024

I\'m pretty new to CSS and JavaScript and I was wondering if you could make a script that allows you to change what stylesheet the site uses.

Say: you had a green t

相关标签:

6条回答

你的背包

2020-11-28 23:16

Yes, you can change CSS with Javascript. See this tutorial for more info. It basically links multiple stylesheets like this:

<link rel="stylesheet" type="text/css" title="blue"
   href="http://example.com/css/blue.css">
<link rel="alternate stylesheet" type="text/css" title="pink"
   href="http://example.com/css/pink.css">

And then uses Javascript to change it:

<form>
<input type="submit" onclick="switch_style('blue');return false;" name="theme" value="Blue Theme" id="blue">
<input type="submit" onclick="switch_style('pink');return false;" name="theme" value="Pink Theme" id="pink">
</form>

The switch_style() function is written in that tutorial.

0 讨论(0)

深忆病人

2020-11-28 23:21

You could use CSS Variables (also known as Custom Properties) for such changes, given that they are supported by all modern browsers.

So, let's say you have a green/white theme, where green being the primary color, and white complementing it. The site might look like the following:

body {
  font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}

.container {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: 50px 1fr 30px;
  grid-gap: 5px;
}

.header {
  grid-row: 1;
  grid-column: 1 / 3;
  background-color: #ffffd;
}

.nav {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid green;
}

.content {
  grid-column: 2;
  grid-row: 2;
  padding: 10px;
}

.footer {
  grid-row: 3;
  grid-column: 1 / 3;
  text-align: center;
}


/* Child items. */

.header-logo {
  float: left;
  width: 100px;
  background-color: green;
  height: 50px;
  color: white;
  font-size: 30px;
  padding: 3px 5px;
  box-sizing: border-box;
}

.nav-links {
  list-style: none;
  margin: 5px 0 0 0;
  padding: 0;
}

.nav-links--link {
  color: green;
  background-color: white;
  width: 100%;
  height: 30px;
  margin: 0 0 5px 0;
  padding: 4px 5px;
  box-sizing: border-box;
  cursor: pointer;
}

.nav-links--link.active,
.nav-links--link:hover {
  background-color: green;
  color: white;
}

.footer-note {
  color: green;
  background-color: white;
  padding: 3px 0;
  display: block;
}

<div class="container">
  <div class="header">
    <div class="header-logo">
      LOGO
    </div>
  </div>

  <div class="nav">
    <ul class="nav-links">
      <li class="nav-links--link active">
        Home
      </li>
      <li class="nav-links--link">
        About
      </li>
      <li class="nav-links--link">
        Contact Us
      </li>
    </ul>
  </div>

  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
      nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
  </div>

  <div class="footer">
    <span class="footer-note">
          Lorem ipsum dolor sit amet.
        </span>
  </div>
</div>

So the first step to move to CSS Variables would be to refactor out the theme colors into variables --primary-color and --secondary-color. Here's how your stylesheet looks after the change.

You could begin by setting the default theme colors into the :root element style declaration:

:root {
    --primary-color: green;
    --secondary-color: white;
}

Then, you can replace all instances of hardcoded "green" in the stylesheet with a call to the primary color variable: var(--primary-color). So the styles for your logo might look like the following:

.header-logo {
  ...
  background-color: var(--primary-color);
  color: var(--secondary-color);
  ...
}

:root {
  --primary-color: green;
  --secondary-color: white;
}

body {
  font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}

.container {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: 50px 1fr 30px;
  grid-gap: 5px;
}

.header {
  grid-row: 1;
  grid-column: 1 / 3;
  background-color: #ffffd;
}

.nav {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid var(--primary-color);
}

.content {
  grid-column: 2;
  grid-row: 2;
  padding: 10px;
}

.footer {
  grid-row: 3;
  grid-column: 1 / 3;
  text-align: center;
}


/* Child items. */

.header-logo {
  float: left;
  width: 100px;
  background-color: var(--primary-color);
  height: 50px;
  color: var(--secondary-color);
  font-size: 30px;
  padding: 3px 5px;
  box-sizing: border-box;
}

.nav-links {
  list-style: none;
  margin: 5px 0 0 0;
  padding: 0;
}

.nav-links--link {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  width: 100%;
  height: 30px;
  margin: 0 0 5px 0;
  padding: 4px 5px;
  box-sizing: border-box;
  cursor: pointer;
}

.nav-links--link.active,
.nav-links--link:hover {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

.footer-note {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  padding: 3px 0;
  display: block;
}

<div class="container">
  <div class="header">
    <div class="header-logo">
      LOGO
    </div>
  </div>

  <div class="nav">
    <ul class="nav-links">
      <li class="nav-links--link active">
        Home
      </li>
      <li class="nav-links--link">
        About
      </li>
      <li class="nav-links--link">
        Contact Us
      </li>
    </ul>
  </div>

  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
      nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
  </div>

  <div class="footer">
    <span class="footer-note">
          Lorem ipsum dolor sit amet.
        </span>
  </div>
</div>

Now, if you intend to change the color from "green" to "red", all you need to do is change the value of --primary-color to "red". And, you can do that using Javascript!

With plain JS, you can set the color to red using:

document.body.style.setProperty("--primary-color", "red");

Or, with jQuery you could do:

$(document.body).css("--primary-color", "red");

$(document.body).css("--primary-color", "red");

:root {
  --primary-color: green;
  --secondary-color: white;
}

body {
  font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}

.container {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: 50px 1fr 30px;
  grid-gap: 5px;
}

.header {
  grid-row: 1;
  grid-column: 1 / 3;
  background-color: #ffffd;
}

.nav {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid var(--primary-color);
}

.content {
  grid-column: 2;
  grid-row: 2;
  padding: 10px;
}

.footer {
  grid-row: 3;
  grid-column: 1 / 3;
  text-align: center;
}


/* Child items. */

.header-logo {
  float: left;
  width: 100px;
  background-color: var(--primary-color);
  height: 50px;
  color: var(--secondary-color);
  font-size: 30px;
  padding: 3px 5px;
  box-sizing: border-box;
}

.nav-links {
  list-style: none;
  margin: 5px 0 0 0;
  padding: 0;
}

.nav-links--link {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  width: 100%;
  height: 30px;
  margin: 0 0 5px 0;
  padding: 4px 5px;
  box-sizing: border-box;
  cursor: pointer;
}

.nav-links--link.active,
.nav-links--link:hover {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

.footer-note {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  padding: 3px 0;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    <div class="header-logo">
      LOGO
    </div>
  </div>

  <div class="nav">
    <ul class="nav-links">
      <li class="nav-links--link active">
        Home
      </li>
      <li class="nav-links--link">
        About
      </li>
      <li class="nav-links--link">
        Contact Us
      </li>
    </ul>
  </div>

  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
      nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
  </div>

  <div class="footer">
    <span class="footer-note">
          Lorem ipsum dolor sit amet.
        </span>
  </div>
</div>

I went one step further and created some buttons to show how you could allow the user to choose a set of theme colors - and change the values CSS Variables using jQuery.

Here's how the snippet below looks on Chrome 64 - in case you are still using a browser that doesn't support CSS Variables:

$(".header--theme-button").on("click", function() {
  var primaryColor = $(this).css("--theme-primary");
  var secondaryColor = $(this).css("--theme-secondary");

  $(".header--theme-button").removeClass("active");
  $(this).addClass("active");

  $(document.body).css("--primary-color", primaryColor);
  $(document.body).css("--secondary-color", secondaryColor);
});

:root {
  --primary-color: orange;
  --secondary-color: white;
  --theme-primary: black;
  --theme-secondary: white;
}

body {
  font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}

.container {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: 50px 1fr 30px;
  grid-gap: 5px;
}

.header {
  grid-row: 1;
  grid-column: 1 / 3;
}

.nav {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid var(--primary-color);
}

.content {
  grid-column: 2;
  grid-row: 2;
  padding: 10px;
}

.footer {
  grid-row: 3;
  grid-column: 1 / 3;
  text-align: center;
}


/* Child items. */

.header-logo {
  float: left;
  width: 100px;
  background-color: var(--primary-color);
  height: 50px;
  color: var(--secondary-color);
  font-size: 30px;
  padding: 3px 5px;
  box-sizing: border-box;
}

.header-settings {
  float: right;
  height: 50px;
}

.nav-links {
  list-style: none;
  margin: 5px 0 0 0;
  padding: 0;
}

.nav-links--link {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  width: 100%;
  height: 30px;
  margin: 0 0 5px 0;
  padding: 4px 5px;
  box-sizing: border-box;
  cursor: pointer;
}

.nav-links--link.active,
.nav-links--link:hover {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

.footer-note {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  padding: 3px 0;
  display: block;
}

.header--theme-button {
  height: 30px;
  width: 30px;
  margin: 10px 5px 0 0;
  display: inline-block;
  border-top: 15px solid var(--theme-primary);
  border-bottom: 15px solid var(--theme-secondary);
  border-right: 0;
  border-left: 0;
  padding: 0;
  box-shadow: 0 0 3px gray;
}

.header--theme-button:hover {
  box-shadow: 2px 2px 2px gray;
}

.header--theme-button.active {
  box-shadow: 3px 3px 3px gray;
}

<div class="container">
  <div class="header">
    <div class="header-logo">
      LOGO
    </div>
    <div class="header-settings">
      <button type="button" class="header--theme-button active" style="--theme-primary:orange; --theme-secondary:white;">
          </button>
      <button type="button" class="header--theme-button" style="--theme-primary:#2196F3; --theme-secondary:#eee;">
          </button>
      <button type="button" class="header--theme-button" style="--theme-primary:purple; --theme-secondary:white;">
          </button>
      <button type="button" class="header--theme-button" style="--theme-primary:#F44336; --theme-secondary:white;">
          </button>
      <button type="button" class="header--theme-button" style="--theme-primary:green; --theme-secondary:white;">
          </button>
      <button type="button" class="header--theme-button" style="--theme-primary:#FFEB3B; --theme-secondary:#222;">
          </button>
    </div>
  </div>

  <div class="nav">
    <ul class="nav-links">
      <li class="nav-links--link active">
        Home
      </li>
      <li class="nav-links--link">
        About
      </li>
      <li class="nav-links--link">
        Contact Us
      </li>
    </ul>
  </div>

  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
      nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
  </div>

  <div class="footer">
    <span class="footer-note">
          Lorem ipsum dolor sit amet.
        </span>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

0 讨论(0)

余生分开走

2020-11-28 23:27

If you want to switch back and forth between themes I recommend using the following for your javascript:

var count = 0

document.getElementById('trigger').onclick = function () {
    count = count + 1;
    if (count%2!=0){
      document.getElementById('default').href = 'changeTheme.css';
    } else {
      document.getElementById('default').href = 'main.css';
    }
};

Then using the markup mentioned earlier

0 讨论(0)

梦如初夏

2020-11-28 23:27

Or just put your theme css in a css file and pass it to the function, On page load the if (localStorage.getItem("theme") != "") checks if theme has been set.. Here you have an example:

   if (localStorage.getItem("theme") != "") {
        loadcssfile(localStorage.getItem("theme"));
      }

      function loadcssfile(filename) {
        if (filename != "") {
          localStorage.setItem("theme", filename);
        }
        
        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);

        if (typeof fileref != "undefined")
          document.getElementsByTagName("head")[0].appendChild(fileref);
      }

   <div onclick="loadcssfile('css/pink.css')" id="pink">
      Pink
    </div>
    <div
      onclick="loadcssfile('css/blue.css')" id="blue">
      Blue
    </div>

0 讨论(0)

慢半拍i

2020-11-28 23:29

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" />

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

0 讨论(0)

陌清茗

2020-11-28 23:35

You don't even need any Javascript:

input[type=radio][value=light]:checked ~ article {
    color: #222;
    background-color: #FFEEAA;
}

input[type=radio][value=dark]:checked ~ article {
    color: #EEE;
    background-color: grey;
}

<body>
  <input type="radio" name="theme" value="light" checked="checked">Light<br>
  <input type="radio" name="theme" value="dark">Dark<br>
  <article>
    <h1>My super page!</h1>
    <p>
      Quibusdam sit repudiandae consequuntur doloremque illum ut ex quo. Esse temporibus est id suscipit repellat. Distinctio voluptatem voluptates asperiores dolorem dolorem placeat corporis quae. Quaerat voluptatem magni dignissimos rerum distinctio odio id.
    </p>
  </article>
</body>

0 讨论(0)