ํ‹ฐ์Šคํ† ๋ฆฌ ๋ทฐ

JS

Dark-mode

choi95 2021. 7. 2. 14:54

0

Question

ํ† ๊ธ€ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ํ…Œ๋งˆ(๋‹คํฌ ๋ชจ๋“œ/๋ผ์ดํŠธ ๋ชจ๋“œ)๋ฅผ ์„ค์ •ํ•˜๋ฉด ํ…Œ๋งˆ๊ฐ€ ๋ทฐ์— ๋ฐ˜์˜๋˜๋„๋ก ๊ตฌํ˜„ํ•˜๊ณ ์ž ํ•œ๋‹ค.ํ…Œ๋งˆ๋Š” ๋กœ์ปฌ์Šคํ† ๋ฆฌ์ง€์— ์ €์žฅํ•˜์—ฌ ์›นํŽ˜์ด์ง€๋ฅผ ๋ฆฌ๋กœ๋“œํ•˜๊ฑฐ๋‚˜ ๋‹ค์‹œ ์ ‘๊ทผํ–ˆ์„ ๋•Œ ์ €์žฅ๋œ ํ…Œ๋งˆ๋ฅผ ์ ์šฉํ•˜๋„๋ก ํ•œ๋‹ค.

 

Solution

document.addEventListener('DOMContentLoaded', () => {
    const theme = localStorage.getItem('theme');

    if(!theme) localStorage.setItem('theme', 'white');

    if(theme === 'dark') document.body.classList.add('dark');
    else document.body.classList.remove('white');

    document.body.style.visibility = 'visible';
})

document.querySelector('.toggle-button').onClick = e => {
    const theme = localStorage.getItem('theme');

    if(theme === 'dark') localStorage.setItem('theme', 'light');
    else localStorage.setItem('theme', 'dark');

    document.body.classList.toggle('dark');
}

 

Issue

1. ๋กœ์ปฌ์Šคํ† ๋ฆฌ์ง€์— ์ €์žฅ๋˜์–ด ์žˆ๋Š” ํ…Œ๋งˆ(key๊ฐ’)์˜ value๋ฅผ ์ฐธ์กฐํ•˜๊ธฐ ์œ„ํ•ด์„œ setItem()๊ณผ getItem() ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์˜€๋‹ค.

 

2. ํ…Œ๋งˆ์˜ value(dark/white)๊ฐ’์— ๋”ฐ๋ผ body ํƒœ๊ทธ์— dark ํด๋ž˜์Šค๋ฅผ ๋™์ ์œผ๋กœ ์ถ”๊ฐ€ ๋ฐ ์ œ๊ฑฐํ•˜์—ฌ ๋ฐฐ๊ฒฝ ํ…Œ๋งˆ ์ƒ‰์ƒ์„ ๋ฐ”๊พธ์—ˆ๋‹ค.

 

3. add()๋‚˜ remove()๊ฐ€ ์•„๋‹Œ toggle() ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ฃผ์–ด์ง„ ํด๋ž˜์Šค๋ฅผ ์ œ๊ฑฐํ•˜๊ฑฐ๋‚˜ ๋ฐ˜ํ™˜ํ•˜๋„๋ก ํ•˜์˜€๋‹ค.

 

4. ๋ฆฌ๋žœ๋”๋ง ์‹œ ๊นœ๋นก์ž„ ํ˜„์ƒ(flash of incorrect theme, FOIT)์„ ๋ง‰๊ธฐ ์œ„ํ•ด ์Šคํƒ€์ผ ์ ์šฉ ์ด์ „๊นŒ์ง€ body ํƒœ๊ทธ์˜ css ์†์„ฑ ์ค‘

    visibility์˜ 'hidden'์œผ๋กœ ์„ค์ •๋‘์—ˆ๋˜ ๊ฒƒ์„ ๋™์ ์œผ๋กœ 'visible' ์†์„ฑ์œผ๋กœ ๋ฐ”๊พธ์–ด ์ฃผ์—ˆ๋‹ค.

 

Refactoring

document.addEventListener('DOMContentLoaded', () => {
    const theme = localStorage.getItem('theme');

    if(!theme) localStorage.setItem('theme', 'white');

    document.body.classList.toggle('dark', theme === 'dark');

    setTimeout(() => {
        document.body.style.visibility = 'visible';
    }, 300);
})

document.querySelector('.toggle-button').onClick = e => {
    const theme = localStorage.getItem('theme');

    localStorage.setItem('theme', `${theme === 'dark' ? 'white' : 'dark'}`);

    document.body.classList.toggle('dark');
}

1. ์กฐ๊ฑด๋ฌธ ๋Œ€์‹ ์— toggle() ๋ฉ”์„œ๋“œ ๋‘ ๋ฒˆ์งธ ์ธ์ž๋กœ ์กฐ๊ฑด๋ฌธ์„ ํฌํ•จ์‹œ์ผœ ์กฐ๊ฑด์— ๋”ฐ๋ฅธ ๋‹จ๋ฐฉํ–ฅ ์ „์šฉ ์ž‘์—…์œผ๋กœ ์ „ํ™˜์ผ€ ํ•˜์˜€๋‹ค.

 

2. toggle-button css ์†์„ฑ ์ค‘ transition์ด ์žˆ๊ณ  duration์ด .3s๋กœ ์„ค์ •๋˜์–ด ์žˆ์–ด ๋ฆฌ๋žœ๋”๋ง ์‹œ ์—ฌ์ „ํžˆ ๊นœ๋นก์ž„ ํ˜„์ƒ์ด ๋ฐœ์ƒ    ํ•˜์˜€๋‹ค. ์ด๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด setTimeout() ํ•จ์ˆ˜๋ฅผ ์จ์„œ .3s ์ดํ›„์— ๋ชจ๋“  ์š”์†Œ๋“ค์ด ๋ณด์ด๋„๋ก ์ˆ˜์ •ํ•˜์˜€๋‹ค.

 

3. if๋ฌธ์˜ ์ข…์†์„ฑ์„ ๋ฒ—์–ด๋‚˜๊ธฐ ์œ„ํ•ด seItem() ๋ฉ”์„œ๋“œ ๋‘ ๋ฒˆ์งธ ์ธ์ž์— ์‚ผํ•ญ์—ฐ์‚ฐ์ž๋ฅผ ํ†ตํ•ด theme์˜ value ๊ฐ’์„ ์‹๋ณ„ํ•˜์˜€๋‹ค.

 

๋Œ“๊ธ€
๊ณต์ง€์‚ฌํ•ญ
์ตœ๊ทผ์— ์˜ฌ๋ผ์˜จ ๊ธ€
์ตœ๊ทผ์— ๋‹ฌ๋ฆฐ ๋Œ“๊ธ€
Total
Today
Yesterday
๋งํฌ
TAG
more
ยซ   2025/02   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
๊ธ€ ๋ณด๊ด€ํ•จ