Mainroad ダークモードセットアップ

2026-01-22

Raspberry Pi (Linux)

以前、blognでブログを運用していた頃も、最終的には背景がブラックのダークモードで落ち着いていた。
Hugo + Mainroad に移行後はホワイトベースがデフォルトだったが、やはり自分にはダーク系の方がしっくりくる。

今日は株取引の日でもあるのだが、相場を眺めていると、たまに阿保らしくなってくる（笑）

そこで今日は、相場チェックはそこそこにして、AIに相談しながら Mainroad のダークモード化をセットアップしてみた。

変更点は custom.css のみ。
テーマ本体には一切手を入れていない。

下記はその具体内容

● サイトをダーク系配色にする場合の custom.css 追記分
/static/css/custom.css

/* ===== Mainroad Dark Base ===== */
html, body, .container, .wrapper, .main, .sidebar, .post, .widget {
  background: #202020 !important;
  color: #d6d6d6 !important;
}

/* サイトタイトル・本文 */
.logo a, p, li {
  color: #d6d6d6 !important;
}

/* 見出し */
h1, h2, h3, h4, h5, h6 {
  color: #e6e6e6 !important;
}

/* リンク */
a {
  color: #7aa2ff !important;
}

a:hover {
  color: #a5c0ff !important;
}

/* ウィジェットタイトル下のライン：少し暗くして馴染ませる */
.widget__title {
  border-bottom: 2px solid #444 !important; /* #cccから変更 */
}

/* コードブロック：背景を少しだけ明るくして認識しやすくする */
pre, code {
  background: #2b2b2b !important; /* 全体背景より少し明るいグレー */
  color: #e6e6e6 !important;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

/* ===== Header & Titles ===== */

.header, .header * {
  color: #ADDFB3 !important;
}

.header svg {
  fill: currentColor;
}

.post__title, .post__title a {
  color: #90D7EC !important;
}

/* ===== Search Widget (Final Optimized) ===== */
/* 1. 検索フォーム全体の枠組み */
.widget-search__form {
  display: flex !important;
  background: #202020 !important;
  align-items: stretch !important;
  border: none !important;
}

/* 2. 入力欄（テキストボックス） */
.widget-search__field {
  flex-grow: 1 !important;
  background: #2b2b2b !important;
  color: #d6d6d6 !important;
  border: 1px solid #444 !important;
  border-radius: 4px 0 0 4px !important;
  padding: 10px !important;
  outline: none;
}

/* プレースホルダー（Search...の文字） */
.widget-search__field::placeholder {
  color: #888 !important;
}

/* 3. 検索ボタン */
.widget-search__submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;       /* 幅をスリムに固定 */
  min-width: 40px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  background-color: #444 !important;
  fill: #ffffff !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 4px 4px 0 !important;
  margin-left: -1px !important;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* 4. マウスを乗せた時の反応 */
.widget-search__submit:hover {
  background-color: #7aa2ff !important;
}