Usefuldevtools.com
☕

Dark Mode Toggle

0 viewsmedium
Background:
Dark Mode Toggle
1
2
3
4
5
6
7
8
9
10
11
<div class="theme4">
  <input type="checkbox" class="input4" />
  <svg class="icon4 icon-moon4" fill="none" viewBox="0 0 24 24">
    <path d="M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z" fill="currentColor"/>
  </svg>
  <svg class="icon4 icon-sun4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="5"/>
    <path d="m12 1 0 2m0 18 0 2M4.22 4.22l1.42 1.42m12.72 12.72 1.42 1.42M1 12l2 0m18 0 2 0M4.22 19.78l1.42-1.42m12.72-12.72 1.42-1.42"/>
  </svg>
  <span class="theme-label4">Dark Mode</span>
</div>
Was this helpful?

What is inside Dark Mode Toggle

Dark Mode Toggle is a CSS checkbox built with transforms, layered shadows, defined in 58 lines across 10 selectors.

25
CSS properties
10
Selectors
58
Lines of CSS
3
Formats

Techniques used

TransitionsTransformsShadowsActive stateChecked stateFlexboxCustom properties

CSS properties in this component

align-itemsbackground-colorborderborder-radiusbox-shadowcolorcursordisplayfillfont-familyfont-sizefont-weightgapheightleftmargin-leftopacitypadding-rightpositionstroketoptransformtransitionwidthz-index

Accessibility check1 to fix

  • Built on a native <input> element, so keyboard focus and screen reader semantics work without extra attributes.
  • No focus style is defined. Add one before shipping, or keyboard users lose track of position.

These notes are generated by reading this component's own source, so they describe what it actually does rather than what a template says. Copy the code above in HTML, CSS, Tailwind and adapt it freely.