I created a food blog webpage with the simplest dark toggle mode

Source: Dev.to

How it all began

I wanted to create a series of webpages to improve my portfolio, each project pushing my skills a little further.
I started with a food‑blog layout inspired by Pinterest and a dash of creativity.

It isn’t perfect, but I’m glad I sat up straight and worked on it for at least an hour instead of dozing off.

“A screenshot of the website design I used to work on my layout.”

How did I set up the dark toggle mode?

For the dark toggle I used Font Awesome’s moon and sun icons, ensuring that only one is visible at a time.

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

I kept the page in light mode, so the sun was hidden from the user.

“A picture of my website showing that only the moon toggle is visible.”

The HTML

    **
    **

The CSS for the icons

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

Changing the page colours

Once the toggle is correctly targeted, use :has() (or the sibling ~ selector) to change any other styles. I chose :has() because my checkbox lives inside a parent “.

Note: :has() is relatively new and may not work in older browsers. For broader compatibility, you can toggle a class with JavaScript instead.

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;
}

The result

Light theme

My website in light theme.

Dark theme

My website in dark theme.

For t

Part 2

I shall demonstrate how I built a language switcher to switch my Spanish food‑blog site into English and vice versa with JavaScript.