CSS

介紹現代人由於工作、娛樂目的而長時間使用像是手機、電腦等 3C 產品，時間久了往往會造成眼睛疲勞不適，因此現在的網頁或 APP 介面往往會提供深色模式或是夜間模式，除了可以減少裝置電量的消耗，也可以減少光線對眼睛的刺激。因此在前端網頁上實作亮色、深色模式也變成了提升使用者閱讀體驗所不可缺少的設計之一，因此，以下我們將說明如何透過 CSS 原生的 color-scheme 屬性來建置同時支援亮色 / 深色模式的網頁。使用者代理樣式表 (User agent stylesheet) 使用者代理樣式表 (或有人翻譯作瀏覽器預設樣式表)，為瀏覽器針對原生 html 元件像是文字、輸入框或按鈕等預設的樣式。以下我們撰寫了一個簡單 html 頁面，其中包含了一個 <h1> 元件: 1 2 3 4 5 <html lang="en"> <body> <h1>hello</h1> </body> </html> 在 Edge 瀏覽器中打開後，使用 devtool 觀察樣式可以看到下列的樣式，這個就是套用了瀏覽器預設的樣式表中關於 <h1> 元件的樣式。 1 2 3 4 5 6 7 8 9 h1 { display: block; font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; } 除了對於各個 html 元件提供預設的樣式表之外，現在的主流瀏覽器也提供各元件在深色模式下的樣式表，而我們可以透過 color-scheme 來啟用它。...

前端專案時常需要進行主題(Theme)切換，比方說現在最常見的 light/dark mode 主題切換。本文將介紹如何透過 CSS Variables (或 CSS Custom Properties) 及 HTML root element 上的屬性控制前端網頁的主題切換。 CSS Variables (或 CSS Custom Properties)是 CSS3 的新功能，讓您可以不用透過SASS、SCSS等預處理語言即可在原生 CSS 語法中使用變數，讓 CSS 語法也可以達到 Clean Code。 1 2 3 4 5 6 7 8 9 10 11 :root { --primary-color: blue; } p { color: var(--primary-color); } h1 { color: var(--primary-color); } ▲範例：透過 CSS Variable 指定主題色彩的顏色上面是一個簡單的範例，透過一個 –primary-color 的變數指定主題色彩，並套用到網頁中不同元的的樣式之中，未來要修改主題色時，只需要更新該變數，就可以一次性切換頁面中元件(如範例中的與標籤)的主題色，而不用一項一項的修改 CSS 樣式。 Theme 主題切換從前面的說明中可以得知，宣告 Theme 相關的 CSS Variables 時通常會將變數的定義寫在 :root 的區塊中讓全域的 element 元件都可以取用，這意思就是說 CSS 變數需要定義在 document....

網頁深色模式與 CSS 相關屬性

使用 CSS Variables 切換前端主題(Theme)