dark mode

時不時地，我會覺得我的網站看起來很糟糕，或者我對它感到厭倦，想要重新設計。 這個網站經歷了很多次重新設計。 以下是2018年的截圖 這是2019年 直到昨天，它是這樣的： 從今天起，我們有了一個新的設計，基於WordPress Beaumont 主題，由Anders Norén開發，根據我的Astro代碼庫進行了一些自定義： 以下是暗黑模式的效果： 希望你喜歡！

如何在深色或亮色模式下顯示不同的網頁圖示 我在 Mac 上設置了自動切換深色和亮色模式的功能。 當我開始建立一個新的網站時，有一段時間我意識到我把一個白色圖片設置為網頁圖示，而在亮色模式下它幾乎是看不見的！ 所以我開始探索在深色模式中添加一個網頁圖示以及在亮色模式中添加不同的圖示的可能方法。 結果發現（目前）無法對 PNG/JPG 位圖圖片進行這樣的操作，但我們可以使用 SVG 向量圖像的技巧來實現。 我們可以在 SVG 圖像中嵌入 CSS。 如果圖像足夠簡單以至於我們可以識別一個顏色並在深色模式下更改它，那麼我們可以為這 2 種模式設置不同的顏色。 這是我用作網頁圖示的 SVG 代碼： <svg width="37" height="45" viewBox="0 0 37 45" fill="none" xmlns="http://www.w3.org/2000/svg" > <style> path { fill: #ccc; } @media (prefers-color-scheme: dark) { path { fill: #fff; } } </style> <path fill-rule="evenodd" clip-rule="evenodd" d="M31.8831 2.04389C25.2462 2.72205 20 11.1737 20 21.5C20 32.2696 25.7062 41 32.7451 41C33.9877 41 35.2047 40.7279 36.3664 40.2206C32.5452 43.2149 27.7311 45 22....

使用CSS很容易根據系統是否處於暗模式來進行更改，只需使用prefers-color-scheme媒體特性。 如果您想了解更多關於暗模式的資訊，請查看我在暗模式的博客文章。 今天我遇到了一個問題 - 如何更改HTML中定義的圖片，而不是CSS規則？ 事實證明，有一種純HTML的方法可以做到這一點，而不需要任何CSS或JavaScript。 我們可以使用picture標籤來包裝img標籤： <picture> <source srcset="dark.png" media="(prefers-color-scheme: dark)"> <img src="light.png"> </picture> 如果支援且啟用了暗模式，則將使用dark.png圖片作為img標籤的源。 這個標籤的支援非常好，不支援此標籤或不支援暗模式的舊瀏覽器將回退顯示light.png圖片。 值得注意的是，在任何情況下，瀏覽器不會下載兩張圖片：如果是暗模式，就只會下載dark.png圖片；如果是亮模式，則只會下載light.png圖片，因此不會浪費帶寬。