HTML - 티스토리 다크모드 토글 버튼

HTML

<script>

	$(window).on('load', function(){

		if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
			document.documentElement.classList.add('dark');
			localStorage.theme = 'dark';
			$('.theme-toggle button').html('☀️');
		} else {
			document.documentElement.classList.remove('dark');
			localStorage.theme = 'light';
			$('.theme-toggle button').html('🌙');
		}

		$('.theme-toggle').on('click', ()=>{
			if(localStorage.theme === 'dark')
			{
				document.documentElement.classList.remove('dark');
				localStorage.theme = 'light';
				$('.theme-toggle button').html('🌙');
			}
			else
			{
				document.documentElement.classList.add('dark');
				localStorage.theme = 'dark';
				$('.theme-toggle button').html('☀️');
			}

		})
	});

</script>


<div class="util">

    <div class="theme-toggle">
        <button type="button">🌙</button>
    </div>

</div>

 

CSS

/* 다크모드 */
.dark body{
	background-color: #161618 !important;
	color: rgb(255, 255, 255) !important;
	font-weight: 700 !important;
}