Embracing Light and Dark Mode: Enhancing User Experience on My Website

Hey there, fellow friends and fellow developers!

I'm thrilled to share some exciting news about my website. I've just rolled out a super cool new feature – light and dark mode! 🌞🌙

Why I Took the Plunge

First things first, why did I go down the rabbit hole of implementing light and dark mode on my website? Well, it's all about enhancing your experience on my site, making it more enjoyable, and catering to your unique preferences. I get it; we all have different tastes, so I thought, "Why not let my users choose their own adventure?"

Behind the Scenes Tech Magic

To make this magic happen, I made use of some awesome tools and techniques. I harnessed the power of the useContext hook, combined it with the awesomeness of Gatsby, and sprinkled in some Tailwind CSS for good measure. Here's a bit of a technical peek under the hood:

The Theme Context

import React, { useState, useEffect, createContext, useContext } from 'react';

const ThemeContext = createContext();

// Getting dark mode information from OS!
const supportsDarkMode = () => window.matchMedia('(prefers-color-scheme: dark)').matches === true;

const ThemeProvider = ({ children }) => {
  const [dark, setDark] = useState(false);

  const toggleDark = () => {
    const newDark = !dark;
    localStorage.setItem('dark', JSON.stringify(newDark));
    setDark(newDark);
  };

  useEffect(() => {
    // Getting dark mode value from localStorage!
    const lsDark = JSON.parse(localStorage.getItem('dark'));
    if (lsDark !== null) {
      setDark(lsDark);
    } else if (supportsDarkMode()) {
      setDark(true);
    }
  }, []);
};

A User-Friendly Experience

I didn't stop at just offering light and dark mode. I wanted the transition between these modes to be as smooth as silk. That's why I store your theme preference in your browser's local storage, so you don't have to reset it every time you visit. Plus, I've added a neat little feature that automatically detects your system-wide dark mode preference. It's like I'm reading your mind, right?

How to Get In on the Fun

Using my light and dark mode feature is a breeze:

Keep an eye out for the theme toggle button, usually chilling in the top right or left corner of the screen.

Click that button to switch between light and dark mode – it's like magic!

Your preference will be saved, so the next time you drop by my site, it'll remember your chosen mode.

Why It's Good for You

Improved Readability: Light mode is perfect when you're basking in the sun or just need those crisp, clear visuals.

Reduced Eye Strain: Dark mode is your go-to for late-night coding sessions or reading in the dark. Say goodbye to squinting!

Battery Savings: If you're on a device with an OLED screen, dark mode can even help save battery life. Sweet, right?

Personalized Experience: This is all about you! You get to choose the mode that vibes with your style and mood.

Accessibility: I care about every single visitor. Light and dark mode make sure everyone feels at home.

By embracing light and dark mode, I'm putting your user experience front and center. It's all about making your time on my site as enjoyable as possible. So, go ahead, toggle between light and dark mode and discover the reading experience that suits you best. I hope you have a blast customizing your browsing journey! 🎉