260205 (다크모드)

<!-- 테일윈드 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div>
	<button class="btn-toggle-theme">테마토글</button>
</div>

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt repellat debitis alias laboriosam, sapiente labore laudantium quidem architecto id quis enim facilis repellendus ullam qui quas quaerat esse deserunt modi!</div>

<div class="color_primary">안녕! 반가워</div>

css에 변수 적용

@font-face {
    font-family: 'YeogiOttaeJalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

/* 폰트 적용 */
html > body,
html > body input,
html > body button,
html > body textarea {
	font-family: 'YeogiOttaeJalnan';
}

/* 테마시작 */
/* 테마 light */
:root {
	--background-color: #fff;
	--text-color: #222;
	--primary-color-1: #42f59b;
}

/* 테마 dark */
:root.dark {
	--background-color: #141414;
	--text-color: #f5f5f5;
	--primary-color-1: #42f59b;
}

/* 테마 적용 */
:root {
	color: var(--text-color);
	background-color: var(--background-color);
	transition: all .3s;
}

.color_primary {
	color: var(--primary-color-1)
}

:root.dark .color-primary {
	filter: brightness(150%);
}

console.clear();


// 방법1 this를 사용할때
// $('.btn-toggle-theme').click(function(){
// 	$(':root').toggleClass('dark');
// });

$('.btn-toggle-theme').click(() => $(':root').toggleClass('dark'));