가장 간단한 dark toggle mode으로 푸드 블로그 웹페이지를 만들었습니다

Source: Dev.to

어떻게 시작되었는가

포트폴리오를 강화하기 위해 일련의 웹페이지를 만들고 싶었고, 각 프로젝트마다 제 기술을 조금씩 더 발전시키고자 했습니다.
Pinterest에서 영감을 얻은 푸드 블로그 레이아웃과 약간의 창의성을 더해 시작했습니다.

완벽하진 않지만, 몸을 펴고 최소 한 시간은 집중해서 작업한 것이 기쁩니다, 졸지 않고.

“제가 레이아웃 작업에 사용한 웹사이트 디자인의 스크린샷.”

다크 토글 모드를 어떻게 설정했나요?

다크 토글을 위해 Font Awesome의 달과 태양 아이콘을 사용했으며, 한 번에 하나만 보이도록 했습니다.

/* hide the sun icon initially */
.theme-icon .fa-sun {
    display: none;
}

페이지를 라이트 모드로 유지했기 때문에, 사용자는 태양 아이콘이 숨겨진 상태였습니다.

“달 토글만 보이는 내 웹사이트의 사진.”

HTML

    **
    **

아이콘을 위한 CSS

#toggle:checked + .theme-icon .fa-sun {
    display: inline-block;
}
#toggle:checked + .theme-icon .fa-moon {
    display: none;
}

페이지 색상 변경

토글이 올바르게 대상이 되면 :has()(또는 형제 ~ 선택자)를 사용해 다른 스타일을 변경할 수 있습니다. 체크박스가 부모 요소 안에 있기 때문에 :has()를 선택했습니다.

Note: :has()는 비교적 새로운 기능이며 오래된 브라우저에서는 동작하지 않을 수 있습니다. 더 넓은 호환성을 위해 JavaScript로 클래스를 토글하는 방법을 사용할 수 있습니다.

body:has(#toggle:checked) {
    background: linear-gradient(to bottom, #ffe998 30%, #57370d);
    --background-color: #bfbfbf;
    --heading-color: #202221;
    --heading-font: #dfa537;
    --font-color1: #f0b438;
    --background-color-shadow: #c9c6a1;
    --trending-background: #2f3a55;
    --trending-div-background: #6e6f73;
    --trending-div-background-shadow: rgb(231,226,222);
    --trending-font: #7c371a;
    --trending-circle-border: #e7cace;
    --button-font: black;
    --sub-color: #2e311a;
    --sub-border: #1a151f;
    --footer-color1: #e3d5bb;
    --footer-right-link-hover: #b68b4b;
    --footer-right-link: #bfbfbf;
    --footer-p: #cdcec8;
    --heading-social-media-hover: #dfa537;
    --footer-two: #dfa537;
    --button-color-hover: #1a151f;
    --button-background-hover: #ad9664;
    --trending-heading-p: palegoldenrod;
    --button-background: goldenrod;
}

결과

라이트 테마

라이트 테마의 내 웹사이트.

다크 테마

다크 테마의 내 웹사이트.

For t

파트 2

JavaScript를 사용하여 스페인어 food‑blog 사이트를 영어와 그 반대로 전환할 수 있는 언어 스위처를 어떻게 구축했는지 시연하겠습니다.