Stackの背景色をテーマ別に変更するやり方【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)
}