const theme = localStorage.getItem('theme');
// console.log(theme); // νμ¬ themeλ₯Ό μ μ μμ. // dark || light
if(theme) {
document.documentElement.SetAttribute('data-theme', theme);
}
localStorage ::
Storage κ°μ²΄λ λ¨μν key-value μ μ₯μμ΄λ©°, μ΄λ κ°μ²΄μ λΉμ·νλ€.
μ΄ λ°μ΄ν°λ€μ νμ΄μ§ λ‘λ©μλ μ¨μ νκ² μ μ§λλ€. (λ€μ μΉνμ΄μ§μ μ μ ν λ λ§μ§λ§ μ€μ μ λΆλ¬μ¬ μ μλ€.)
getItem(key)
:: ν€μ ν΄λΉνλ κ°μ λ°μμ¨λ€.
setItem(key, value)
:: ν€, κ°μ 보κ΄νλ€.
document.documentElement
===<HTML>
setAttribute(μμ±μ΄λ¦, μμ±κ°)
:: μ νν μμ(element)μ μμ±(attribute)κ°μ μ νλ€.
// μμ€ν
μ€μ νμΈ window.matchMedia() :: CSSμ λ―Έλμ΄μΏΌλ¦¬κ° νμ¬ νμ΄μ§μ ν΄λΉνλμ§ νμΈ.
const currentTheme = localStorage.getItem('theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
currentTheme μμμμ
localStorage
κ° 'theme'
λ κ°μ κ°μ§κ³ μκ±°λ window.matchMedia(...)
κ° 'dark'
μΌ λ,
λ μ€ νλκ° trueμ΄λ©΄ 'dark'
, falseμ΄λ©΄ 'light'
μ΄λ€.
window.matchMedia(medaiQueryString)
:: μλ°μ€ν¬λ¦½νΈλ₯Ό μ΄μ©ν΄μ μ μνλ μΉ λΈλΌμ°μ μ ν¬κΈ°λ₯Ό μ μ μλ€.
μμ±
media
:: mediaQueryStringμ λ°ν.matches
:: λ²μμ λ§λμ§ κ²μ¬. true false λ°ν.
// μμ μ΄μ΄μ..
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
console.log(currentTheme); // (1)
document.documentElement.setAttribute('data-theme', newTheme);
locaStorage.setItem('theme', newTheme);
console.log(newTheme, currentTheme); // (2)
(1) dark μΌ λ, (2) light dark
currentTheme
λ νμ¬ μλ‘κ³ μΉ¨ν ν ν
λ§μ΄λ©°, κ³Όκ±°μ ν
λ§μ΄λ€.
newTheme
λ μ§κΈ λΉμ₯μ ν
λ§λ₯Ό λνλΈλ€.
'π£codeLab' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
SVG μ°Έκ³ (0) | 2021.08.31 |
---|---|
μ€ν¬λ‘€ μ μλμ° νλ¨μ κ³ μ νκΈ° (0) | 2021.08.25 |
κ°μμ νμλ₯Ό μ¬μ©ν΄ backgroud λμ΄μ λμ΄ μ μ© (0) | 2021.08.04 |
ν΄λ¦ λλ μ«μ μ λ ₯ μ λ§μ ꡬνκΈ° (0) | 2021.08.03 |
sticky section scroll (0) | 2021.07.05 |