Stackの背景色をテーマ別に変更するやり方【Hugo】

2026-01-09 #Hugo

この記事でやること

HugoのテーマであるStackの背景色をテーマ別に変更する方法をまとめます。
※初心者が色々試してたまたま動いたやり方であり、正式なやり方か不明です。使用は自己責任でお願いします。

環境

Windows11
PowerShell
Hugo extended 0.154.2
Stack
Git

カスタムCSSの作成

custom.scssを作成します。すでに作成済みの方は、背景色の変更まで進んでください。
以下のフォルダ構成になるように作成しましょう。

yourblogname\assets\scss\custom.scss

背景色の変更

以下のコードをコピペします。

:root {
  --test-color: #f2f5f9;
  --card-color: #ffffff;

}

html[data-scheme="dark"] {
  --test-color: #181c22;
  --card-color: #1f242c;
}

body {
  background-color: var(--test-color);
  --card-background:var(--card-color)
}