如何進行平滑的暗/亮模式轉換

好的，現在您正在訪問一個網站，並且該網站處於深色模式。 但您更喜歡輕型模式（如果您這樣做，那麼，這就是您的特權？）。現在是凌晨 3 點。您點選暗/亮模式切換。 突然，一道閃光！ 隨後出現暫時失明，隨後出現耳鳴和癲癇發作。 後來去急診室的費用很高（感謝美國的醫療保健系統！），然後你就損失了數千美元。

這有點誇張，但不和諧的主題切換無疑很煩人。 我們來解決它吧！ 使用尖端的 CSS（好吧，也許不是那個尖端），我們可以實現平滑過渡。 我將提供代碼和解釋。

首先，您需要一個主題切換器。 如果您還沒有說明，請查看此連結以取得說明。 此方法與 CSS 變數 (--color: blue;) 和類似方法相容。

程式碼如下：

<code class="language-css">* {
  transition-duration: 1s;
}</code>

將 1s（一秒）調整為您喜歡的過渡速度。

星號 (*) 是通用選擇器，表示頁面上的每個元素都會受到影響。 透過設定 transition-duration，我們告訴瀏覽器在任何元素的任何屬性發生變化時應用平滑過渡。 簡單！

感謝您的閱讀！

安德魯‧麥克西利恩

以上是如何進行平滑的暗/亮模式轉換的詳細內容。更多資訊請關注PHP中文網其他相關文章！