Piccalilli supports Black Lives Matter. Code is always political.

Challenge: Toggle switch

Front-End Challenges Club - Challenge #002

Toggle switches are so hot right now, but every-so-often they’re implemented terribly, so naturally, that means we’re going to do a damn good job of this one to counter that!

What you’re building permalink

Demo shows toggle switch toggle between “on”, which is illustrated with a moon icon and “off”, which is illustrated with a sun icon. A consistent “dark mode” label is visible.

The brief permalink

Take the design assets and re-create this toggle switch with whatever front-end technology you want. Don’t worry too much about how the toggle switch affects wider state, such as affecting the page theme, but if you want to push it further, go for it!

Make sure that your challenge solution does the following as a minimum:

  • Uses semantic elements
  • Is usable with mouse, touch and keyboard
  • Is appropriately labeled
  • Presents focus state (you can find it in the design assets)

Bonus points awarded if:

  • You use modern CSS
  • Your solution is lightweight and performant
  • Your solution is fully accessible and uses appropriate aria attributes
  • You create appropriate transitions and/or animations between states

Assets permalink

I’ve used Figma to design this challenge because some folks couldn’t access Sketch. With Figma, you can run it with a completely free account!

Here’s some assets to get you going:

Here are some CSS Custom Properties for your colours:

Code language
CSS
:root {
--color-day-bg: #0984e3;
--color-day-icon: #ffe4a1;
--color-night-bg: #032b43;
--color-night-icon: #b9c6d3;
--color-light: #ffffff;
--color-dark: #4a4a4a;
--color-shadow-light: rgba(48, 48, 48, 0.15);
--color-shadow-mid: rgba(0, 0, 0, 0.25);
--color-shadow-dark: rgba(0, 0, 0, 0.9);
}

Wrapping up permalink

When you’ve tried building this one for yourself, head over to the solution to see how I built it!

See you at the next one 👋