DIVLESS Pure CSS を使用してダークモードを切り替える

デフォルトで JavaScript が許可されていない職場の SharePoint 環境内で .html ドキュメントを作成する必要があるという観点から、私は「ああ、ダーク モードを切り替えるボタンを追加して、ありがとう！」

これは、ポリシー文書の「有効でアクセス可能なセマンティック HTML」という文言に加えて、上司が「単一の DIV さえも怠惰である」と同等視しているため、控えめに言っても事態は少し難しくなりました。

@media (配色を優先: ダーク)

私は、切り替えの代わりに、メディア クエリを使用して各ユーザーの明るい/暗いシステム設定に一致するようにページのスタイルを設定することを提案しました。答えは、「それでは始めますが、それでもトグルを入れてください。」でした。素晴らしいです。作成する作業を減らそうとしたことで、より多くの作業を自分で作成できました。

ライト/ダーク モードを制御するには CSS 変数とチェックボックスの入力/ラベル メソッドが必要であることはすでに述べましたが、:checked ~ * は入力の後に来る要素にのみ影響するため、背景スタイルを切り替えるのは困難です。

私の最初の解決策は、すべての絶対下に配置された汎用 DIV を使用することでした。これは、上司がそれを見つけて削除するよう指示するまで機能しました。唯一の安心点は、互換性サポートがブラウザの 90% 以上をカバーしている限り、最新の HTML/CSS が使用されても問題ないということです。

:has() が役に立ちます!

実装前に親要素をターゲットにするために提案されたこの CSS 構文を初めて見たとき、それが何に役立つのかわかりませんでした。解決策を探しているときに再びこの問題に遭遇し、「BODY で試してみてはいかがでしょうか?」

すぐに効果があったので、もっと早く試さなかった自分を責めました!最終的に完成した関連する CSS は次のとおりです。

      * { /* LIGHT mode */
        --tcolor: #000;
        --bgcolor: #FFF;
        --lcontent: "DARK";
        --bgimage: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(255,255,255,0.75);
        --alink:blue;
        --avisited:purple;
      }
      body:has(#d:checked), body:has(#d:checked) * { /* DARK mode */
        --tcolor: #FFF;
        --bgcolor: #000;
        --lcontent: "LIGHT";
        --bgimage: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(0,0,0,0.75);
        --alink:lightblue;
        --avisited:#8467D7;
      }
@media (prefers-color-scheme: dark) {
      * { /* DARK mode */
        --tcolor: #FFF;
        --bgcolor: #000;
        --lcontent: "LIGHT";
        --bgimage: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(0,0,0,0.75);
        --alink:lightblue;
        --avisited:#8467D7;
      }
      body:has(#d:checked), body:has(#d:checked) * { /* LIGHT mode */
        --tcolor: #000;
        --bgcolor: #FFF;
        --lcontent: "DARK";
        --bgimage: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(255,255,255,0.75);
        --alink:blue;
        --avisited:purple;
      }
}
      body { /* base element under control of mode */
        color:var(--tcolor); /* match text color to mode */
        background-image:var(--bgimage); /* match opacity overlay to mode */
        background-repeat: no-repeat no-repeat, space no-repeat;
        background-size:auto 100vh;
        margin:-1ex;
      }
      label[for="d"]::after {content: var(--lcontent);} /* DARK or LIGHT text */
      section{ /* main interaction area */
        margin:0 auto;
        background-color:var(--sbgcolor);
        padding:1ex;
        padding-top:0;
        height:fit-content;
        max-height:96.2vh;
        overflow-y:scroll;
        scrollbar-color:rgba(128,128,128,0.5) var(--sbgcolor);
      }
      li:nth-of-type(even){ /* subtle horizontal lines */
        background-color:rgba(128,128,128,0.1);
      }
      summary:hover,summary:focus-visible,a:hover,a:focus-visible { /* match mouseover or     */
        background-color:var(--bgcolor);                            /* keyboard focus to mode */
      }
      a:link {color: var(--alink)}       /* match link     */
      a:visited {color: var(--avisited)} /* colors to mode */

SECTION スクロールバーの色をニュートラルに保つために、rgba(128,128,128,0.5) を使用して 1 つのチートを実行しました。

最終結果 (シェアポイントによる制限なし) は次のようになります。

おまけとして、属性を使用して手動で追加されたそのページのスキーマ データ構造を次に示します。sans-javascript という別のタスクが私に与えられました。

あとは、JavaScript を使わずにこれらのオーディオサウンドをトリガーする方法を理解するだけです!

限られた環境で働いたあなた自身の経験、何がうまくいき、何がうまくいかなかったのか、お気軽にコメントしてください!

以上がDIVLESS Pure CSS を使用してダークモードを切り替えるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。