JetTheme テーマカラーをランダムに変える
<!-- markdown-mode-on -->
<img alt="jettheme logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih6tkuCAB6zwNyTYCvTrA07cGstQGH7GBjCipsk3a6HoUiKVea-159v4oK4uq7qhXUjbbnX0Hm5Fds5sw7iiCzhqObJHwcnKQEf9-0iAqgpH6bSzH6FxQCVVBh-XrghyphenhyphenMUwaIjVewBQXI/s1600/jettheme-cover.png" style="
display: none;"/>
JetTheme のテーマカラーをランダムに変更するためのスクリプトを作る。 <br/><br/>
下記の表を見ると、JetTheme のデフォルト設定では数種類の要素に同じ色を設定しており、ホバーすると同じ色調のまま濃い色合いになるように工夫されていることが分かる。この考え方を踏襲する。
<span><a name="more"></a></span>
<!--more-->
## JetTheme CSS 変数一覧 (カラーコード & 色見本付き)
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>JetTheme CSS 変数一覧 (カラーコード & 色見本付き)</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
.color-box {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
vertical-align: middle;
margin-left: 5px;
}
</style>
</head>
- ライトモード
<body>
<table>
<thead>
<tr>
<th style="white-space: nowrap; width: 25%;">CSS変数名</th>
<th style="width: 30%; min-width: 150px;">説明</th>
<th style="white-space: nowrap; width: 20%;">適用される要素</th>
<th style="width: 25%;">ライトモード カラーコード/色見本</th>
</tr>
</thead>
<tbody>
<tr>
<td style="white-space: nowrap;"><code>--bs-font-sans-serif</code></td>
<td>サンセリフフォントの定義</td>
<td>全体のフォント (body, text, title など)</td>
<td><code>system-ui,-apple-system,Segoe UI,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji</code></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--bs-body-bg</code></td>
<td>ページ全体の背景色</td>
<td>body の背景色</td>
<td><code>#ffffff</code> <span class="color-box" style="background-color: white;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--bs-body-color</code></td>
<td>ページ全体のテキストカラー</td>
<td>body のフォントカラー</td>
<td><code>#686868</code> <span class="color-box" style="background-color: #686868;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-primary</code></td>
<td>メインカラー</td>
<td>keycolor に適用、ボタンやリンクに使用</td>
<td><code>#f67938</code> <span class="color-box" style="background-color: #f67938;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-heading-color</code></td>
<td>見出しのフォントカラー</td>
<td>h1, h2, h3 など</td>
<td><code>#000000</code> <span class="color-box" style="background-color: black;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-heading-link</code></td>
<td>見出しのリンクカラー</td>
<td>h1, h2 など</td>
<td><code>#000000</code> <span class="color-box" style="background-color: black;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-heading-hover</code></td>
<td>見出しのリンクホバー時カラー</td>
<td>h1, h2 などのホバー時</td>
<td><code>#f67938</code> <span class="color-box" style="background-color: #f67938;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-link-color</code></td>
<td>通常のリンクカラー</td>
<td>a タグのデフォルト</td>
<td><code>#f67938</code> <span class="color-box" style="background-color: #f67938;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-link-hover</code></td>
<td>リンクのホバー時のカラー</td>
<td>a:hover</td>
<td><code>#f46013</code> <span class="color-box" style="background-color: #f46013;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-blockquote</code></td>
<td>引用部分のボーダーカラー</td>
<td>blockquote</td>
<td><code>#f67938</code> <span class="color-box" style="background-color: #f67938;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-btn-primary</code></td>
<td>プライマリーボタンカラー</td>
<td>.btn-primary</td>
<td><code>#f67938</code> <span class="color-box" style="background-color: #f67938;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-btn-primary-hover</code></td>
<td>ボタンホバー時のカラー</td>
<td>.btn-primary:hover</td>
<td><code>#f46013</code> <span class="color-box" style="background-color: #f46013;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-btn-light-hover</code></td>
<td>軽量ボタンのホバー時カラー</td>
<td>.btn-light:hover</td>
<td><code>#000000</code> <span class="color-box" style="background-color: black;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-border-light</code></td>
<td>全体の境界線カラー</td>
<td>border 要素</td>
<td><code>#efefef</code> <span class="color-box" style="background-color: #efefef;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-bg-light</code></td>
<td>ライトテーマの背景色</td>
<td>一部の背景要素</td>
<td><code>#f3f7f9</code> <span class="color-box" style="background-color: #f3f7f9;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-archive-bg</code></td>
<td>記事一覧の背景色</td>
<td>.archive-section など</td>
<td><code>#ffffff</code> <span class="color-box" style="background-color: white;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-nav-color</code></td>
<td>ナビゲーションのテキストカラー</td>
<td>.nav メニューのフォント</td>
<td><code>#686868</code> <span class="color-box" style="background-color: #686868;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-nav-hover</code></td>
<td>ナビゲーションのホバー時カラー</td>
<td>.nav a:hover</td>
<td><code>#f67938</code> <span class="color-box" style="background-color: #f67938;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-nav-selected</code></td>
<td>ナビゲーションの選択時カラー</td>
<td>.nav .selected</td>
<td><code>#f67938</code> <span class="color-box" style="background-color: #f67938;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-dropdown-bg</code></td>
<td>ドロップダウンメニューの背景色</td>
<td>.dropdown-menu</td>
<td><code>#ffffff</code> <span class="color-box" style="background-color: white;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-dropdown-color</code></td>
<td>ドロップダウンメニューのフォントカラー</td>
<td>.dropdown-menu a</td>
<td><code>#686868</code> <span class="color-box" style="background-color: #686868;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-dropdown-hover</code></td>
<td>ドロップダウン項目ホバー時カラー</td>
<td>.dropdown-menu a:hover</td>
<td><code>#f67938</code> <span class="color-box" style="background-color: #f67938;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-dropdown-selected</code></td>
<td>ドロップダウン選択時カラー</td>
<td>.dropdown-menu .selected</td>
<td><code>#f67938</code> <span class="color-box" style="background-color: #f67938;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-header-bg</code></td>
<td>ヘッダーの背景色</td>
<td>.header</td>
<td><code>#ffffff</code> <span class="color-box" style="background-color: white;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-header-color</code></td>
<td>ヘッダーのフォントカラー</td>
<td>.header a</td>
<td><code>#686868</code> <span class="color-box" style="background-color: #686868;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-header-border</code></td>
<td>ヘッダーのボーダーカラー</td>
<td>.header の境界線</td>
<td><code>#efefef</code> <span class="color-box" style="background-color: #efefef;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-footer-bg</code></td>
<td>フッターの背景色</td>
<td>.footer</td>
<td><code>#212529</code> <span class="color-box" style="background-color: #212529;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-footer-color</code></td>
<td>フッターのフォントカラー</td>
<td>.footer a</td>
<td><code>#9fa6ad</code> <span class="color-box" style="background-color: #9fa6ad;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-footer-link</code></td>
<td>フッターのリンクカラー</td>
<td>.footer a:hover</td>
<td><code>#9fa6ad</code> <span class="color-box" style="background-color: #9fa6ad;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-footer-border</code></td>
<td>フッターのボーダーカラー</td>
<td>.footer の境界線</td>
<td><code>#323539</code> <span class="color-box" style="background-color: #323539;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-socket-bg</code></td>
<td>ソケット（最下部）の背景色</td>
<td>.socket</td>
<td><code>#09080c</code> <span class="color-box" style="background-color: #09080c;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-socket-color</code></td>
<td>ソケットのフォントカラー</td>
<td>.socket a</td>
<td><code>#9fa6ad</code> <span class="color-box" style="background-color: #9fa6ad;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--table-bg</code></td>
<td>表の背景色</td>
<td>table</td>
<td><code>#ffffff</code> <span class="color-box" style="background-color: white;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--table-text</code></td>
<td>表のテキストカラー</td>
<td>table td, table th</td>
<td><code>#000000</code> <span class="color-box" style="background-color: black;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--table-header-bg</code></td>
<td>表のヘッダー背景色</td>
<td>table th</td>
<td><code>#B0DFFF</code> <span class="color-box" style="background-color: #b0dfff;"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--table-border</code></td>
<td>表の罫線カラー</td>
<td>table の境界線</td>
<td><code>#000000</code> <span class="color-box" style="background-color: black;"></span></td>
</tr>
</tbody>
</table>
</body>
<br><br>
- ダークモード
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>JetTheme CSS 変数一覧 (ダークモード)</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
.color-box {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
vertical-align: middle;
margin-left: 5px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th style="white-space: nowrap; width: 25%;">CSS変数名</th>
<th style="width: 30%; min-width: 150px;">説明</th>
<th style="white-space: nowrap; width: 20%;">適用される要素</th>
<th style="width: 25%;">ダークモード カラーコード/色見本</th>
</tr>
</thead>
<tbody>
<tr>
<td style="white-space: nowrap;"><code>--bs-body-bg</code></td>
<td>ページ全体の背景色</td>
<td>body の背景色</td>
<td><code>hsl(210, 11%, 15%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 15%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--bs-body-color</code></td>
<td>ページ全体のテキストカラー</td>
<td>body のフォントカラー</td>
<td><code>hsl(210, 11%, 80%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 80%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-heading-color</code></td>
<td>見出しのフォントカラー</td>
<td>h1, h2, h3 など</td>
<td><code>hsl(210, 11%, 80%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 80%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-heading-link</code></td>
<td>見出しのリンクカラー</td>
<td>h1, h2 など</td>
<td><code>hsl(210, 11%, 80%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 80%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-btn-light-hover</code></td>
<td>軽量ボタンのホバー時カラー</td>
<td>.btn-light:hover</td>
<td><code>hsl(210, 11%, 85%)</code> <span class="color-box"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-border-light</code></td>
<td>全体の境界線カラー</td>
<td>border 要素</td>
<td><code>hsl(210, 11%, 30%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 30%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-bg-light</code></td>
<td>ダークテーマの背景色</td>
<td>一部の背景要素</td>
<td><code>hsl(210, 11%, 20%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 20%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-archive-bg</code></td>
<td>記事一覧の背景色</td>
<td>.archive-section など</td>
<td><code>hsl(210, 11%, 15%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 15%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-nav-color</code></td>
<td>ナビゲーションのテキストカラー</td>
<td>.nav メニューのフォント</td>
<td><code>hsl(210, 11%, 80%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 80%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-nav-hover</code></td>
<td>ナビゲーションのホバー時カラー</td>
<td>.nav a:hover</td>
<td><code>hsl(210, 11%, 85%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 85%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-nav-selected</code></td>
<td>ナビゲーションの選択時カラー</td>
<td>.nav .selected</td>
<td><code>hsl(210, 11%, 85%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 85%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-dropdown-bg</code></td>
<td>ドロップダウンメニューの背景色</td>
<td>.dropdown-menu</td>
<td><code>hsl(210, 11%, 25%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 25%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-dropdown-color</code></td>
<td>ドロップダウンメニューのフォントカラー</td>
<td>.dropdown-menu a</td>
<td><code>hsl(210, 11%, 80%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 80%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-dropdown-hover</code></td>
<td>ドロップダウン項目ホバー時カラー</td>
<td>.dropdown-menu a:hover</td>
<td><code>hsl(210, 11%, 85%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 85%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-dropdown-selected</code></td>
<td>ドロップダウン選択時カラー</td>
<td>.dropdown-menu .selected</td>
<td><code>hsl(210, 11%, 85%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 85%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-header-bg</code></td>
<td>ヘッダーの背景色</td>
<td>.header</td>
<td><code>hsl(210, 11%, 20%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 20%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-header-color</code></td>
<td>ヘッダーのフォントカラー</td>
<td>.header a</td>
<td><code>hsl(210, 11%, 80%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 80%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-header-border</code></td>
<td>ヘッダーのボーダーカラー</td>
<td>.header の境界線</td>
<td><code>hsl(210, 11%, 30%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 30%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-footer-bg</code></td>
<td>フッターの背景色</td>
<td>.footer</td>
<td><code>hsl(210, 11%, 25%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 25%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-footer-color</code></td>
<td>フッターのフォントカラー</td>
<td>.footer a</td>
<td><code>hsl(210, 11%, 60%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 60%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-footer-link</code></td>
<td>フッターのリンクカラー</td>
<td>.footer a:hover</td>
<td><code>hsl(210, 11%, 70%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 70%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-footer-border</code></td>
<td>フッターのボーダーカラー</td>
<td>.footer の境界線</td>
<td><code>hsl(210, 11%, 35%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 35%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-socket-bg</code></td>
<td>ソケット（最下部）の背景色</td>
<td>.socket</td>
<td><code>hsl(210, 11%, 10%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 10%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--jt-socket-color</code></td>
<td>ソケットのフォントカラー</td>
<td>.socket a</td>
<td><code>hsl(210, 11%, 60%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 60%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--table-bg</code></td>
<td>表の背景色</td>
<td>table</td>
<td><code>hsl(210, 11%, 25%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 25%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--table-text</code></td>
<td>表のテキストカラー</td>
<td>table td, table th</td>
<td><code>hsl(210, 11%, 80%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 80%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--table-header-bg</code></td>
<td>表のヘッダー背景色</td>
<td>table th</td>
<td><code>hsl(210, 11%, 35%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 35%);"></span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><code>--table-border</code></td>
<td>表の罫線カラー</td>
<td>table の境界線</td>
<td><code>hsl(210, 11%, 50%)</code> <span class="color-box" style="background-color: hsl(210, 11%, 50%);"></span></td>
</tr>
</tbody>
</table>
</body>
</br></br></html>
---
## スクリプト
このスクリプトは、
ランダムに生成される色（**primary**と定義）とその色を少し濃くした色（**secondary**と定義）、さらに、**primary**の
補色（**complementaryPrimary**と定義）を作り、
JetthemeのCSS色関数に割り振る処理をしている。
<details>
<summary>Chenge color Script</summary>
```javascript
<!-- 色使いをランダムに変える -->
<script>
// ランダムな色相（Hue）を生成（0～360度）
function getRandomHue() {
return Math.floor(Math.random() * 360);
}
// HSLから16進カラーコードに変換
function hslToHex(h, s, l) {
s /= 100;
l /= 100;
const k = n => (n + h / 30) % 12;
const a = s * Math.min(l, 1 - l);
const f = n =>
Math.round(255 * (l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))));
return `#${f(0).toString(16).padStart(2, '0')}${f(8).toString(16).padStart(2, '0')}${f(4).toString(16).padStart(2, '0')}`;
}
// 16進カラーコードをHSLに変換
function hexToHsl(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (!result) {
return null;
}
const r = parseInt(result[1], 16) / 255;
const g = parseInt(result[2], 16) / 255;
const b = parseInt(result[3], 16) / 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0; // achromatic
} else {
const d = max - min;
s = l < 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g > b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h * 360, s * 100, l * 100];
}
// HSLの明度を調整
function adjustLightness(hsl, amount) {
const [h, s, l] = hsl;
const newLightness = Math.max(0, Math.min(100, l + amount));
return [h, s, newLightness];
}
// HSLの色相を反転させて補色を計算
function getComplementaryHue(hue) {
return (hue + 180) % 360;
}
window.addEventListener('DOMContentLoaded', () => {
const root = document.documentElement;
// ランダムな色相
const hue = getRandomHue();
// 彩度と明度を固定（見やすくするため）
const saturation = 70;
const lightness = 60;
// primary を生成
const primary = hslToHex(hue, saturation, lightness);
// primary の補色を生成
const complementaryHue = getComplementaryHue(hue);
const complementaryPrimary = hslToHex(complementaryHue, saturation, lightness);
// primary をHSLに変換し、明度を少し下げることで secondary を生成（濃くする）
const primaryHsl = hexToHsl(primary);
const secondaryHsl = adjustLightness(primaryHsl, -15); // 明度を15%下げる
const secondary = hslToHex(...secondaryHsl);
root.style.setProperty('--jt-primary', primary);
root.style.setProperty('--jt-co-primary', complementaryPrimary); // 補色を設定
root.style.setProperty('--jt-heading-hover', primary);
root.style.setProperty('--jt-link-color', primary);
root.style.setProperty('--jt-blockquote', primary);
root.style.setProperty('--jt-btn-primary', primary);
root.style.setProperty('--jt-nav-hover', primary);
root.style.setProperty('--jt-nav-selected', primary);
root.style.setProperty('--jt-dropdown-hover', primary);
root.style.setProperty('--jt-dropdown-selected', primary);
root.style.setProperty('--jt-btn-light-hover', primary); // 元の #f46013 が適用されていた変数
root.style.setProperty('--jt-link-hover', secondary);
root.style.setProperty('--jt-btn-primary-hover', secondary);
});
</script>
```
</details>
---
## スクリプトの説明（<img alt="Google Gemini Logo" height="32" src="https://upload.wikimedia.org/wikipedia/commons/8/8a/Google_Gemini_logo.svg" style="display: inline-block; vertical-align: baseline;" width="75"/>）
### 目的:
このスクリプトは、ページが読み込まれたときに、以下の処理を行い、ウェブサイトのカスタムプロパティ（CSS変数）にランダムな色を設定します。これにより、サイトのデザインにおける主要な色合いがページを読み込むたびに変わるようになります。
### ランダムな色を作る原理:
1. **`getRandomHue()`:**
* この関数は、0から359までの整数をランダムに生成します。
* これはHSL（Hue, Saturation, Lightness）カラーモデルにおける「色相」を表します。色相は、赤、緑、青などの色の種類に対応します。
2. **`hslToHex(h, s, l)`:**
* この関数は、HSLの値を16進数のカラーコード（例: `#ff0000`）に変換します。
* `h`: 色相 (0-360)
* `s`: 彩度 (0-100%)
* `l`: 明度 (0-100%)
* 内部の計算は、HSLモデルの値をRGB（Red, Green, Blue）に変換し、さらにそれを16進数に変換する複雑な処理を行っています。
3. **`hexToHsl(hex)`:**
* この関数は、16進数のカラーコードをHSLの値の配列 `[hue, saturation, lightness]` に変換します。
* これは `hslToHex` の逆の処理を行います。
* 正規表現を使って16進数の形式をチェックし、RGBの各成分を抽出し、それらをHSLに変換しています。
4. **`adjustLightness(hsl, amount)`:**
* この関数は、与えられたHSL配列の明度（Lightness）を指定された量だけ調整します。
* `hsl`: HSLの値の配列 `[hue, saturation, lightness]`
* `amount`: 明度を増減させる量（正の数で明るく、負の数で暗く）。
* 明度の値が0から100の範囲を超えないように調整しています。
5. **`getComplementaryHue(hue)`:**
* この関数は、与えられた色相の補色を計算します。
* 補色とは、色相環で180度反対に位置する色のことで、一般的に元の色と対照的な印象を与えます。
* 色相に180を足し、360で割った余りを計算することで補色を得ています。
### メイン処理 (DOMContentLoaded イベントリスナー内):
1. **イベントリスナー登録:** `window.addEventListener('DOMContentLoaded', callback)` を実行。コールバック関数は、DOMContentLoaded イベント発生後に一度だけ実行されます。
2. **ルート要素参照:** `document.documentElement` を `root` 変数に代入。`root` は、DOMツリーのルートノード（`<html>` 要素）への参照を保持します。
3. **ランダム色相生成:** `getRandomHue()` 関数を呼び出し、返値を `hue` 変数に格納。`hue` は、0～359の整数値を持ちます。
4. **固定彩度・明度定義:** `saturation` に `70`、`lightness` に `60` を代入。これらは、HSLカラーモデルにおける彩度と明度を固定値で定義します。
5. **プライマリカラー生成:** `hslToHex(hue, saturation, lightness)` の返値を `primary` 変数に格納。`primary` は、主要な色の16進数カラーコード（String型）を保持します。
6. **補色生成:**
* `getComplementaryHue(hue)` の返値を `complementaryHue` 変数に格納。
* `hslToHex(complementaryHue, saturation, lightness)` の返値を `complementaryPrimary` 変数に格納。
`complementaryPrimary` は、補色の16進数カラーコード（String型）を保持します。
7. **セカンダリカラー生成:**
* `hexToHsl(primary)` の返値を `primaryHsl` 変数に格納。`primaryHsl` は、主要な色のHSL値の配列 `[hue, saturation, lightness]` を保持します。
* `adjustLightness(primaryHsl, -15)` の返値を `secondaryHsl` 変数に格納。`secondaryHsl` は、明度調整後のHSL値の配列を保持します。
* `hslToHex(...secondaryHsl)` の返値を `secondary` 変数に格納。`secondary` は、セカンダリカラーの16進数カラーコード（String型）を保持します。
8. **CSSカスタムプロパティ設定:**
* `root.style.setProperty('--jt-primary', primary)`: ルート要素のスタイル属性に、`--jt-primary` という名前のカスタムプロパティと、`primary` の値を設定します。
* 同様の処理を、`--jt-co-primary`, `--jt-heading-hover`, `--jt-link-color`, `--jt-blockquote`, `--jt-btn-primary`, `--jt-nav-hover`, `--jt-nav-selected`, `--jt-dropdown-hover`, `--jt-dropdown-selected`, `--jt-btn-light-hover`, `--jt-link-hover`, `--jt-btn-primary-hover` に対して、対応する色変数を用いて実行します。
### スクリプトの効果:
上記の処理により、生成された各色の16進数カラーコードが、DOMルート要素のCSSカスタムプロパティとして定義されます。これにより、スタイルシート内でこれらのカスタムプロパティを参照することで、ウェブサイトの様々な要素のスタイル（色）が、JavaScriptの実行時に動的に決定されます。
## 関連リンク
</html>