next themes
v0.4.3
สิ่งที่เป็นนามธรรมสำหรับธีมในแอป React ของคุณ
appDiruseTheme ตะขอธีมลองดูตัวอย่างสดเพื่อลองด้วยตัวคุณเอง
$ npm install next-themes
# or
$ yarn add next-themes คุณจะต้องมี App แบบกำหนดเองเพื่อใช้ธีมถัดไป _app ที่ง่ายที่สุดมีลักษณะดังนี้:
// pages/_app.js
function MyApp ( { Component , pageProps } ) {
return < Component { ... pageProps } / >
}
export default MyAppการเพิ่มการรองรับโหมดมืดต้องใช้โค้ด 2 บรรทัด:
// pages/_app.js
import { ThemeProvider } from 'next-themes'
function MyApp ( { Component , pageProps } ) {
return (
< ThemeProvider >
< Component { ... pageProps } / >
< / ThemeProvider >
)
}
export default MyApp คุณจะต้องอัปเดต app/layout.jsx เพื่อใช้ธีมถัดไป layout ที่ง่ายที่สุดมีลักษณะดังนี้:
// app/layout.jsx
export default function Layout ( { children } ) {
return (
< html >
< head / >
< body > { children } < / body >
< / html >
)
}การเพิ่มการรองรับโหมดมืดต้องใช้โค้ด 2 บรรทัด:
// app/layout.jsx
import { ThemeProvider } from 'next-themes'
export default function Layout ( { children } ) {
return (
< html suppressHydrationWarning >
< head / >
< body >
< ThemeProvider > { children } < / ThemeProvider >
< / body >
< / html >
)
} โปรดทราบว่า ThemeProvider เป็นส่วนประกอบไคลเอ็นต์ ไม่ใช่ส่วนประกอบเซิร์ฟเวอร์
บันทึก! หากคุณไม่เพิ่ม SuppressHydrationWarning ให้กับ
<html>ของคุณ คุณจะได้รับคำเตือนเนื่องจากnext-themesจะอัปเดตองค์ประกอบนั้น คุณสมบัตินี้ใช้ความลึกเพียงระดับเดียวเท่านั้น ดังนั้นจึงจะไม่ปิดกั้นคำเตือนความชุ่มชื้นในองค์ประกอบอื่นๆ
เพียงเท่านี้ แอป Next.js ของคุณก็รองรับโหมดมืดอย่างสมบูรณ์ รวมถึงการตั้งค่าระบบด้วย prefers-color-scheme ธีมนี้ยังซิงค์ระหว่างแท็บต่างๆ ทันทีอีกด้วย ตามค่าเริ่มต้น ธีมถัดไปจะแก้ไขแอตทริบิวต์ data-theme บนองค์ประกอบ html ซึ่งคุณสามารถใช้เพื่อจัดสไตล์แอปของคุณได้อย่างง่ายดาย:
: root {
/* Your default theme */
--background : white;
--foreground : black;
}
[ data-theme = 'dark' ] {
--background : black;
--foreground : white;
}บันทึก! หากคุณตั้งค่าแอตทริบิวต์ของผู้ให้บริการธีมเป็นคลาสสำหรับ Tailwind ธีมถัดไปจะแก้ไขแอตทริบิวต์
classในองค์ประกอบhtmlดูด้วยลมหาง
UI ของคุณจะต้องรู้ธีมปัจจุบันและสามารถเปลี่ยนแปลงได้ ตะขอ useTheme ให้ข้อมูลธีม:
import { useTheme } from 'next-themes'
const ThemeChanger = ( ) => {
const { theme , setTheme } = useTheme ( )
return (
< div >
The current theme is: { theme }
< button onClick = { ( ) => setTheme ( 'light' ) } > Light Mode < / button >
< button onClick = { ( ) => setTheme ( 'dark' ) } > Dark Mode < / button >
< / div >
)
}คำเตือน! โค้ดข้างต้นเป็นไฮเดรชั่น ที่ไม่ปลอดภัย และจะส่งคำเตือนไฮเดรชั่นไม่ตรงกันเมื่อเรนเดอร์ด้วย SSG หรือ SSR เนื่องจากเราไม่สามารถทราบ
themeบนเซิร์ฟเวอร์ได้ ดังนั้นจึงจะundefinedเสมอจนกว่าจะเมาท์บนไคลเอนต์คุณควรชะลอการเรนเดอร์ UI การสลับธีมใดๆ จนกว่าจะติดตั้งบนไคลเอนต์ ดูตัวอย่าง
มาเจาะลึกรายละเอียดกันดีกว่า
การกำหนดค่าธีมทั้งหมดของคุณถูกส่งไปยัง ThemeProvider
storageKey = 'theme' : คีย์ที่ใช้จัดเก็บการตั้งค่าธีมใน localStoragedefaultTheme = 'system' : ชื่อธีมเริ่มต้น (สำหรับ v0.0.12 และต่ำกว่าค่าเริ่มต้นคือ light ) หาก enableSystem เป็นเท็จ ธีมเริ่มต้นจะเป็น lightforcedTheme : ชื่อธีมบังคับสำหรับหน้าปัจจุบัน (ไม่แก้ไขการตั้งค่าธีมที่บันทึกไว้)enableSystem = true : ว่าจะสลับระหว่าง dark และ light ตาม prefers-color-schemeenableColorScheme = true : ไม่ว่าจะระบุเบราว์เซอร์ที่ใช้โทนสี (มืดหรือสว่าง) สำหรับ UI ในตัว เช่น อินพุตและปุ่มdisableTransitionOnChange = false : เลือกที่จะปิดการใช้งานการเปลี่ยน CSS ทั้งหมดเมื่อเปลี่ยนธีม (ตัวอย่าง)themes = ['light', 'dark'] : รายการชื่อธีมattribute = 'data-theme' : คุณลักษณะ HTML ที่แก้ไขตามธีมที่ใช้งานอยู่class และ data-* (หมายถึงแอตทริบิวต์ข้อมูลใด ๆ data-mode , data-color ฯลฯ ) (ตัวอย่าง)value : การแมปทางเลือกของชื่อธีมกับค่าแอ็ตทริบิวต์object โดยที่ key คือชื่อธีมและ value คือค่าแอตทริบิวต์ (ตัวอย่าง)nonce : ตัวเลือก nonce ที่ส่งผ่านไปยังแท็ก script ที่แทรก ใช้เพื่ออนุญาตรายการสคริปต์ธีมถัดไปใน CSP ของคุณscriptProps : อุปกรณ์ประกอบฉากทางเลือกที่จะส่งผ่านไปยังแท็ก script ที่ฉีด (ตัวอย่าง)useTheme ไม่มีพารามิเตอร์ แต่ส่งคืน:
theme : ชื่อธีมที่ใช้งานอยู่setTheme(name) : ฟังก์ชั่นอัพเดตธีม API เหมือนกับฟังก์ชัน set ที่ส่งคืนโดย useState -hook ส่งค่าธีมใหม่หรือใช้การโทรกลับเพื่อตั้งค่าธีมใหม่ตามธีมปัจจุบันforcedTheme : ธีมเพจบังคับหรือเป็นเท็จ หากมีการตั้ง forcedTheme คุณควรปิดใช้งาน UI การสลับธีมใดๆresolvedTheme : หาก enableSystem เป็นจริงและธีมที่ใช้งานอยู่คือ "system" ระบบจะคืนค่าว่าการตั้งค่าระบบได้รับการแก้ไขเป็น "dark" หรือ "light" มิฉะนั้นจะเหมือนกับ themesystemTheme : หาก enableSystem เป็นจริง จะแสดงการตั้งค่าธีมของระบบ ("dark" หรือ "light") โดยไม่คำนึงว่าธีมที่ใช้งานอยู่คืออะไรthemes : รายการธีมที่ส่งไปยัง ThemeProvider (โดยต่อท้าย "ระบบ" หาก enableSystem เป็นจริง)ก็ไม่แย่เกินไปใช่มั้ย? มาดูวิธีใช้คุณสมบัติเหล่านี้พร้อมตัวอย่าง:
ตัวอย่างสดจะแสดงธีมถัดไปที่ใช้งานจริง โดยมีธีมมืด สว่าง ธีมระบบ และหน้าที่บังคับธีม
สำหรับเวอร์ชันที่สูงกว่า v0.0.12 defaultTheme ต้นจะถูกตั้งค่าเป็น "ระบบ" โดยอัตโนมัติ ดังนั้นหากต้องการใช้การตั้งค่าระบบ คุณสามารถใช้:
< ThemeProvider > หากคุณไม่ต้องการธีม System ให้ปิดการใช้งานผ่าน enableSystem :
< ThemeProvider enableSystem = { false } > หากแอป Next.js ของคุณใช้คลาสเพื่อจัดสไตล์เพจตามธีม ให้เปลี่ยนแอตทริบิวต์ prop เป็น class :
< ThemeProvider attribute = "class" > ตอนนี้ การตั้งค่าธีมเป็น "dark" จะตั้งค่า class="dark" บนองค์ประกอบ html
สมมติว่าเพจการตลาดใหม่สุดเจ๋งของคุณคือโหมดมืดเท่านั้น หน้าเว็บควรใช้ธีมสีเข้มเสมอ และการเปลี่ยนธีมไม่ควรมีผลใดๆ หากต้องการบังคับใช้ธีมบนหน้า Next.js ของคุณ เพียงตั้งค่าตัวแปรในองค์ประกอบของหน้า:
// pages/awesome-page.js
const Page = ( ) => { ... }
Page . theme = 'dark'
export default Page ใน _app ของคุณ อ่านตัวแปรแล้วส่งต่อไปยัง ThemeProvider:
function MyApp ( { Component , pageProps } ) {
return (
< ThemeProvider forcedTheme = { Component . theme || null } >
< Component { ... pageProps } / >
< / ThemeProvider >
)
} เสร็จแล้ว! หน้าของคุณเป็นธีมสีเข้มเสมอ (ไม่ว่าผู้ใช้จะกำหนดลักษณะอย่างไร) และการเรียก setTheme จาก useTheme ในตอนนี้ก็ไม่ต้องดำเนินการแล้ว อย่างไรก็ตาม คุณควรแน่ใจว่าได้ปิดการใช้งาน UI ใดๆ ของคุณที่ปกติจะเปลี่ยนธีม:
const { forcedTheme } = useTheme ( )
// Theme is forced, we shouldn't allow user to change the theme
const disabled = ! ! forcedThemeฉันเขียนเกี่ยวกับเทคนิคนี้ที่นี่ เราสามารถบังคับปิดการเปลี่ยน CSS ทั้งหมดก่อนที่จะเปลี่ยนธีม และเปิดใช้งานอีกครั้งทันทีหลังจากนั้น เพื่อให้แน่ใจว่า UI ของคุณที่มีระยะเวลาการเปลี่ยนต่างกันจะไม่รู้สึกไม่สอดคล้องกันเมื่อเปลี่ยนธีม
หากต้องการเปิดใช้งานลักษณะการทำงานนี้ ให้ส่ง Prop ปิด disableTransitionOnChange :
< ThemeProvider disableTransitionOnChange > ชื่อของธีมที่ใช้งานอยู่จะถูกใช้เป็นทั้งค่า localStorage และค่าของแอตทริบิวต์ DOM หากชื่อธีมคือ "pink" localStorage จะมี theme=pink และ DOM จะเป็น data-theme="pink" คุณ ไม่สามารถ แก้ไขค่า localStorage ได้ แต่คุณ สามารถ แก้ไขค่า DOM ได้
หากเราต้องการให้ DOM เรนเดอร์ data-theme="my-pink-theme" แทน เมื่อธีมเป็น "สีชมพู" ให้ส่ง value prop:
< ThemeProvider value = { { pink : 'my-pink-theme' } } >เสร็จแล้ว! เพื่อให้ชัดเจนยิ่งขึ้น สิ่งนี้มีผลกับ DOM เท่านั้น ค่าทั้งหมดจะมีลักษณะดังนี้:
const { theme } = useTheme ( )
// => "pink"
localStorage . getItem ( 'theme' )
// => "pink"
document . documentElement . getAttribute ( 'data-theme' )
// => "my-pink-theme" Rocket Loader เป็นการเพิ่มประสิทธิภาพ Cloudflare ที่เลื่อนเวลาการโหลดสคริปต์อินไลน์และภายนอกเพื่อจัดลำดับความสำคัญของเนื้อหาเว็บไซต์ เนื่องจากธีมถัดไปอาศัยการแทรกสคริปต์เพื่อหลีกเลี่ยงการกะพริบของหน้าจอเมื่อโหลดหน้าเว็บ Rocket Loader จึงหยุดฟังก์ชันนี้ แต่ละสคริปต์สามารถละเว้นได้โดยการเพิ่มแอตทริบิวต์ data-cfasync="false" ให้กับแท็กสคริปต์:
< ThemeProvider scriptProps = { { 'data-cfasync' : 'false' } } >ธีมถัดไปได้รับการออกแบบมาเพื่อรองรับธีมจำนวนเท่าใดก็ได้! เพียงส่งรายการธีม:
< ThemeProvider themes = { [ 'pink' , 'red' , 'blue' ] } >บันทึก! เมื่อคุณส่ง
themesชุดรูปแบบเริ่มต้น ("สว่าง" และ "มืด") จะถูกแทนที่ ตรวจสอบให้แน่ใจว่าคุณได้รวมสิ่งเหล่านั้นไว้หากคุณยังต้องการธีมสว่างและมืด:
< ThemeProvider themes = { [ 'pink' , 'red' , 'blue' , 'light' , 'dark' ] } >สำหรับตัวอย่างวิธีใช้งาน โปรดดูตัวอย่างที่มีหลายธีม
ไลบรารีนี้ไม่ต้องอาศัยการกำหนดสไตล์ธีมของคุณโดยใช้ตัวแปร CSS คุณสามารถฮาร์ดโค้ดค่าใน CSS ของคุณได้ และทุกอย่างจะทำงานตามที่คาดไว้ (ไม่มีการกะพริบ):
html ,
body {
color : # 000 ;
background : # fff ;
}
[ data-theme = 'dark' ] ,
[ data-theme = 'dark' ] body {
color : # fff ;
background : # 000 ;
} Next Themes เป็นอิสระจาก CSS โดยสมบูรณ์ โดยจะทำงานร่วมกับไลบรารีใดก็ได้ ตัวอย่างเช่น ด้วย Styled Components คุณเพียงแค่ต้อง createGlobalStyle ใน App ที่คุณกำหนดเอง:
// pages/_app.js
import { createGlobalStyle } from 'styled-components'
import { ThemeProvider } from 'next-themes'
// Your themeing variables
const GlobalStyle = createGlobalStyle `
:root {
--fg: #000;
--bg: #fff;
}
[data-theme="dark"] {
--fg: #fff;
--bg: #000;
}
`
function MyApp ( { Component , pageProps } ) {
return (
< >
< GlobalStyle / >
< ThemeProvider >
< Component { ... pageProps } / >
< / ThemeProvider >
< / >
)
} เนื่องจากเราไม่สามารถทราบ theme บนเซิร์ฟเวอร์ได้ ค่าหลายค่าที่ส่งคืนจาก useTheme จะ undefined จนกว่าจะเมาท์บนไคลเอนต์ ซึ่งหมายความว่าหากคุณพยายามเรนเดอร์ UI ตามธีมปัจจุบันก่อนที่จะติดตั้งบนไคลเอนต์ คุณจะเห็นข้อผิดพลาดเกี่ยวกับไฮเดรชั่นที่ไม่ตรงกัน
ตัวอย่างโค้ดต่อไปนี้ ไม่ปลอดภัย :
import { useTheme } from 'next-themes'
// Do NOT use this! It will throw a hydration mismatch error.
const ThemeSwitch = ( ) => {
const { theme , setTheme } = useTheme ( )
return (
< select value = { theme } onChange = { e => setTheme ( e . target . value ) } >
< option value = "system" > System < / option >
< option value = "dark" > Dark < / option >
< option value = "light" > Light < / option >
< / select >
)
}
export default ThemeSwitchในการแก้ไขปัญหานี้ ตรวจสอบให้แน่ใจว่าคุณแสดงเฉพาะ UI ที่ใช้ธีมปัจจุบันเมื่อเพจถูกเมาท์บนไคลเอนต์:
import { useState , useEffect } from 'react'
import { useTheme } from 'next-themes'
const ThemeSwitch = ( ) => {
const [ mounted , setMounted ] = useState ( false )
const { theme , setTheme } = useTheme ( )
// useEffect only runs on the client, so now we can safely show the UI
useEffect ( ( ) => {
setMounted ( true )
} , [ ] )
if ( ! mounted ) {
return null
}
return (
< select value = { theme } onChange = { e => setTheme ( e . target . value ) } >
< option value = "system" > System < / option >
< option value = "dark" > Dark < / option >
< option value = "light" > Light < / option >
< / select >
)
}
export default ThemeSwitch หรือคุณสามารถโหลดส่วนประกอบทางฝั่งไคลเอ็นต์แบบขี้เกียจได้ ตัวอย่างต่อไปนี้ใช้ next/dynamic แต่คุณสามารถใช้ React.lazy :
import dynamic from 'next/dynamic'
const ThemeSwitch = dynamic ( ( ) => import ( './ThemeSwitch' ) , { ssr : false } )
const ThemePage = ( ) => {
return (
< div >
< ThemeSwitch / >
< / div >
)
}
export default ThemePageเพื่อหลีกเลี่ยงการเปลี่ยนเลย์เอาต์ ให้ลองเรนเดอร์โครงกระดูก/ตัวยึดตำแหน่งจนกว่าจะติดตั้งบนฝั่งไคลเอ็นต์
การแสดงรูปภาพที่แตกต่างกันตามธีมปัจจุบันยังประสบปัญหาปัญหาความชุ่มชื้นไม่ตรงกันอีกด้วย ด้วย next/image คุณสามารถใช้รูปภาพเปล่าได้จนกว่าธีมจะได้รับการแก้ไข:
import Image from 'next/image'
import { useTheme } from 'next-themes'
function ThemedImage ( ) {
const { resolvedTheme } = useTheme ( )
let src
switch ( resolvedTheme ) {
case 'light' :
src = '/light.png'
break
case 'dark' :
src = '/dark.png'
break
default :
src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
break
}
return < Image src = { src } width = { 400 } height = { 400 } / >
}
export default ThemedImage คุณยังสามารถใช้ CSS เพื่อซ่อนหรือแสดงเนื้อหาตามธีมปัจจุบันได้ เพื่อหลีกเลี่ยงไม่ให้ความชุ่มชื้นไม่ตรงกัน คุณจะต้องเรนเดอร์ UI ทั้งสอง เวอร์ชัน โดยที่ CSS ซ่อนเวอร์ชันที่ไม่ได้ใช้ ตัวอย่างเช่น:
function ThemedImage ( ) {
return (
< >
{ /* When the theme is dark, hide this div */ }
< div data-hide-on-theme = "dark" >
< Image src = "light.png" width = { 400 } height = { 400 } / >
< / div >
{ /* When the theme is light, hide this div */ }
< div data-hide-on-theme = "light" >
< Image src = "dark.png" width = { 400 } height = { 400 } / >
< / div >
< / >
)
}
export default ThemedImage [ data-theme = 'dark' ] [ data-hide-on-theme = 'dark' ] ,
[ data-theme = 'light' ] [ data-hide-on-theme = 'light' ] {
display : none;
}เยี่ยมชมตัวอย่างสด • ดูซอร์สโค้ดตัวอย่าง
บันทึก! Tailwind รองรับเฉพาะโหมดมืดในเวอร์ชัน >2
ใน tailwind.config.js ของคุณ ให้ตั้งค่าคุณสมบัติโหมดมืดเป็น selector :
// tailwind.config.js
module . exports = {
darkMode : 'selector'
} หมายเหตุ: หากคุณใช้ tailwindcss เวอร์ชันเก่า < 3.4.1 ให้ใช้ 'class' แทน 'selector'
ตั้งค่าแอ็ตทริบิวต์สำหรับ Theme Provider ของคุณเป็นคลาส:
// pages/_app.tsx
< ThemeProvider attribute = "class" >หากคุณใช้ค่า Prop เพื่อระบุค่าแอตทริบิวต์ที่แตกต่างกัน ตรวจสอบให้แน่ใจว่าธีมสีเข้มของคุณใช้ค่า "dark" อย่างชัดเจน ตามที่ Tailwind กำหนด
แค่นั้นแหละ! ตอนนี้คุณสามารถใช้คลาสเฉพาะโหมดมืดได้แล้ว:
< h1 className = "text-black dark:text-white" > Tailwind ยังให้คุณใช้ตัวเลือกแบบกำหนดเองสำหรับโหมดมืดตั้งแต่เวอร์ชัน 3.4.1 เป็นต้นไป
ในกรณีนั้น tailwind.config.js ของคุณจะมีลักษณะดังนี้:
// tailwind.config.js
module . exports = {
// data-mode is used as an example, next-themes supports using any data attribute
darkMode : [ 'selector' , '[data-mode="dark"]' ]
…
} ตอนนี้ตั้งค่าแอตทริบิวต์สำหรับ ThemeProvider ของคุณเป็น data-mode :
// pages/_app.tsx
< ThemeProvider attribute = "data-mode" >ด้วยการตั้งค่านี้ คุณจะใช้คลาสโหมดมืดของ Tailwind ได้แล้ว ดังตัวอย่างก่อนหน้านี้:
ThemeProvider จะแทรกสคริปต์ลงใน next/head โดยอัตโนมัติเพื่ออัปเดตองค์ประกอบ html ด้วยแอตทริบิวต์ที่ถูกต้องก่อนที่ส่วนที่เหลือของเพจจะโหลด ซึ่งหมายความว่าหน้าเว็บจะไม่กะพริบไม่ว่าในกรณีใดๆ รวมถึงธีมบังคับ ธีมของระบบ หลายธีม และไม่ระบุตัวตน ไม่จำเป็นต้องมี noflash.js
ทำไมเพจของฉันยังกระพริบอยู่?
ในโหมดนักพัฒนา Next.js หน้าอาจยังคงกะพริบ เมื่อคุณสร้างแอปของคุณในโหมดการใช้งานจริง จะไม่มีการกะพริบ
เหตุใดฉันจึงได้รับข้อผิดพลาดเซิร์ฟเวอร์/ไคลเอ็นต์ไม่ตรงกัน
เมื่อใช้ useTheme คุณจะใช้เห็นข้อผิดพลาดของไฮเดรชั่นที่ไม่ตรงกันเมื่อเรนเดอร์ UI ที่อาศัยธีมปัจจุบัน เนื่องจากค่าหลายค่าที่ส่งคืนโดย useTheme ไม่ได้ถูกกำหนดไว้บนเซิร์ฟเวอร์ เนื่องจากเราไม่สามารถอ่าน localStorage ได้จนกว่าจะติดตั้งบนไคลเอ็นต์ ดูตัวอย่างวิธีแก้ไขข้อผิดพลาดนี้
ฉันจำเป็นต้องใช้ตัวแปร CSS กับไลบรารีนี้หรือไม่
ไม่. ดูตัวอย่าง
ฉันสามารถตั้งค่าแอตทริบิวต์คลาสหรือข้อมูลบนเนื้อหาหรือองค์ประกอบอื่นได้หรือไม่
ไม่. หากคุณมีเหตุผลที่ดีในการสนับสนุนฟีเจอร์นี้ โปรดเปิดประเด็น
ฉันสามารถใช้แพ็คเกจนี้กับ Gatsby หรือ CRA ได้หรือไม่?
ใช่ เริ่มตั้งแต่เวอร์ชั่น 0.3.0
สคริปต์ที่ฉีดถูกย่อขนาดลงหรือไม่
ใช่.
เหตุใด resolvedTheme จึงจำเป็น
เมื่อสนับสนุนการตั้งค่าธีมของระบบ คุณต้องแน่ใจว่าสิ่งนั้นสะท้อนให้เห็นใน UI ของคุณ ซึ่งหมายความว่าปุ่ม การเลือก ดรอปดาวน์ หรืออะไรก็ตามที่คุณใช้เพื่อระบุธีมปัจจุบันควรระบุว่า "ระบบ" เมื่อการตั้งค่าธีมระบบทำงานอยู่
หากเราไม่แยกความแตกต่างระหว่าง theme และ resolvedTheme UI จะแสดง "Dark" หรือ "Light" ซึ่งจริงๆ แล้วควรเป็น "System"
resolvedTheme แล้วมีประโยชน์สำหรับการปรับเปลี่ยนพฤติกรรมหรือสไตล์ขณะรันไทม์:
const { resolvedTheme } = useTheme ( )
< div style = { { color : resolvedTheme === 'dark' ? 'white' : 'black' } } > หากเราไม่ได้ resolvedTheme และใช้เฉพาะ theme คุณจะสูญเสียข้อมูลเกี่ยวกับสถานะของ UI ของคุณ (คุณจะรู้เพียงว่าธีมคือ "ระบบ" ไม่ใช่สิ่งที่แก้ไขแล้ว)
