Mainroad ダークモードセットアップ
以前、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;
}
