Designing an attractive dark mode toggle in Mediumish

Table of contents

• Why toggle design matters
• Types of toggle buttons
• Basic HTML structure for toggle
• Styling the toggle with CSS
• Adding smooth animation
• Accessibility considerations
• Best practice tips
• FAQ

Why toggle design matters

Even if your dark mode functionality is technically perfect, a poorly designed toggle can confuse users or make the feature feel secondary. A well-crafted toggle communicates its purpose instantly, invites interaction, and fits seamlessly with the site's style.

Mediumish is a content-focused theme, so the toggle should be minimal yet distinct enough to be noticed without distracting from reading.

Types of toggle buttons

There are several ways to present a dark mode toggle:

• Switch-style toggle: Resembles a mobile switch, sliding between light and dark positions.
• Icon-based toggle: Uses sun/moon icons to indicate light and dark mode.
• Text label toggle: Displays "Light" and "Dark" labels, changing on click.
• Hybrid toggle: Combines icon and label for clarity.

For Mediumish, icon-based or hybrid toggles often work best since they are compact and universally understood.

Basic HTML structure for toggle

Here's a minimal example using an icon-based button:

<button id="theme-toggle" aria-label="Toggle dark mode">
  <span class="icon-sun">☀️</span>
  <span class="icon-moon">🌙</span>
</button>

The two icons can be shown/hidden depending on the active theme.

Styling the toggle with CSS

We can style the button to look modern and consistent with Mediumish aesthetics:

button#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  padding: 0.5em;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

button#theme-toggle:hover {
  background-color: rgba(0,0,0,0.05);
}

[data-theme='dark'] .icon-sun { display: none; }
[data-theme='light'] .icon-moon { display: none; }

This keeps the UI minimal while making the toggle feel interactive through hover feedback.

Adding smooth animation

A subtle animation can make the toggle feel responsive and polished. For example, fading icons in and out:

.icon-sun, .icon-moon {
  opacity: 1;
  transition: opacity 0.3s ease;
}

[data-theme='dark'] .icon-sun {
  opacity: 0;
}

[data-theme='light'] .icon-moon {
  opacity: 0;
}

This gives a smooth transition when switching themes, instead of instantly replacing the icon.

Accessibility considerations

• Use aria-label or aria-pressed attributes so screen readers can interpret the toggle's purpose.
• Ensure color contrast is sufficient in both modes.
• Allow toggling via keyboard navigation using the tab key and Enter or Space.

Good accessibility ensures that all users, including those with assistive technologies, can use your dark mode feature effectively.

Best practice tips

• Place the toggle in a predictable location, such as the header or top-right corner.
• Use universally recognized icons to reduce confusion.
• Provide instant feedback on interaction, either through animation or state change.
• Test across devices to ensure touch targets are large enough on mobile.

Following these tips ensures your dark mode toggle not only works but enhances the overall Mediumish experience.

FAQ

Q: Can I use SVG icons instead of emojis?

A: Yes, SVGs offer better styling control and scalability across devices.

Q: Should the toggle remember its position?

A: Absolutely, store the user's preference in localStorage for a consistent experience.

Q: Is animation necessary?

A: Not required, but subtle animations can make the UI feel more refined.