9、二面：Css黑暗主題如何適配？ · 大廠前端面試真題

>[danger]二面：Css黑暗主題如何適配？要在網站或應用程序中實現黑暗主題的適配，您可以考慮以下幾種方法： 1. 使用 CSS 變量：定義一組與主題相關的 CSS 變量，例如背景顏色、文本顏色等，并根據當前主題設置這些變量的值。通過切換不同的主題，可以輕松地改變整個應用的外觀。 ```css :root { --background-color: #ffffff; --text-color: #000000; } .dark-theme { --background-color: #1a1a1a; --text-color: #ffffff; } body { background-color: var(--background-color); color: var(--text-color); } ``` 2. 使用媒體查詢：根據用戶的首選顏色方案（light 或 dark）使用媒體查詢來選擇合適的樣式。例如，可以監聽 prefers-color-scheme 媒體查詢，根據用戶系統設置的主題模式應用相應的樣式。 ```css @media (prefers-color-scheme: dark) { /* Dark mode styles */ body { background-color: #1a1a1a; color: #ffffff; } } ``` 3. 使用特定的類名或屬性：在 HTML 元素上添加特定的類名或屬性，以便根據主題進行樣式切換。 ```html <body class="dark-theme">  </body> ``` ```css body.dark-theme { background-color: #1a1a1a; color: #ffffff; } ``` 無論采用哪種方法，都應該確保黑暗主題的設計符合用戶體驗原則，包括足夠的對比度、易讀性和清晰的界面元素。另外，還需要考慮到用戶切換主題時的平滑過渡，以確保用戶體驗的連貫性。