나이트 기능 넣고싶은데요;;
본문
안녕하세요 ?
sir홈피처럼 나이트 기능 갖출려면 css를 모두 손봐야 하나요?;;;
나이먹어서 그런가 화이트가 눈이 피로도가 높아서 그래요 ㅎㅎ;;
답변 2
간단하게는 다음처럼 구성해볼수 있습니다만
실제 적용시 어울리지 않는 색감등 부조화 요소가 있을수 있기 때문에
처음부터 테마에 따라 자동으로 유연하게 대응할수 있는 구조와 색감 기준을 정하고 만들거나
각 테마별 스타일을 분리하는것이 좋습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
html { background-color: #fff; color: #000; }
.invert { filter: invert(1); }
.lightblue_section { background-color: lightblue; }
.orange_section { background-color: orange; }
</style>
<script>
function toggle_theme() {
var themename = document.documentElement.className;
if (themename == '') {
document.documentElement.className = 'invert';
} else {
document.documentElement.className = '';
}
}
</script>
</head>
<body>
<h1>h1</h1>
<div>div</div>
<section class="lightblue_section">
<h2>lightblue section</h2>
<article class="orange_section">
<h2>orange article</h2>
</article>
</section>
<img src="https://sir.kr/img/common/svg/logo-sir-OFF.svg?v2" alt="logo">
<button onclick="toggle_theme()">toggle theme</button>
</body>
</html>
흑 네 감사합니다 ^
네 다크모드용 css를 따로 만드셔야 합니다.
네 ㅠㅠ 감사합니다
답변을 작성하시기 전에 로그인 해주세요.
