「CSSの変数を試してみる」のその（４）です。その（１）はこちら、その（２）はこちら、その（３）はこちらです。

背景用に使っていたsvgの色指定にCSS変数を利用し、色を変えてsvgを流用します。サンプルは、背景用の外部svgファイルをインライン用に書き換え、背景風に4つ並べたものを一組にして、全く同じコードを上下に並べています。svgのfillに使用している色を変数（c1とc2）にして、:rootで定義し、サンプルの下側は、変数の値を変更しています。

サンプル

htmlソース（上下とも、4つのsvgのうち3つを省略しています）

<div class="box">
	<svg x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50">
		<g>
			<rect style="fill:var(--c1);" width="25" height="25"/>
			<rect x="25" style="fill:var(--c2);" width="25" height="25"/>
			<polygon style="fill:var(--c2);" points="25,25 25,25 25,12.5 18.75,18.75"/>
			<polygon style="fill:var(--c2);" points="12.5,0 12.5,0 0,0 6.25,6.25"/>
			<polygon style="fill:var(--c1);" points="50,25 50,25 37.5,25 43.75,18.75"/>
			<polygon style="fill:var(--c1);" points="25.008,12.5 25.008,12.5 25.008,0 31.258,6.25"/>
		</g>
		<g>
			<g>
				<rect x="25" y="25" style="fill:var(--c1);"width="25" height="25"/>
				<polygon style="fill:var(--c2);" points="50,50 50,50 50,37.5 43.75,43.75"/>
				<polygon style="fill:var(--c2);" points="37.5,25 37.5,25 25,25 31.25,31.25"/>
			</g>
			<g>
				<rect y="25" style="fill:var(--c2);" width="25" height="25"/>
				<polygon style="fill:var(--c1);" points="25,50 25,50 12.5,50 18.75,43.75"/>
				<polygon style="fill:var(--c1);" points="0.008,37.5 0.008,37.5 0.008,25 6.258,31.25"/>
			</g>
		</g>
	</svg>
 	/*-- 中略 --*/
 </div>
 <div class="box2">
	<svg x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50">
		<g>
			<rect style="fill:var(--c1);" width="25" height="25"/>
			<rect x="25" style="fill:var(--c2);" width="25" height="25"/>
			<polygon style="fill:var(--c2);" points="25,25 25,25 25,12.5 18.75,18.75"/>
			<polygon style="fill:var(--c2);" points="12.5,0 12.5,0 0,0 6.25,6.25"/>
			<polygon style="fill:var(--c1);" points="50,25 50,25 37.5,25 43.75,18.75"/>
			<polygon style="fill:var(--c1);" points="25.008,12.5 25.008,12.5 25.008,0 31.258,6.25"/>
		</g>
		<g>
			<g>
				<rect x="25" y="25" style="fill:var(--c1);"width="25" height="25"/>
				<polygon style="fill:var(--c2);" points="50,50 50,50 50,37.5 43.75,43.75"/>
				<polygon style="fill:var(--c2);" points="37.5,25 37.5,25 25,25 31.25,31.25"/>
			</g>
			<g>
				<rect y="25" style="fill:var(--c2);" width="25" height="25"/>
				<polygon style="fill:var(--c1);" points="25,50 25,50 12.5,50 18.75,43.75"/>
				<polygon style="fill:var(--c1);" points="0.008,37.5 0.008,37.5 0.008,25 6.258,31.25"/>
			</g>
		</g>
	</svg>
 	/*-- 中略 --*/
 </div>

CSSソース

:root {
	--c1: #fff;
	--c2: #bfe6f7;
	}
.box,.box2 {
	background:#fff;
	margin-bottom:10px;
	}
.box2 {
	--c1: #7fffbf;
	--c2: #ffa;
	}