코드 (JQuery, Tailwindcss)
<html lang="ko" data-theme="dark">
<script>
let theme = localStorage.getItem('data-theme');
$('html').attr('data-theme', theme);
function themeChange() {
if ($('html').attr('data-theme') == 'dark') {
$('html').attr('data-theme', 'light');
localStorage.setItem('data-theme', 'light');
return;
};
if ($('html').attr('data-theme') == 'light') {
$('html').attr('data-theme', 'dark');
localStorage.setItem('data-theme', 'dark');
return;
};
};
</script>
<button class="btn btn-ghost nomal-case text-lg" onclick="themeChange()">테마 변경</button>
</html>
설명
jquery의 attr을 사용해서 html에 할당된 data-theme값을 변경해주고,
새로고침이 되어도 유지가 되도록 localStorage의 get,set item을 사용하여 저장 / 불러오기를 했다.
참고
https://velog.io/@yijaee/%EB%8B%A4%ED%81%AC%EB%AA%A8%EB%93%9C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0
출처
직접 만들었습니다!
