配色の事あれこれ

具体的なCSS記述は下記のとおりです。この利点は配色調整はroot部分の値を変更するだけで可能になります。

:root {
	--basic-text-color: navy;
	--basic-background-color: #eef;
	--active-background-color: #ccf;
	--outlined1-background-color: #8F77E7;
	--outlined2-background-color: #4731B3;
	--outlined3-background-color: #8F77E7;
}
body {
	color: var(--basic-text-color);
	background-color: var(--basic-background-color);
}

この方法なら配色を:rootで一括指定しているので、ページ全体のテーマ色を変えるのも楽です。

CSSファイルを指定しているlinkタグにID名を付与しておきます。

<link rel="stylesheet" href="style1.css" type="text/css" id="chg_css">

JavaScriptでcssファイルを指定しているlickタグのhref属性(プロパティ名はurl)を別のcssファイルに置換することで入れ替えられます。
下記の色指定をクリックすると切り替わります。この動作の詳細はこのページのhtmlソースを読んでください。

<input type="button" value="スタイル切り替え" onclick="changeStyle('style2.css');" />

※重要： 他の方法で上記CSS中の属性を変更すると、上記CSSより新しいDOM要素として生成されます。
つまり、次項の配色を目視で調整を行った後は、上記のスタイル切り替えを行っても反映されません。

タグ要素のstyleの“var(--basic-text-color)”を置換することで、その要素の文字色が変わります。
例えば、背景色を変更したい場合は、変更したいCSS Variablesに書き換えれば良いのです。

エレメント.style.backgroundColor = 'var(--xxxxx-xxxxxx-color)';

CSSの:rootの“--basic-text-color”の値を変更することで、“var(--basic-text-color)”で文字色を指定している箇所の文字色を動的に一括変更できます。

document.documentElement.style.setProperty('--basic-text-color', 色指定);

HSV値を触ると、どの様にこのページの色が変化するのを試してみました。色相・彩度・明度の関係が目で確かめられます。

• 指定色
  
  
  
• No.1
  
  
  
• No.2
  
  
  
• No.3
  
  
  
• No.4
  
  
  
• No.5
  
  
  
• No.6
  
  
  
• No.7
  
  
  
• No.8
  
  
  
• No.9
  
  
  
• No.10
  
  
  
• No.11
  
  
  
• No.12
  
  
  
• No.13
  
  
  
• No.14
  
  
  
• No.15
  
  
  
• No.16
  
  
  
• No.17