답변 2개
채택된 답변
+20 포인트
2년 전
간단하게는 다음처럼 구성해볼수 있습니다만
실제 적용시 어울리지 않는 색감등 부조화 요소가 있을수 있기 때문에
처음부터 테마에 따라 자동으로 유연하게 대응할수 있는 구조와 색감 기준을 정하고 만들거나
각 테마별 스타일을 분리하는것이 좋습니다.
</p>
<p><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
html { background-color: #fff; color: #000; }
.invert { filter: invert(1); }</p>
<p> .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="<a href="https://sir.kr/img/common/svg/logo-sir-OFF.svg?v2"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/svg/logo-sir-OFF.svg?v2"</a> alt="logo">
<button onclick="toggle_theme()">toggle theme</button>
</body>
</html></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
답변대기
채택
채택
답변대기
답변대기
답변대기
채택