/* src/public/css/theme-dark.css * * ダークモードの配色。 * * 💡 使い方 * が付いているときだけ効きます。 * 付け外しは /settings（設定ページ）と、layouts/app.blade.php の * 先頭にある小さなスクリプトが担当します。 * * 💡 読み込む場所に注意 * 各ページのCSSは @section('content') の中で読み込まれるため、 * このファイルはそれより後（layouts/app.blade.php の本文の下）に置いています。 * 先に読み込むと、ページ側の明るい配色に上書きされてしまいます。 * * 💡 色の決め方 * 背景は「奥から手前へ」少しずつ明るくして、重なりが分かるようにしています。 * --dk-bg … 画面全体の背景（一番奥） * --dk-surface … カード・箱（本文が乗るところ） * --dk-raised … 箱の中でさらに区切られたところ（結果欄・入力欄など） * 文字は白ではなく少し灰色寄りにして、まぶしさを抑えています。 */ :root[data-theme="dark"] { --dk-bg: #12161c; --dk-surface: #1b212b; --dk-raised: #232b37; --dk-border: #333d4d; --dk-text: #e3e8ef; --dk-text-sub: #a3adbb; --dk-accent: #7aa7e9; --dk-accent-strong: #5b8bd4; --dk-danger: #f0787f; } /* === 土台 === */ :root[data-theme="dark"] body { background-color: var(--dk-bg); color: var(--dk-text); } /* === ヘッダー・メニュー・フッター === */ :root[data-theme="dark"] .site-header { background: linear-gradient(135deg, #16203a 0%, #1d2c4d 100%); } :root[data-theme="dark"] .breadcrumbs-wrapper { background: var(--dk-surface); border-bottom-color: var(--dk-border); } :root[data-theme="dark"] .breadcrumbs, :root[data-theme="dark"] .breadcrumbs li, :root[data-theme="dark"] .breadcrumbs a { color: var(--dk-text-sub); } :root[data-theme="dark"] .site-menu { background: var(--dk-surface); color: var(--dk-text); } :root[data-theme="dark"] .menu-head-title { color: var(--dk-accent); } :root[data-theme="dark"] .menu-links { border-top-color: var(--dk-border); border-bottom-color: var(--dk-border); } :root[data-theme="dark"] .menu-links a, :root[data-theme="dark"] .menu-tools a { color: var(--dk-text); } :root[data-theme="dark"] .menu-links a:hover, :root[data-theme="dark"] .menu-tools a:hover { background: var(--dk-raised); } :root[data-theme="dark"] .menu-links i, :root[data-theme="dark"] .menu-tools i { color: var(--dk-accent); } :root[data-theme="dark"] .menu-search-box { background: var(--dk-raised); border-color: var(--dk-border); } :root[data-theme="dark"] .menu-search-input { color: var(--dk-text); } :root[data-theme="dark"] .site-footer { background: #0e1219; color: var(--dk-text-sub); } /* === カード・箱（本文が乗るところ） === */ :root[data-theme="dark"] .calc-box, :root[data-theme="dark"] .history-box, :root[data-theme="dark"] .settings-card, :root[data-theme="dark"] .tool-card, :root[data-theme="dark"] .blog-article, :root[data-theme="dark"] .blog-card-link, :root[data-theme="dark"] .blog-lead, :root[data-theme="dark"] .blog-empty, :root[data-theme="dark"] .news-card, :root[data-theme="dark"] .news-detail, :root[data-theme="dark"] .app-detail, :root[data-theme="dark"] .price-table-section, :root[data-theme="dark"] .app-index-section, :root[data-theme="dark"] .trend-section, :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .bulk-modal-content, :root[data-theme="dark"] .cmt-box, :root[data-theme="dark"] .tool-usage, :root[data-theme="dark"] .policy-box, :root[data-theme="dark"] .content-box { background: var(--dk-surface); color: var(--dk-text); border-color: var(--dk-border); } /* === 箱の中でさらに区切られたところ === */ :root[data-theme="dark"] .result-box, :root[data-theme="dark"] .slant-section, :root[data-theme="dark"] .bonus-section, :root[data-theme="dark"] .bulk-panel, :root[data-theme="dark"] .option-toggles, :root[data-theme="dark"] .tool-options, :root[data-theme="dark"] .pc-options, :root[data-theme="dark"] .options-panel, :root[data-theme="dark"] .addon-area, :root[data-theme="dark"] .settings-storage, :root[data-theme="dark"] .official-note, :root[data-theme="dark"] .blog-toc, :root[data-theme="dark"] .cmt-faq-a, :root[data-theme="dark"] .cmt-item { background: var(--dk-raised); color: var(--dk-text); border-color: var(--dk-border); } /* === 見出し === */ :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4 { color: var(--dk-text); } /* もともと濃い青だった見出しは、暗い背景でも読める明るい青にする */ :root[data-theme="dark"] .history-box h3, :root[data-theme="dark"] .settings-card-title, :root[data-theme="dark"] .price-table-title, :root[data-theme="dark"] .tool-list-section h2, :root[data-theme="dark"] .input-group label, :root[data-theme="dark"] .menu-group-title, :root[data-theme="dark"] .filter-label, :root[data-theme="dark"] .res-title, :root[data-theme="dark"] .tool-usage h3, :root[data-theme="dark"] .tool-usage h4 { color: var(--dk-accent); } /* === 入力欄 === */ :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="number"], :root[data-theme="dark"] input[type="date"], :root[data-theme="dark"] input[type="url"], :root[data-theme="dark"] input[type="search"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] select, :root[data-theme="dark"] textarea, :root[data-theme="dark"] .input-group input[type="text"], :root[data-theme="dark"] .input-group input[type="number"], :root[data-theme="dark"] .select-filter, :root[data-theme="dark"] .slant-field input, :root[data-theme="dark"] .opt-select { background: var(--dk-raised); color: var(--dk-text); border-color: var(--dk-border); } :root[data-theme="dark"] ::placeholder { color: #7b8798; } /* === 表 === */ :root[data-theme="dark"] .price-table, :root[data-theme="dark"] .age-chart-table, :root[data-theme="dark"] .blog-body table { color: var(--dk-text); } :root[data-theme="dark"] .price-table th, :root[data-theme="dark"] .age-chart-table th, :root[data-theme="dark"] .blog-body th { background: #2b3444; color: var(--dk-text); border-color: var(--dk-border); } :root[data-theme="dark"] .price-table td, :root[data-theme="dark"] .age-chart-table td, :root[data-theme="dark"] .blog-body td { border-color: var(--dk-border); } :root[data-theme="dark"] .age-chart-table tr:nth-child(even), :root[data-theme="dark"] .app-index-row:hover, :root[data-theme="dark"] .age-chart-table tr:hover { background: var(--dk-raised); } /* === 枠線・区切り線 === */ :root[data-theme="dark"] .result-sub, :root[data-theme="dark"] .result-grid, :root[data-theme="dark"] .history-item, :root[data-theme="dark"] .slant-controls, :root[data-theme="dark"] .result-slant-card, :root[data-theme="dark"] .bulk-panel-foot, :root[data-theme="dark"] .option-toggles.is-divided, :root[data-theme="dark"] .settings-row, :root[data-theme="dark"] .cmt-tabs, :root[data-theme="dark"] .source-tabs { border-color: var(--dk-border); } /* === 補助的な文字 === */ :root[data-theme="dark"] .settings-row-note, :root[data-theme="dark"] .settings-card-note, :root[data-theme="dark"] .input-note, :root[data-theme="dark"] .history-time, :root[data-theme="dark"] .history-empty, :root[data-theme="dark"] .slant-unit, :root[data-theme="dark"] .unit-symbol, :root[data-theme="dark"] .result-item span, :root[data-theme="dark"] .menu-search-label, :root[data-theme="dark"] .menu-search-empty, :root[data-theme="dark"] .pack-empty, :root[data-theme="dark"] .cmt-date, :root[data-theme="dark"] .blog-card-meta, :root[data-theme="dark"] .tool-card p { color: var(--dk-text-sub); } /* === 目立たせている数値・リンク === */ :root[data-theme="dark"] .res-big-val, :root[data-theme="dark"] .result-item strong, :root[data-theme="dark"] .res-val { color: var(--dk-accent); } :root[data-theme="dark"] a { color: var(--dk-accent); } :root[data-theme="dark"] .back-btn, :root[data-theme="dark"] .shop-link { color: var(--dk-accent); } /* === ボタン === */ /* 濃い青のボタンは、暗い背景でも浮くよう少し明るくする */ :root[data-theme="dark"] .btn-calc, :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-bulk-add, :root[data-theme="dark"] .btn { background-color: var(--dk-accent-strong); color: #ffffff; } :root[data-theme="dark"] .btn-calc:hover, :root[data-theme="dark"] .btn-primary:hover, :root[data-theme="dark"] .btn-bulk-add:hover, :root[data-theme="dark"] .btn:hover { background-color: #6f9ce0; } /* 白地に枠線だけのボタン */ :root[data-theme="dark"] .btn-clear-tool, :root[data-theme="dark"] .btn-slant, :root[data-theme="dark"] .btn-bulk-open, :root[data-theme="dark"] .btn-bulk-cancel, :root[data-theme="dark"] .btn-reset-filter, :root[data-theme="dark"] .btn-trend, :root[data-theme="dark"] .btn-row-trend, :root[data-theme="dark"] .btn-row-delete, :root[data-theme="dark"] .tool-options-toggle, :root[data-theme="dark"] .pc-options-toggle { background: var(--dk-raised); color: var(--dk-text); border-color: var(--dk-border); } :root[data-theme="dark"] .btn-clear-tool:hover, :root[data-theme="dark"] .btn-slant:hover, :root[data-theme="dark"] .btn-bulk-open:hover, :root[data-theme="dark"] .btn-bulk-cancel:hover, :root[data-theme="dark"] .btn-reset-filter:hover:not(:disabled), :root[data-theme="dark"] .btn-trend:hover, :root[data-theme="dark"] .tool-options-toggle:hover, :root[data-theme="dark"] .pc-options-toggle:hover { background: #2c3646; } /* 選ばれているタブ（塗りつぶし型） */ /* 💡 .source-tab はここに入れません。あちらは下線だけで選択を示す形なので、 塗りつぶすと元のデザインと変わってしまいます（色は下の生成分が担当します）。 */ :root[data-theme="dark"] .cmt-tab.is-active { background: var(--dk-accent-strong); color: #ffffff; border-color: var(--dk-accent-strong); } /* 削除など、注意してほしいボタン */ :root[data-theme="dark"] .clear-history-lnk, :root[data-theme="dark"] .btn-settings-danger { color: var(--dk-danger); } :root[data-theme="dark"] .btn-settings-danger { border-color: var(--dk-danger); } /* === そのほか === */ :root[data-theme="dark"] .highlight-text { color: #f0a860; } :root[data-theme="dark"] .modal-overlay, :root[data-theme="dark"] .bulk-modal, :root[data-theme="dark"] .menu-overlay { background: rgba(0, 0, 0, 0.65); } /* 画像は暗くしすぎると分かりにくいため、ほんの少しだけ落ち着かせる */ :root[data-theme="dark"] .blog-card-thumb img, :root[data-theme="dark"] .app-detail-img { filter: brightness(0.92); } /* ============================================================ * ここから下は、各ページのCSSから機械的に作った打ち消しです。 * * 💡 明るい背景・暗い文字を指定しているところを、暗い配色に置き換えています。 * 手で並べると必ず取りこぼすため、public/css/*.css を読んで作りました。 * お知らせ枠のような色付きの面は、色味を残したまま暗くしています。 * 💡 ページのCSSに色を足したときは、ここにも同じ打ち消しが必要です。 * （設定ページでダークにして、読みにくいところが無いか確かめてください） * ============================================================ */ /* --- 背景 --- */ :root[data-theme="dark"] .summary-card { background-color: var(--dk-surface); } :root[data-theme="dark"] .search-section { background-color: var(--dk-surface); } :root[data-theme="dark"] .tab-btn:hover { background-color: #182839; } :root[data-theme="dark"] .form-select { background-color: var(--dk-surface); } :root[data-theme="dark"] .form-input { background-color: var(--dk-surface); } :root[data-theme="dark"] .search-result-panel { background-color: #163b21; } :root[data-theme="dark"] .result-item { background-color: var(--dk-surface); } :root[data-theme="dark"] .table-section { background-color: var(--dk-surface); } :root[data-theme="dark"] .age-chart-table th { background-color: #182839; } :root[data-theme="dark"] .age-chart-table tr:nth-child(even) { background-color: #182839; } :root[data-theme="dark"] .age-chart-table tr:hover { background-color: #182839; } :root[data-theme="dark"] .age-chart-table tr.highlight-row { background-color: #16263b; } :root[data-theme="dark"] .draw-side { background-color: var(--dk-surface); } :root[data-theme="dark"] .bingo-ball-inner { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-draw:disabled { background-color: var(--dk-raised); } :root[data-theme="dark"] .board-side { background-color: var(--dk-surface); } :root[data-theme="dark"] .board-number { background-color: var(--dk-surface); } :root[data-theme="dark"] .opt-bingo-btn { background-color: var(--dk-surface); } :root[data-theme="dark"] .opt-bingo-btn:hover { background-color: #16233b; } :root[data-theme="dark"] .edit-hint { background-color: #3b3216; } :root[data-theme="dark"] #bingo-fullscreen-target:fullscreen { background-color: var(--dk-surface); } :root[data-theme="dark"] #bingo-fullscreen-target.pseudo-fullscreen { background-color: var(--dk-surface); } :root[data-theme="dark"] .blog-banner { background-color: var(--dk-surface); } :root[data-theme="dark"] .blog-banner-badge { background-color: #172539; } :root[data-theme="dark"] .blog-lead { background-color: var(--dk-surface); } :root[data-theme="dark"] .blog-empty { background-color: var(--dk-surface); } :root[data-theme="dark"] .blog-category-chip { background-color: var(--dk-surface); } :root[data-theme="dark"] .blog-category-chip:hover { background-color: #172539; } :root[data-theme="dark"] .blog-card-link { background-color: var(--dk-surface); } :root[data-theme="dark"] .blog-card-thumb { background-color: #172539; } :root[data-theme="dark"] .blog-card-category { background-color: #172539; } :root[data-theme="dark"] .blog-article { background-color: var(--dk-surface); } :root[data-theme="dark"] .blog-article-category { background-color: #172539; } :root[data-theme="dark"] .blog-toc { background-color: #16253b; } :root[data-theme="dark"] .blog-body h2 { background-color: #16253b; } :root[data-theme="dark"] .blog-body blockquote { background-color: #16253b; } :root[data-theme="dark"] .blog-body th { background-color: #172539; } :root[data-theme="dark"] .blog-body code { background-color: #192637; } :root[data-theme="dark"] .blog-tags li { background-color: #192637; } :root[data-theme="dark"] .calc-box { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-clear-tool { background-color: var(--dk-raised); } :root[data-theme="dark"] .btn-clear-tool:hover { background-color: var(--dk-raised); } :root[data-theme="dark"] .result-box { background-color: var(--dk-surface); } :root[data-theme="dark"] .res-status { background-color: var(--dk-raised); } :root[data-theme="dark"] .res-status.status-under { background-color: #162b3b; } :root[data-theme="dark"] .res-status.status-normal { background-color: #18381b; } :root[data-theme="dark"] .res-status.status-over1 { background-color: #3b3216; } :root[data-theme="dark"] .res-status.status-over2 { background-color: #3b2c16; } :root[data-theme="dark"] .res-status.status-over3 { background-color: #3b1a16; } :root[data-theme="dark"] .res-status.status-over4 { background-color: #3b161b; } :root[data-theme="dark"] .history-box { background-color: var(--dk-surface); } :root[data-theme="dark"] .target-card { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-toggle-pfc { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-toggle-pfc:hover { background-color: #16243b; } :root[data-theme="dark"] .pfc-detail-link { background-color: #16233b; } :root[data-theme="dark"] .pfc-detail-link:hover { background-color: #16243b; } :root[data-theme="dark"] .slant-section { background-color: #182839; } :root[data-theme="dark"] .btn-bulk-open { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-bulk-open:hover { background-color: #16233b; } :root[data-theme="dark"] .bulk-modal-content { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-bulk-cancel { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-bulk-cancel:hover { background-color: #182839; } :root[data-theme="dark"] .btn-slant { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-slant:hover { background-color: #1b2635; } :root[data-theme="dark"] .btn-slant-remove:hover { background-color: #3b1616; } :root[data-theme="dark"] .btn-slant-add:hover { background-color: #16233b; } :root[data-theme="dark"] .car-select-box { background-color: var(--dk-surface); } :root[data-theme="dark"] .car-fetch-result { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-apply-car:disabled { background-color: var(--dk-raised); } :root[data-theme="dark"] .btn-restore-history { background-color: #16253b; } :root[data-theme="dark"] .btn-restore-history:hover { background-color: #16243b; } :root[data-theme="dark"] .gas-toggles { background-color: #182839; } :root[data-theme="dark"] .btn-dest { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-dest:hover { background-color: #16233b; } :root[data-theme="dark"] .dest-total { background-color: #16233b; } :root[data-theme="dark"] .bonus-section { background-color: #182839; } :root[data-theme="dark"] .input-group input[readonly] { background-color: var(--dk-surface); } :root[data-theme="dark"] .official-note { background-color: #16273b; } :root[data-theme="dark"] .select-filter { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-reset-filter { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-reset-filter:hover:not(:disabled) { background-color: #16273b; } :root[data-theme="dark"] .app-detail { background-color: var(--dk-surface); } :root[data-theme="dark"] .app-detail-img { background-color: #1b2635; } :root[data-theme="dark"] .app-index-row:hover { background-color: #16273b; } :root[data-theme="dark"] .app-index-row:focus-visible { background-color: #16273b; } :root[data-theme="dark"] .price-table-wrap { background-color: var(--dk-surface); } :root[data-theme="dark"] .price-table th { background-color: #182839; } :root[data-theme="dark"] .price-table tbody tr:hover { background-color: #182839; } :root[data-theme="dark"] .btn-row-trend { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-row-delete { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-row-trend:hover { background-color: #16273b; } :root[data-theme="dark"] .btn-row-delete:hover { background-color: #3b1619; } :root[data-theme="dark"] .btn-trend { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-trend:hover { background-color: #16273b; } :root[data-theme="dark"] .trend-section { background-color: var(--dk-surface); } :root[data-theme="dark"] .modal-content { background-color: var(--dk-surface); } :root[data-theme="dark"] .pfc-card { background-color: var(--dk-surface); } :root[data-theme="dark"] .custom-pfc-container { background-color: var(--dk-surface); } :root[data-theme="dark"] .pc-options { background-color: var(--dk-surface); } :root[data-theme="dark"] .pc-options-toggle { background-color: var(--dk-surface); } :root[data-theme="dark"] .pc-options-toggle:hover { background-color: #16233b; } :root[data-theme="dark"] .unit-select { background-color: #182839; } :root[data-theme="dark"] .unit-note { background-color: var(--dk-surface); } :root[data-theme="dark"] .compare-card { background-color: var(--dk-surface); } :root[data-theme="dark"] .compare-card.winner { background-color: #163b21; } :root[data-theme="dark"] .count-group input:disabled { background-color: var(--dk-surface); } :root[data-theme="dark"] .clock-settings-panel { background-color: var(--dk-surface); } :root[data-theme="dark"] .preset-btn { background-color: #182839; } :root[data-theme="dark"] .settings-select { background-color: #182839; } :root[data-theme="dark"] .alarm-sound-btn { background-color: #182839; } :root[data-theme="dark"] .settings-btn { background-color: #182839; } :root[data-theme="dark"] .option-select-wrap select option { background-color: var(--dk-surface); } :root[data-theme="dark"] .cmt-section { background-color: var(--dk-surface); } :root[data-theme="dark"] .cmt-flash-ok { background-color: #163a26; } :root[data-theme="dark"] .cmt-flash-hold { background-color: #3b2f16; } :root[data-theme="dark"] .cmt-flash-error { background-color: #3b1616; } :root[data-theme="dark"] .cmt-tab { background-color: #192338; } :root[data-theme="dark"] .cmt-tab:hover { background-color: #172439; } :root[data-theme="dark"] .cmt-input { background-color: #16223b; } :root[data-theme="dark"] .cmt-textarea { background-color: #16223b; } :root[data-theme="dark"] .cmt-input:focus { background-color: var(--dk-surface); } :root[data-theme="dark"] .cmt-textarea:focus { background-color: var(--dk-surface); } :root[data-theme="dark"] .cmt-note { background-color: #16223b; } :root[data-theme="dark"] .cmt-faq-item { background-color: #16223b; } :root[data-theme="dark"] .dice-container { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-roll:disabled { background-color: var(--dk-raised); } :root[data-theme="dark"] .legal-content { background-color: var(--dk-surface); } :root[data-theme="dark"] .legal-content .legal-lead { background-color: var(--dk-surface); } :root[data-theme="dark"] .editor-sidebar { background-color: var(--dk-surface); } :root[data-theme="dark"] .file-input-group { background-color: #182839; } :root[data-theme="dark"] .file-input-group.dragover { background-color: #3b3116; } :root[data-theme="dark"] .type-btn span { background-color: #182839; } :root[data-theme="dark"] .btn-sub-action { background-color: #182839; } :root[data-theme="dark"] .btn-sub-action:hover { background-color: #1b2635; } :root[data-theme="dark"] .btn-footer-tool { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-footer-tool:hover { background-color: #182839; } :root[data-theme="dark"] .btn-footer-tool.danger:hover { background-color: #3b1616; } :root[data-theme="dark"] .canvas-wrapper { background-color: #182839; } :root[data-theme="dark"] #editor-canvas { background-color: var(--dk-surface); } :root[data-theme="dark"] .news-card { background-color: var(--dk-surface); } :root[data-theme="dark"] .news-article { background-color: var(--dk-surface); } :root[data-theme="dark"] .editor-side { background-color: var(--dk-surface); } :root[data-theme="dark"] .logo-upload-wrapper { background-color: #182839; } :root[data-theme="dark"] .btn-clear-logo { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-clear-logo:hover { background-color: #3b1616; } :root[data-theme="dark"] .form-group input { background-color: var(--dk-surface); } :root[data-theme="dark"] .form-group select { background-color: var(--dk-surface); } :root[data-theme="dark"] .real-receipt { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-remove-item { background-color: #3b1616; } :root[data-theme="dark"] .btn-add-row { background-color: #182839; } :root[data-theme="dark"] .btn-add-row:hover { background-color: #182839; } :root[data-theme="dark"] .related-tools { background-color: var(--dk-surface); } :root[data-theme="dark"] .related-tool-card { background-color: var(--dk-surface); } :root[data-theme="dark"] .related-tool-card:hover { background-color: #16253b; } :root[data-theme="dark"] .related-tool-icon { background-color: #16233b; } :root[data-theme="dark"] .options-panel { background-color: var(--dk-surface); } :root[data-theme="dark"] .opt-select { background-color: #182839; } :root[data-theme="dark"] .opt-icon-btn { background-color: var(--dk-surface); } :root[data-theme="dark"] .opt-icon-btn:hover { background-color: #192837; } :root[data-theme="dark"] .config-side { background-color: var(--dk-surface); } :root[data-theme="dark"] .wheel-side { background-color: var(--dk-surface); } :root[data-theme="dark"] .speed-control-wrapper { background-color: #182839; } :root[data-theme="dark"] .countdown-info { background-color: #182839; } :root[data-theme="dark"] .btn-countdown-reset { background-color: var(--dk-surface); } :root[data-theme="dark"] .history-list { background-color: #182839; } :root[data-theme="dark"] .btn-history-clear { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-history-clear:hover { background-color: #1d2733; } :root[data-theme="dark"] .btn-spin:disabled { background-color: #1d2733; } :root[data-theme="dark"] .btn-full-reset { background-color: var(--dk-surface); } :root[data-theme="dark"] .settings-lead { background-color: #16233b; } :root[data-theme="dark"] .settings-card { background-color: var(--dk-surface); } :root[data-theme="dark"] .settings-storage { background-color: #182839; } :root[data-theme="dark"] .btn-settings-danger { background-color: var(--dk-surface); } :root[data-theme="dark"] .settings-message { background-color: #18381b; } :root[data-theme="dark"] .site-menu { background-color: var(--dk-surface); } :root[data-theme="dark"] .menu-search-box { background-color: var(--dk-surface); } :root[data-theme="dark"] .menu-links a:hover { background-color: #1a2737; } :root[data-theme="dark"] .menu-tools a:hover { background-color: #1a2737; } :root[data-theme="dark"] body { background-color: var(--dk-surface); } :root[data-theme="dark"] .tool-card { background-color: var(--dk-surface); } :root[data-theme="dark"] .tool-icon { background-color: var(--dk-raised); } :root[data-theme="dark"] .breadcrumbs-wrapper { background-color: var(--dk-surface); } :root[data-theme="dark"] .tool-card-toggle { background-color: var(--dk-raised); } :root[data-theme="dark"] .pseudo-fullscreen { background-color: var(--dk-surface); } :root[data-theme="dark"] .tool-options { background-color: var(--dk-surface); } :root[data-theme="dark"] .tool-options-toggle { background-color: var(--dk-surface); } :root[data-theme="dark"] .tool-options-toggle:hover { background-color: #16233b; } :root[data-theme="dark"] .btn-reset { background-color: var(--dk-surface); } :root[data-theme="dark"] .news-section { background-color: var(--dk-surface); } :root[data-theme="dark"] .btn-tool { background-color: #182839; } :root[data-theme="dark"] .btn-tool:hover { background-color: #1b2635; } :root[data-theme="dark"] .btn-danger:hover { background-color: #3b1616; } :root[data-theme="dark"] .addon-area { background-color: #182839; } :root[data-theme="dark"] .keyword-result { background-color: var(--dk-surface); } :root[data-theme="dark"] .result-card { background-color: var(--dk-surface); } :root[data-theme="dark"] .tool-usage { background-color: var(--dk-surface); } :root[data-theme="dark"] .tool-usage-summary { background-color: #16263b; } :root[data-theme="dark"] .tool-usage-summary:hover { background-color: #16253b; } :root[data-theme="dark"] .yt-lead { background-color: var(--dk-surface); } :root[data-theme="dark"] .yt-card { background-color: var(--dk-surface); } :root[data-theme="dark"] .yt-tags li { background-color: #172539; } :root[data-theme="dark"] .yt-banner { background-color: var(--dk-surface); } /* --- 文字 --- */ :root[data-theme="dark"] .summary-label { color: var(--dk-text-sub); } :root[data-theme="dark"] .zodiac-val { color: var(--dk-text); } :root[data-theme="dark"] .animal-val { color: var(--dk-text-sub); } :root[data-theme="dark"] .section-label { color: var(--dk-accent); } :root[data-theme="dark"] .tab-btn { color: var(--dk-text-sub); } :root[data-theme="dark"] .tab-btn:hover { color: var(--dk-accent); } :root[data-theme="dark"] .tab-btn.active { color: var(--dk-accent); } :root[data-theme="dark"] .input-inline label { color: var(--dk-text-sub); } :root[data-theme="dark"] .unit { color: var(--dk-text-sub); } :root[data-theme="dark"] .result-content { color: var(--dk-text); } :root[data-theme="dark"] .sort-order-label { color: var(--dk-text-sub); } :root[data-theme="dark"] .table-note { color: var(--dk-text-sub); } :root[data-theme="dark"] .age-chart-table th { color: var(--dk-text-sub); } :root[data-theme="dark"] .bingo-ball-inner { color: var(--dk-text); } :root[data-theme="dark"] .btn-reset { color: var(--dk-text-sub); } :root[data-theme="dark"] .board-side h3 { color: var(--dk-accent); } :root[data-theme="dark"] .opt-bingo-btn { color: var(--dk-accent); } :root[data-theme="dark"] .edit-hint .hint-drawn { color: var(--dk-accent); } :root[data-theme="dark"] .bingo-remain { color: var(--dk-text-sub); } :root[data-theme="dark"] .blog-banner-text h2 { color: var(--dk-accent); } :root[data-theme="dark"] .blog-banner-text p { color: var(--dk-text-sub); } :root[data-theme="dark"] .blog-banner-badge { color: var(--dk-accent); } :root[data-theme="dark"] .blog-lead { color: var(--dk-text); } :root[data-theme="dark"] .blog-lead strong { color: var(--dk-accent); } :root[data-theme="dark"] .blog-empty h2 { color: var(--dk-accent); } :root[data-theme="dark"] .blog-empty p { color: var(--dk-text-sub); } :root[data-theme="dark"] .blog-topics li { color: var(--dk-text); } :root[data-theme="dark"] .blog-topics li::before { color: var(--dk-accent); } :root[data-theme="dark"] .blog-category-chip { color: var(--dk-accent); } :root[data-theme="dark"] .blog-card-category { color: var(--dk-accent); } :root[data-theme="dark"] .blog-card-title { color: var(--dk-accent); } :root[data-theme="dark"] .blog-card-text { color: var(--dk-text-sub); } :root[data-theme="dark"] .blog-article-category { color: var(--dk-accent); } :root[data-theme="dark"] .blog-article-title { color: var(--dk-accent); } :root[data-theme="dark"] .blog-toc-title { color: var(--dk-accent); } :root[data-theme="dark"] .blog-toc-item a { color: var(--dk-accent); } :root[data-theme="dark"] .blog-body { color: var(--dk-text); } :root[data-theme="dark"] .blog-body h2 { color: var(--dk-accent); } :root[data-theme="dark"] .blog-body h3 { color: var(--dk-accent); } :root[data-theme="dark"] .blog-body a { color: var(--dk-accent); } :root[data-theme="dark"] .blog-body strong { color: var(--dk-accent); } :root[data-theme="dark"] .blog-body blockquote { color: var(--dk-text); } :root[data-theme="dark"] .blog-body th { color: var(--dk-accent); } :root[data-theme="dark"] .blog-related-title { color: var(--dk-accent); } :root[data-theme="dark"] .radio-label { color: var(--dk-accent); } :root[data-theme="dark"] .input-group label { color: var(--dk-accent); } :root[data-theme="dark"] .btn-clear-tool { color: var(--dk-text); } :root[data-theme="dark"] .res-highlight { color: var(--dk-accent); } :root[data-theme="dark"] .res-status { color: var(--dk-text); } :root[data-theme="dark"] .history-box h3 { color: var(--dk-accent); } :root[data-theme="dark"] .history-time { color: var(--dk-text-sub); } :root[data-theme="dark"] .history-empty { color: var(--dk-text-sub); } :root[data-theme="dark"] .res-primary { color: var(--dk-accent); } :root[data-theme="dark"] .target-calorie-box h4 { color: var(--dk-accent); } :root[data-theme="dark"] .card-sub { color: var(--dk-text-sub); } :root[data-theme="dark"] .btn-toggle-pfc { color: var(--dk-accent); } :root[data-theme="dark"] .pfc-detail-link { color: var(--dk-accent); } :root[data-theme="dark"] .input-label { color: var(--dk-accent); } :root[data-theme="dark"] .unit-symbol { color: var(--dk-text-sub); } :root[data-theme="dark"] .res-title { color: var(--dk-text-sub); } :root[data-theme="dark"] .res-big-val { color: var(--dk-accent); } :root[data-theme="dark"] .result-sub { color: var(--dk-text-sub); } :root[data-theme="dark"] .check-label { color: var(--dk-text); } :root[data-theme="dark"] .btn-bulk-open { color: var(--dk-accent); } :root[data-theme="dark"] .bulk-modal-header h3 { color: var(--dk-accent); } :root[data-theme="dark"] .bulk-modal-header .btn-close { color: var(--dk-text-sub); } :root[data-theme="dark"] .bulk-modal-header .btn-close:hover { color: var(--dk-text-sub); } :root[data-theme="dark"] .bulk-panel-title { color: var(--dk-text-sub); } :root[data-theme="dark"] .bulk-link { color: var(--dk-accent); } :root[data-theme="dark"] .bulk-item { color: var(--dk-text); } :root[data-theme="dark"] .bulk-item.is-added { color: var(--dk-text-sub); } :root[data-theme="dark"] .bulk-item-added { color: var(--dk-text-sub); } :root[data-theme="dark"] .btn-bulk-cancel { color: var(--dk-text-sub); } :root[data-theme="dark"] .slant-mode-label { color: var(--dk-text); } :root[data-theme="dark"] .slant-head { color: var(--dk-text-sub); } :root[data-theme="dark"] .slant-unit { color: var(--dk-text-sub); } :root[data-theme="dark"] .btn-slant { color: var(--dk-text-sub); } :root[data-theme="dark"] .btn-slant-add { color: var(--dk-accent); } :root[data-theme="dark"] .car-select-title { color: var(--dk-accent); } :root[data-theme="dark"] .car-select-item label { color: var(--dk-text); } :root[data-theme="dark"] .gas-toggles .check-label { color: var(--dk-text); } :root[data-theme="dark"] .btn-dest { color: var(--dk-accent); } :root[data-theme="dark"] .dest-row-label { color: var(--dk-text-sub); } :root[data-theme="dark"] .dest-unit { color: var(--dk-text-sub); } :root[data-theme="dark"] .dest-total { color: var(--dk-text); } :root[data-theme="dark"] .dest-total strong { color: var(--dk-accent); } :root[data-theme="dark"] .input-note { color: var(--dk-text-sub); } :root[data-theme="dark"] .input-group input[readonly] { color: var(--dk-text); } :root[data-theme="dark"] .result-item span { color: var(--dk-text-sub); } :root[data-theme="dark"] .source-tab { color: var(--dk-text-sub); } :root[data-theme="dark"] .source-tab:hover { color: var(--dk-accent); } :root[data-theme="dark"] .source-tab.is-active { color: var(--dk-accent); } :root[data-theme="dark"] .official-note { color: var(--dk-text); } :root[data-theme="dark"] .filter-label { color: var(--dk-text-sub); } :root[data-theme="dark"] .btn-reset-filter { color: var(--dk-text-sub); } :root[data-theme="dark"] .btn-reset-filter:hover:not(:disabled) { color: var(--dk-accent); } :root[data-theme="dark"] .app-detail-body h3 { color: var(--dk-accent); } :root[data-theme="dark"] .app-index-table .cell-app-name { color: var(--dk-accent); } :root[data-theme="dark"] .app-index-table .cell-app-date { color: var(--dk-text-sub); } :root[data-theme="dark"] .price-table-title { color: var(--dk-accent); } :root[data-theme="dark"] .price-table th { color: var(--dk-text-sub); } :root[data-theme="dark"] .price-table .cell-name { color: var(--dk-accent); } :root[data-theme="dark"] .price-table .cell-unit { color: var(--dk-accent); } :root[data-theme="dark"] .btn-row-trend:hover { color: var(--dk-accent); } :root[data-theme="dark"] .shop-link { color: var(--dk-accent); } :root[data-theme="dark"] .pack-empty { color: var(--dk-text-sub); } :root[data-theme="dark"] .btn-trend { color: var(--dk-accent); } :root[data-theme="dark"] .trend-section h3 { color: var(--dk-accent); } :root[data-theme="dark"] .trend-row { color: var(--dk-text-sub); } :root[data-theme="dark"] .trend-unit { color: var(--dk-accent); } :root[data-theme="dark"] .modal-content .input-group label { color: var(--dk-accent); } :root[data-theme="dark"] .price-table td::before { color: var(--dk-text-sub); } :root[data-theme="dark"] .pfc-kcal-sub { color: var(--dk-text-sub); } :root[data-theme="dark"] .pfc-unit { color: var(--dk-text-sub); } :root[data-theme="dark"] .custom-pfc-item label { color: var(--dk-text); } :root[data-theme="dark"] .result-box h4 { color: var(--dk-accent); } :root[data-theme="dark"] .pc-options-toggle { color: var(--dk-accent); } :root[data-theme="dark"] .pc-options-arrow { color: var(--dk-text-sub); } :root[data-theme="dark"] .pc-options-inner .check-label { color: var(--dk-text); } :root[data-theme="dark"] .option-toggles-title { color: var(--dk-text-sub); } :root[data-theme="dark"] .result-item strong { color: var(--dk-text); } :root[data-theme="dark"] .result-row:last-child { color: var(--dk-accent); } :root[data-theme="dark"] .arrow-divider { color: var(--dk-accent); } :root[data-theme="dark"] .unit-note h3 { color: var(--dk-accent); } :root[data-theme="dark"] .unit-note p { color: var(--dk-text); } :root[data-theme="dark"] .count-group input:disabled { color: var(--dk-text-sub); } :root[data-theme="dark"] .vs-divider { color: var(--dk-text-sub); } :root[data-theme="dark"] .result-detail-item span { color: var(--dk-text-sub); } :root[data-theme="dark"] .result-detail-item strong { color: var(--dk-text); } :root[data-theme="dark"] .settings-label { color: var(--dk-text-sub); } :root[data-theme="dark"] .preset-btn { color: var(--dk-text-sub); } :root[data-theme="dark"] .picker-item { color: var(--dk-text-sub); } :root[data-theme="dark"] .alarm-sound-btn { color: var(--dk-text-sub); } :root[data-theme="dark"] .settings-btn { color: var(--dk-text-sub); } :root[data-theme="dark"] .settings-btn:hover { color: var(--dk-accent); } :root[data-theme="dark"] .option-select-wrap select option { color: var(--dk-text); } :root[data-theme="dark"] .cmt-heading { color: var(--dk-accent); } :root[data-theme="dark"] .cmt-lead { color: var(--dk-text-sub); } :root[data-theme="dark"] .cmt-tab { color: var(--dk-text-sub); } :root[data-theme="dark"] .cmt-tab:hover { color: var(--dk-accent); } :root[data-theme="dark"] .cmt-name { color: var(--dk-accent); } :root[data-theme="dark"] .cmt-date { color: var(--dk-text-sub); } :root[data-theme="dark"] .cmt-body { color: var(--dk-text); } :root[data-theme="dark"] .cmt-label { color: var(--dk-text); } :root[data-theme="dark"] .cmt-input { color: var(--dk-text); } :root[data-theme="dark"] .cmt-textarea { color: var(--dk-text); } :root[data-theme="dark"] .cmt-faq-q { color: var(--dk-accent); } :root[data-theme="dark"] .cmt-faq-q::before { color: var(--dk-accent); } :root[data-theme="dark"] .cmt-faq-a { color: var(--dk-text); } :root[data-theme="dark"] .cmt-faq-a a { color: var(--dk-accent); } :root[data-theme="dark"] .controls label { color: var(--dk-accent); } :root[data-theme="dark"] .dice-display { color: var(--dk-accent); } :root[data-theme="dark"] .result-text { color: var(--dk-text); } :root[data-theme="dark"] .legal-content { color: var(--dk-text); } :root[data-theme="dark"] .legal-content h2 { color: var(--dk-accent); } :root[data-theme="dark"] .legal-content h3 { color: var(--dk-accent); } :root[data-theme="dark"] .legal-content .legal-updated { color: var(--dk-text-sub); } :root[data-theme="dark"] .upload-tip { color: var(--dk-text-sub); } :root[data-theme="dark"] .control-label { color: var(--dk-text-sub); } :root[data-theme="dark"] .type-btn span { color: var(--dk-text-sub); } :root[data-theme="dark"] .btn-sub-action { color: var(--dk-text); } :root[data-theme="dark"] .btn-footer-tool { color: var(--dk-text-sub); } :root[data-theme="dark"] .btn-top-nav { color: var(--dk-text-sub); } :root[data-theme="dark"] .btn-top-nav:hover { color: var(--dk-text); } :root[data-theme="dark"] .empty-guide { color: var(--dk-text-sub); } :root[data-theme="dark"] .news-meta { color: var(--dk-text-sub); } :root[data-theme="dark"] .news-list-link { color: var(--dk-accent); } :root[data-theme="dark"] .news-empty { color: var(--dk-text-sub); } /* 💡 英語表示のときだけ出る「本文は日本語です」のひとこと */ :root[data-theme="dark"] .news-lang-note { background-color: var(--dk-raised); color: var(--dk-text-sub); } :root[data-theme="dark"] .legal-translation-note { background-color: var(--dk-raised); color: var(--dk-text-sub); } :root[data-theme="dark"] .news-article-title { color: var(--dk-accent); } :root[data-theme="dark"] .news-article-body { color: var(--dk-text); } :root[data-theme="dark"] .logo-upload-label { color: var(--dk-text-sub); } :root[data-theme="dark"] .form-group label { color: var(--dk-text); } :root[data-theme="dark"] .real-receipt { color: var(--dk-text); } :root[data-theme="dark"] .receipt-logo { color: var(--dk-text); } :root[data-theme="dark"] .btn-add-row { color: var(--dk-text-sub); } :root[data-theme="dark"] .related-tools-title { color: var(--dk-accent); } :root[data-theme="dark"] .related-tool-card { color: var(--dk-accent); } :root[data-theme="dark"] .related-tool-icon { color: var(--dk-accent); } :root[data-theme="dark"] .related-tool-text { color: var(--dk-text-sub); } :root[data-theme="dark"] .related-tool-arrow { color: var(--dk-text-sub); } :root[data-theme="dark"] .option-label { color: var(--dk-text-sub); } :root[data-theme="dark"] .opt-icon-btn { color: var(--dk-text-sub); } :root[data-theme="dark"] .opt-icon-btn:hover { color: var(--dk-accent); } :root[data-theme="dark"] .item-list li { color: var(--dk-text); } :root[data-theme="dark"] .btn-remove { color: var(--dk-text-sub); } :root[data-theme="dark"] .config-title { color: var(--dk-accent); } :root[data-theme="dark"] .speed-label { color: var(--dk-text-sub); } :root[data-theme="dark"] .countdown-info { color: var(--dk-text-sub); } :root[data-theme="dark"] .history-title { color: var(--dk-text-sub); } :root[data-theme="dark"] .history-list li { color: var(--dk-text); } :root[data-theme="dark"] .btn-history-clear { color: var(--dk-text-sub); } :root[data-theme="dark"] .btn-history-clear:hover { color: var(--dk-text); } :root[data-theme="dark"] .btn-spin:disabled { color: var(--dk-text-sub); } :root[data-theme="dark"] .result-display { color: var(--dk-accent); } :root[data-theme="dark"] .share-note { color: var(--dk-text-sub); } :root[data-theme="dark"] .settings-lead { color: var(--dk-text); } :root[data-theme="dark"] .settings-lead i { color: var(--dk-accent); } :root[data-theme="dark"] .settings-card-title { color: var(--dk-accent); } :root[data-theme="dark"] .settings-card-note { color: var(--dk-text-sub); } :root[data-theme="dark"] .settings-row-label { color: var(--dk-text); } :root[data-theme="dark"] .settings-row-note { color: var(--dk-text-sub); } :root[data-theme="dark"] .settings-storage li { color: var(--dk-text-sub); } :root[data-theme="dark"] .settings-storage strong { color: var(--dk-accent); } :root[data-theme="dark"] .menu-head-title { color: var(--dk-accent); } :root[data-theme="dark"] .site-menu .btn-close { color: var(--dk-text-sub); } :root[data-theme="dark"] .site-menu .btn-close:hover { color: var(--dk-text-sub); } :root[data-theme="dark"] .menu-search-label { color: var(--dk-text-sub); } :root[data-theme="dark"] .menu-search-box i { color: var(--dk-text-sub); } :root[data-theme="dark"] .menu-search-input { color: var(--dk-text); } :root[data-theme="dark"] .menu-search-clear { color: var(--dk-text-sub); } :root[data-theme="dark"] .menu-search-empty { color: var(--dk-text-sub); } :root[data-theme="dark"] .menu-links a { color: var(--dk-text); } :root[data-theme="dark"] .menu-tools a { color: var(--dk-text); } :root[data-theme="dark"] .menu-links i { color: var(--dk-accent); } :root[data-theme="dark"] .menu-tools i { color: var(--dk-accent); } :root[data-theme="dark"] .menu-group-title { color: var(--dk-text-sub); } :root[data-theme="dark"] .menu-group-title a { color: var(--dk-text-sub); } :root[data-theme="dark"] .menu-group-title a:hover { color: var(--dk-accent); } :root[data-theme="dark"] body { color: var(--dk-text); } :root[data-theme="dark"] .tool-list-section h2 { color: var(--dk-accent); } :root[data-theme="dark"] .tool-icon i { color: var(--dk-accent); } :root[data-theme="dark"] .tool-info h3 { color: var(--dk-accent); } :root[data-theme="dark"] .tool-info p { color: var(--dk-text-sub); } :root[data-theme="dark"] .breadcrumbs { color: var(--dk-text-sub); } :root[data-theme="dark"] .breadcrumbs a { color: var(--dk-accent); } :root[data-theme="dark"] .breadcrumbs li:last-child { color: var(--dk-text); } :root[data-theme="dark"] .tool-card-toggle { color: var(--dk-accent); } :root[data-theme="dark"] .tool-options-toggle { color: var(--dk-accent); } :root[data-theme="dark"] .tool-options-arrow { color: var(--dk-text-sub); } :root[data-theme="dark"] .tool-switch-container .tool-switch-label { color: var(--dk-text); } :root[data-theme="dark"] .news-title { color: var(--dk-accent); } :root[data-theme="dark"] .news-date { color: var(--dk-accent); } :root[data-theme="dark"] .news-link { color: var(--dk-text); } :root[data-theme="dark"] .back-btn { color: var(--dk-accent); } :root[data-theme="dark"] .btn-tool { color: var(--dk-text-sub); } :root[data-theme="dark"] .addon-area h3 { color: var(--dk-text); } :root[data-theme="dark"] .keyword-result { color: var(--dk-accent); } :root[data-theme="dark"] .result-label { color: var(--dk-text); } :root[data-theme="dark"] .result-value { color: var(--dk-accent); } :root[data-theme="dark"] .privacy-note { color: var(--dk-text-sub); } :root[data-theme="dark"] .tool-usage-summary { color: var(--dk-accent); } :root[data-theme="dark"] .tool-usage-heading { color: var(--dk-accent); } :root[data-theme="dark"] .tool-usage-text p { color: var(--dk-text); } :root[data-theme="dark"] .tool-usage-text strong { color: var(--dk-accent); } :root[data-theme="dark"] .tool-usage-list li { color: var(--dk-text); } :root[data-theme="dark"] .tool-usage-list li::before { color: var(--dk-accent); } :root[data-theme="dark"] .tool-usage-list strong { color: var(--dk-accent); } :root[data-theme="dark"] .yt-lead { color: var(--dk-text); } :root[data-theme="dark"] .yt-lead strong { color: var(--dk-accent); } :root[data-theme="dark"] .yt-card-title h2 { color: var(--dk-accent); } :root[data-theme="dark"] .yt-tags li { color: var(--dk-accent); } :root[data-theme="dark"] .yt-summary { color: var(--dk-text); } :root[data-theme="dark"] .yt-detail { color: var(--dk-text-sub); } :root[data-theme="dark"] .yt-banner-text h2 { color: var(--dk-accent); } :root[data-theme="dark"] .yt-banner-text p { color: var(--dk-text-sub); } /* --- もともと白い文字は、白のまま保つ --- * （色付きのボタンやバッジの上に乗っている文字です。 * 上の打ち消しで青くしてしまうと読めなくなるため、ここで戻します） */ :root[data-theme="dark"] .btn-search { color: #ffffff; } :root[data-theme="dark"] .btn-draw { color: #ffffff; } :root[data-theme="dark"] .board-number.drawn { color: #ffffff; } :root[data-theme="dark"] .board-number.manual { color: #ffffff; } :root[data-theme="dark"] .opt-bingo-btn.active { color: #ffffff; } :root[data-theme="dark"] .blog-banner-icon { color: #ffffff; } :root[data-theme="dark"] .blog-category-chip.is-current { color: #ffffff; } :root[data-theme="dark"] .blog-pager-btn { color: #ffffff; } :root[data-theme="dark"] .blog-cta-icon { color: #ffffff; } :root[data-theme="dark"] .blog-cta-name { color: #ffffff; } :root[data-theme="dark"] .btn-calc { color: #ffffff; } :root[data-theme="dark"] .btn-bulk-add { color: #ffffff; } :root[data-theme="dark"] .btn-apply-car { color: #ffffff; } :root[data-theme="dark"] .card-badge { color: #ffffff; } :root[data-theme="dark"] .preset-btn.active { color: #ffffff; } :root[data-theme="dark"] .alarm-sound-btn.active { color: #ffffff; } :root[data-theme="dark"] .timer-action-btn.start { color: #ffffff; } :root[data-theme="dark"] .clock-toast-msg { color: #ffffff; } :root[data-theme="dark"] .cmt-tab.is-active { color: #ffffff; } :root[data-theme="dark"] .cmt-required { color: #ffffff; } :root[data-theme="dark"] .btn-roll { color: #ffffff; } :root[data-theme="dark"] .btn-upload { color: #ffffff; } :root[data-theme="dark"] .type-btn input:checked + span { color: #ffffff; } :root[data-theme="dark"] .btn-main-action { color: #ffffff; } :root[data-theme="dark"] .btn-download-action { color: #ffffff; } :root[data-theme="dark"] .toast-msg { color: #ffffff; } :root[data-theme="dark"] .news-badge { color: #ffffff; } :root[data-theme="dark"] .opt-icon-btn.active { color: #ffffff; } :root[data-theme="dark"] .btn-add { color: #ffffff; } :root[data-theme="dark"] .btn-countdown-reset:hover { color: #ffffff; } :root[data-theme="dark"] .btn-spin { color: #ffffff; } :root[data-theme="dark"] #roulette-fullscreen-target:fullscreen .result-display { color: #ffffff; } :root[data-theme="dark"] #roulette-fullscreen-target:-webkit-full-screen .result-display { color: #ffffff; } :root[data-theme="dark"] #roulette-fullscreen-target.pseudo-fullscreen .result-display { color: #ffffff; } :root[data-theme="dark"] .btn-share-link { color: #ffffff; } :root[data-theme="dark"] #btn-roulette-full-reset:hover { color: #ffffff; } :root[data-theme="dark"] .btn-settings-danger:hover { color: #ffffff; } :root[data-theme="dark"] .site-header { color: #ffffff; } :root[data-theme="dark"] .header-home:hover { color: #ffffff; } :root[data-theme="dark"] .header-compact-title { color: #ffffff; } :root[data-theme="dark"] .header-menu-btn { color: #ffffff; } :root[data-theme="dark"] .footer-nav a { color: #ffffff; } :root[data-theme="dark"] .btn { color: #ffffff; } :root[data-theme="dark"] .pseudo-fullscreen-exit { color: #ffffff; } :root[data-theme="dark"] .btn-download { color: #ffffff; } :root[data-theme="dark"] .btn-reset:hover { color: #ffffff; } :root[data-theme="dark"] .btn-primary { color: #ffffff; } :root[data-theme="dark"] .btn-action { color: #ffffff; } :root[data-theme="dark"] .yt-card-icon { color: #ffffff; } :root[data-theme="dark"] .yt-link { color: #ffffff; } :root[data-theme="dark"] .yt-banner-icon { color: #ffffff; } /* ===== 共通パーツ：ON/OFF スイッチ（トグルボタン） ===== 💡 追加：この部分は自動生成の対象から外しています。 自動生成では「白い面＝明るいので暗くする」と判断してしまい、 丸（白）もレール（グレー）も真っ黒になって、 暗い画面でスイッチが見えなくなっていました。 スイッチは暗い画面でも 丸＝白 / レール＝グレー / オン＝明るい青 のままにします。 */ :root[data-theme="dark"] .slider { background-color: #6b7280; } :root[data-theme="dark"] .slider::before { background-color: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } :root[data-theme="dark"] .switch-ui input:checked + .slider { background-color: #60a5fa; } :root[data-theme="dark"] .switch-ui input:focus-visible + .slider { outline-color: #60a5fa; }