web-dev-qa-db-ja.com

CSSとJavaScriptを使用して変更可能なテーマを作成する方法

私はCSSとJavaScriptにかなり慣れていないので、サイトで使用するスタイルシートを変更できるスクリプトを作成できるかどうか考えていました。

説明：あなたは、すべてが緑の色合いである緑のテーマを持っていました。ユーザーがボタンを押すだけで赤に変更できるようにするにはどうしますか？

誰もこれを行う方法を考えていますか？

javascriptcssthemes
31
user1130772

リンクタグに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';
};
48
Selvakumar Arumugam

CSS変数 （カスタムプロパティとも呼ばれます）を 最新のすべてのブラウザでサポートされている であれば、このような変更に使用できます。

したがって、緑/白のテーマがあり、緑が原色で、白がそれを補っているとします。サイトは次のようになります。

How the site looks

_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_にrefactorすることです。変更後のスタイルシートは次のようになります。

まず、デフォルトのテーマの色を_:root_要素のスタイル宣言に設定します。

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

次に、スタイルシート内のhardcoded "green"のすべてのインスタンスを、原色変数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変数をサポートしていないブラウザをまだ使用している場合のために、以下のスニペットがどのように見えるかを示します。

Theme changer

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

はい、JavaScriptでCSSを変更できます。詳細は このチュートリアル を参照してください。基本的には、次のような複数のスタイルシートをリンクします。

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

次に、JavaScriptを使用して変更します。

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

Switch_style（）関数はそのチュートリアルで記述されています。

4
Jeremy Harris

テーマを切り替えたい場合は、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';
    }
};

次に、前述のマークアップを使用します

1
kd44

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
Boiethios

または、テーマcssをcssファイルに入れて関数に渡し、ページ上でif（localStorage.getItem（ "theme"）！= ""）がテーマが設定されているかどうかをチェックします。ここに例があります：

   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
Stefan Avramovic