首頁 web前端 css教學 不准確的顏色主題(放屁)的閃光

不准確的顏色主題(放屁)的閃光

Mar 25, 2025 am 10:42 AM

不准確的顏色主題(放屁)的閃光

在網站上實施黑模式主題時,有很多考慮。我們有一個巨大的指南。那裡有一些非常聰明的快速獲勝,但是還有一些非常棘手的事情要做。這些棘手的事情之一是它不是在黑暗和光線之間“切換”的黑模式,而是您需要支持的三種模式:深色光線使用系統偏好。這類似於音頻首選項在許多應用程序中的工作方式,這使您可以非常具體選擇所需的音頻輸入或輸出,或默認到系統偏好。

CSS和JavaScript可以通過偏愛顏色 - 旋轉API處理系統偏好角度,但是如果用戶偏好已更改,並且該偏好現在與用戶偏好不同,那麼您處於“不准確色彩主題的閃光燈”或“放屁”或“放屁”領域。好吧,這是一個嘲諷的首字母縮寫詞,但這可能是一個視覺上令人討厭的問題,所以我要保留它。在同一脈絡中,Fout(未風格的文本閃光)用於字體加載。

存儲用戶偏好意味著cookie,localstorage或某種數據庫之類的內容。如果訪問該數據意味著運行JavaScript,例如LocalStorage.getItem('color-Mode-preference');那麼您在放屁區域,因為您的JavaScript很可能是在頁面上的第一個渲染運行的,否則您會不必要地延遲頁面呈現頁面。

您可以在頁面渲染之前訪問使用服務器端語言的cookie,這意味著您可以使用它來輸出和样式的類型,並巧妙地避免了放屁,但這意味著甚至可以訪問服務器端語言的站點(例如,jamstack站點不使用)。

allllll說,我讚賞羅伯·莫里森(Rob Morieson)關於黑暗模式的文章,因為它沒有在這個重要問題上加以解決。非常具體地在Next.js中進行此操作,並使用localStorage,但是由於Next.js是JavaScript渲染的,因此您可以強迫它來檢查用戶保存的偏好,這是它的第一件事。這意味著它將第一次正確渲染(無閃光)。您確實必須關閉服務器端渲染才能正常工作,但是這是一個艱難的權衡。

我不相信沒有服務器端語言或延誤的頁面渲染的好方法可以避免放屁。

以上是不准確的顏色主題(放屁)的閃光的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1655
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1226
24
Google字體可變字體 Google字體可變字體 Apr 09, 2025 am 10:42 AM

我看到Google字體推出了新設計(Tweet)。與上一次大型重新設計相比,這感覺更加迭代。我幾乎無法分辨出區別

如何使用HTML,CSS和JavaScript創建動畫倒計時計時器 如何使用HTML,CSS和JavaScript創建動畫倒計時計時器 Apr 11, 2025 am 11:29 AM

您是否曾經在項目上需要一個倒計時計時器?對於這樣的東西,可以自然訪問插件,但實際上更多

HTML數據屬性指南 HTML數據屬性指南 Apr 11, 2025 am 11:50 AM

您想了解的有關HTML,CSS和JavaScript中數據屬性的所有信息。

如何通過CSS選擇第一個類名為item的子元素? 如何通過CSS選擇第一個類名為item的子元素? Apr 05, 2025 pm 11:24 PM

在元素個數不固定的情況下如何通過CSS選擇第一個指定類名的子元素在處理HTML結構時,常常會遇到元素個數不�...

為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”? 為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”? Apr 05, 2025 pm 05:51 PM

關於Flex佈局中紫色斜線區域的疑問在使用Flex佈局時,你可能會遇到一些令人困惑的現象,比如在開發者工具(d...

使Sass更快的概念證明 使Sass更快的概念證明 Apr 16, 2025 am 10:38 AM

在一個新項目開始時,Sass彙編發生在眼睛的眨眼中。感覺很棒,尤其是當它與browsersync配對時,它重新加載

在前端開發中,如何使用CSS和JavaScript實現類似Windows 10設置界面的探照燈效果? 在前端開發中,如何使用CSS和JavaScript實現類似Windows 10設置界面的探照燈效果? Apr 05, 2025 pm 10:21 PM

在前端開發中如何實現類似Windows...

我們如何創建一個在SVG中生成格子呢模式的靜態站點 我們如何創建一個在SVG中生成格子呢模式的靜態站點 Apr 09, 2025 am 11:29 AM

格子呢是一塊圖案布,通常與蘇格蘭有關,尤其是他們時尚的蘇格蘭語。在Tar​​tanify.com上,我們收集了5,000多個格子呢

See all articles