DEV Community

Cover image for I created a food blog webpage with the simplest dark toggle mode
Manha AK
Manha AK

Posted on

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

#webdev #css #html #beginners

I created a food- blog website to test my front-end skills and in a span of a month, I learnt to add language switcher and dark toggle mode — in the simplest way possible.

How it all began

I had wanted to create a series of webpages to improve my portfolio and, I wanted to do so by improving my skills with each project.
I began with a food blog website with the layout inspirations from pinterest and a bit of creativity.
Though it isn't the best, I am glad I decided to sit up straight and work on it atleast an hour rather than doze off.

A screenshot of the website design I used to work on my layout
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 mode, I used a moon icon and a sun icon from font awesome (a website for free fonts) and ensure that only one of them stay displayed to the user at a time.

/*hiding the sun icon in css*/
.theme-icon .fa-sun{
    display: none;
}
Enter fullscreen mode Exit fullscreen mode

I kept the webpage in light mode so the sun was kept out of user's sight.

a picture of my website depicting that only the moon toggle is visible
a picture of my website depicting that only the moon toggle is visible

Then, I added a checkbox and put the two icons inside the label.(This was because I wanted it inside a div to ensure my layout works. Else, you can do it outside and target it via a ~ selector in css.

This only works for siblings and since my checkbox is inside a div ie a parent-child relation, I had to use a :has() psuedo class to target the divs outside it).

A checkbox makes it simple to toggle between states without complex JavaScript.

 <input type="checkbox" id="toggle">
            <label for="toggle" aria-label="dark toggle mode" class="theme-icon">
                <i class="fa-solid fa-moon icon"></i>
                <i class="fa-solid fa-sun icon"></i>
            </label>
Enter fullscreen mode Exit fullscreen mode 
#toggle:checked + .theme-icon .fa-sun{
    display: inline-block;
}
#toggle:checked + .theme-icon .fa-moon{
    display:none;
}
Enter fullscreen mode Exit fullscreen mode

Once you're done targeting the toggle correctly, target what selectors you want to change color of with the :has() or ~ selector( based on how you have placed the checkbox). [I used :has()]

Note: The :has() selector is relatively new and may not work in older browsers. For wider compatibility, consider using JavaScript to toggle classes.

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;
}
Enter fullscreen mode Exit fullscreen mode

After you're done with this, check what happens when you click on the moon icon.
take my site as an example:

light theme
my website in light theme

dark theme
my website in dark theme

For the 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.

Top comments (0)