나이트 기능 넣고싶은데요;;

피라미드 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023.07.11 22:38:43 806 (123.♡.♡.119)

답변 2

본문

안녕하세요 ?

sir홈피처럼 나이트 기능 갖출려면 css를 모두 손봐야 하나요?;;;

나이먹어서 그런가 화이트가 눈이 피로도가 높아서 그래요 ㅎㅎ;;

#그누보드5 #영카트5 #php

답변 2

배르만 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-07-11 23:14:05 119.♡.♡.81

간단하게는 다음처럼 구성해볼수 있습니다만

실제 적용시 어울리지 않는 색감등 부조화 요소가 있을수 있기 때문에

처음부터 테마에 따라 자동으로 유연하게 대응할수 있는 구조와 색감 기준을 정하고 만들거나

각 테마별 스타일을 분리하는것이 좋습니다.


<!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>