개발자 매뉴얼 | 다크 모드

다크 모드(백엔드)

services/manageStyleSheet.js에서 사용할 변수(strict_mode, setting)를 설정하고, 원본 html은 수정하지 않고 그대로 사용합니다.

/***** services/colorDark.js *****/

// !important를 명시하는 요소 사용
const strict_mode = true;

// 구체적인 기본 색상 설정
const setting = {
   default_color: 'white',
   default_background: 'black',
   default_placeholder: 'grey',
   default_border: 'white'
};

// 세부 요소 설정은 하지 않고 원본 html 그대로 사용
const getRenderedHtml = (html_data) => { return html_data; }

다크 모드(프론트)

/***** src/ToggleButtons.js *****/
// app.js의 requestAPI함수를 props.e 함수로 호출
// 각각의 api 요청 정보를 props로 내려받고 이벤트 발생과 함께 매개변수로 올려줌
    const toggles = props.list.map((el, idx)=>{
        const toggle_e = (e)=>{
            if(e.target.ariaPressed){
                const search = new URL(window.location).searchParams.get('search');
                props.e(el.api, search);
            }   
        }
        return <ToggleButton 
            key={idx}
            value={el.label}
            onClick={toggle_e}
            style={{"fontWeight":"bold"}}
            >
                {el.label}
            </ToggleButton>
    })

다크모드에서 올려주는 api 정보들은 다음과 같습니다.

dark: ['color', 'dark']