如何使用CSS和JavaScript制作可更改的主题

Question

我是CSS和JavaScript的新手,我想知道你是否可以创建一个允许你改变网站使用的样式表的脚本.

说:你有一个绿色主题,一切都是绿色的阴影.你会做什么,所以用户可以通过按下按钮将其更改为红色？

有谁知道如何做到这一点？

Answer 1

您可以将Id设置为链接标记,并在运行时切换css.

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';
};

Answer 2

您可以使用CSS变量(也称为自定义属性)进行此类更改,因为它们受到所有现代浏览器的支持.

所以,假设你有一个绿色/白色的主题,绿色是主色,白色是补充它.该网站可能如下所示:

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: #ddd;
}

.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>

因此,转向CSS变量的第一步是将主题颜色重构为变量--primary-color和--secondary-color.以下是样式表在更改后的样子.

您可以首先将默认主题颜色设置为:root元素样式声明:

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

然后,您可以通过调用主要颜色变量来替换样式表中硬编码 "绿色"的所有实例:var(--primary-color).因此,徽标的样式可能如下所示:

.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: #ddd;
}

.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>

现在,如果您打算将颜色从"绿色"更改为"红色",您需要做的就是将值更改--primary-color为"红色".而且,你可以使用Javascript来做到这一点!

使用普通JS,您可以使用以下颜色将颜色设置为红色:

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

或者,使用jQuery,您可以:

$(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: #ddd;
}

.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>

我更进一步,创建了一些按钮,以显示如何允许用户选择一组主题颜色 - 并使用jQuery更改CSS变量值.

以下是Chrome 64下面的代码段 - 如果您仍在使用不支持CSS变量的浏览器:

$(".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>