CSS Variables | Themes Day 68

We’re still on it with variables. This time it was about themes. It forces you to think of things in components which is pretty neat. I loved working on the UI though. I’m nowhere the level I want but consistency will get me there 🙂

okay enough talk and more pics so, as always I started with the design and did the two themes the light and the dark

I then moved to the code. Started with the structure of the page (HTML)

Then started styling one section at a time. As you will notice from the images… layout was an issue.

 

 

At this point, I spent too long on trying to figure out what’s causing my style to make the cards not align properly so I decided to move on to make the site function.

I started with the icon. I want to toggle it from night and day. and that was pretty easy. listen to a click event and change the photo

Then I moved on to the theme. So here, I check for the click and then based on the state of the page change the colors accordingly. As you can see not a lot changes just the background color, shadow, and the test color in the heading.

Okay cool. Now all that is left it the layout… It was tough is it the position value? is it the display property, what is going on?  But then… float worked!

 

YAY! Okay let’s bring back things and what do we have

 

You can check out the demo here.

That’s all for today.

Have a lovely day, and happy coding 🙂

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *