【L-Gate】目に優しい！完全ダークモード化CSSを公開しました 🌙

Tue, 26 May 2026 22:42:52 +0000

こんにちは～

普段からL-Gateを使っているとき、「白い背景がまぶしい」「夜間に使うと目が痛い」と感じたことはありませんか？公式のダークモード対応を待ちきれず、サイト全体を専用のダークテーマにするCSSを作成しました。

このCSSを適用するだけで、L-Gateが落ち着いた色合いに変身します。 Stylusなどのブラウザ拡張機能を使って、ぜひ快適な記録ライフを送ってください！

🎨 プレビューイメージ

背景: 深い黒〜濃いグレー (#0d1117, #161b22)
文字: 読みやすいオフホワイト (#e6edf3)
アクセント: GitHubライクなブルー (#1f6feb)
対応範囲: メイン画面、Everyday Note（表・グラフ）、モーダルウィンドウ、アンケート入力欄など

🛠️ 導入方法

1. ブラウザ拡張機能「Stylus」などをインストールする

まだ入れていない方は、以下のリンクから「Stylus」などのCSSか拡張機能をChromeやFirefoxに追加してください。

2. 新しいスタイルを作成する

L-Gateのページを開きます。
ブラウザ上部のStylusアイコンをクリックし、**「*.l-gate.net 用のスタイルを書く」**を選択します。
編集画面が開くので、名前（例: L-Gate Dark Mode）をつけます。

3. CSSコードをコピペする

下のコードブロックをすべてコピーして、Stylusの編集エリアに貼り付けてください。

/* === L-Gate Dark Mode Theme by kons10 === */

/* 全体背景 */
html,
body {
	background-color: #0d1117 !important;
	color: #e6edf3 !important;
}

/* 白背景 → ダーク */
.bg-white,
.bg-gray-100,
.bg-greeting-green {
	background-color: #161b22 !important;
}

/* テキスト色 */
.text-gray-900,
.text-lg-blue,
.text-gray-600,
.text-gray-500 {
	color: #e6edf3 !important;
}

/* メニュー背景 */
.menu-bar {
	background-color: #0d1117 !important;
	border-right: 1px solid #30363d !important;
}

/* カード類 */
.container .rounded-md,
.border,
.border-gray-300 {
	background-color: #161b22 !important;
	border-color: #30363d !important;
}

/* hover */
.hover\:bg-gray-100:hover {
	background-color: #21262d !important;
}

/* リスト項目 */
li {
	background-color: #161b22 !important;
	border-color: #30363d !important;
}

/* アイコンの fill-current を白系に */
svg {
	color: #e6edf3 !important;
	fill: currentColor !important;
}

/* プロフィールボタン */
button.bg-white {
	background-color: #21262d !important;
	color: #e6edf3 !important;
}

/* 既読バッジなどの色はそのまま維持 */
.bg-lg-blue,
.bg-lg-green,
.bg-lg-red {
	filter: brightness(0.9);
}

/* === Everyday Note Section Dark Mode === */

/* セクション全体 */
.container {
	background-color: #0d1117 !important;
	color: #e6edf3 !important;
}

/* パンくず（ホーム > 毎日の記録） */
.text-lg-blue a {
	color: #58a6ff !important;
}

/* タブ（一覧で見る / グラフで見る） */
.balloon_selected,
.balloon_unselected {
	background-color: #161b22 !important;
	color: #e6edf3 !important;
	border: 1px solid #30363d !important;
}
.balloon_selected {
	background-color: #1f6feb !important; /* 選択中は青系 */
}

/* 「新しい記録」ボタン */
.new-everyday-note-button-tooltip button {
	background-color: #1f6feb !important;
	border-color: transparent !important;
}
.new-everyday-note-button-description {
	color: #8b949e !important;
}

/* テーブル背景 */
table {
	background-color: #0d1117 !important;
	color: #e6edf3 !important;
}

/* ヘッダー行 */
thead tr {
	background-color: #161b22 !important;
	border-color: #30363d !important;
}

/* sticky left のセル（白固定されてる部分） */
th.sticky,
th.bg-white {
	background-color: #161b22 !important;
	color: #e6edf3 !important;
	border-color: #30363d !important;
}

/* テーブルのボーダー */
td,
th,
tr {
	border-color: #30363d !important;
}

/* テーブル内の灰色テキスト */
.text-gray-600,
.text-gray-700 {
	color: #8b949e !important;
}

/* 「再回答する」ボタン */
button.bg-gray-200 {
	background-color: #21262d !important;
	color: #e6edf3 !important;
}
button.bg-gray-200:hover {
	background-color: #30363d !important;
}

/* ページネーション */
.btn-pgn {
	background-color: #161b22 !important;
	color: #e6edf3 !important;
	border: 1px solid #30363d !important;
}
.btn-pgn-middle.bg-lg-blue {
	background-color: #1f6feb !important;
}
.btn-pgn:hover {
	background-color: #21262d !important;
}

/* === Modal Dark Mode === */

/* 背景の黒幕 */
.bg-gray-500.opacity-75 {
	background-color: #000 !important;
	opacity: 0.6 !important;
}

/* モーダル本体 */
.bg-white.rounded-lg,
.bg-white.flex-1,
.bg-white.p-4,
.bg-white.py-6,
.bg-white.px-4 {
	background-color: #161b22 !important;
	color: #e6edf3 !important;
}

/* モーダル上部の青帯はそのまま */
.bg-lg-blue {
	filter: brightness(0.9);
}

/* 発信元の背景 */
.bg-beaver-100 {
	background-color: #1e2630 !important;
	color: #e6edf3 !important;
}

/* グレー背景のセクション */
.bg-gray-100 {
	background-color: #1e2630 !important;
	color: #e6edf3 !important;
}

/* テキスト色 */
.text-gray-600,
.text-gray-700 {
	color: #9ba7b4 !important;
}

/* チェックボックス・ラジオの白背景 */
.inline-flex.bg-white {
	background-color: #21262d !important;
	color: #e6edf3 !important;
	border-color: #30363d !important;
}

/* 未選択のチェックボックスの枠 */
.border-gray-300 {
	border-color: #30363d !important;
}

/* 選択済み（緑）のチェックボックスはそのまま */
.bg-lg-green {
	filter: brightness(0.9);
}

/* テキストエリア */
textarea {
	background-color: #0d1117 !important;
	color: #e6edf3 !important;
	border: 1px solid #30363d !important;
}

/* 下部ボタンエリア */
.bg-gray-50 {
	background-color: #161b22 !important;
	border-color: #30363d !important;
}

/* 「回答する」ボタン（青） */
button.bg-lg-blue {
	filter: brightness(0.9);
}

/* 「とじる」ボタン（白） */
button.bg-white {
	background-color: #21262d !important;
	color: #e6edf3 !important;
	border-color: #30363d !important;
}
button.bg-white:hover {
	background-color: #30363d !important;
}

/* === Empty Questionnaire Section === */

/* セクションタイトル */
.questionnaire_header {
	color: #e6edf3 !important;
}

/* 空欄カード全体 */
.empty {
	background-color: #161b22 !important;
	border: 1px solid #30363d !important;
	color: #e6edf3 !important;
}

/* 空欄イラストの色反転（SVG） */
.empty-image svg * {
	stroke: #8b949e !important;
	fill: #8b949e !important;
}

/* 説明文 */
.empty-description {
	color: #9ba7b4 !important;
}

/* === Greeting Box === */

.bg-greeting-green {
	background-color: #1e2630 !important;
	color: #e6edf3 !important;
	border: 1px solid #30363d !important;
}

/* 日付テキスト */
.bg-greeting-green p {
	color: #9ba7b4 !important;
}

/* 挨拶テキスト */
.bg-greeting-green h2 {
	color: #e6edf3 !important;
}

/* 挿絵イラスト（明るい画像が浮くので暗めに） */
.greeting_image {
	filter: brightness(0.75) contrast(0.9);
}

4. 保存して完了！

左上の「保存」ボタンを押せば、すぐに反映されます。もし表示がおかしい場合は、ブラウザを再読み込み（F5またはCtrl+R）してみてください。