How I Added Dark Mode to an Existing Medical Website

Earlier today, I worked on improving the user experience of a clinic website by adding a dark mode toggle. The layout was already clean and professional, but I wanted to help users browse more comfortably in the evening or under low-light conditions.

I used Tailwind CSS, a bit of custom CSS, and some JavaScript to make it all work. In this post, I am sharing the exact steps I followed, along with the issues I ran into and how I fixed them.

Step 1: Set Up Tailwind for Dark Mode

The website was already built with Tailwind CSS, so the first thing I did was update the Tailwind configuration file to enable dark mode using the class strategy.

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './public/index.html'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Using the class strategy means I can apply dark mode manually by toggling a class on the root HTML element.

Step 2: Add Basic Dark Mode Styles

Next, I edited the index.css file to define how the site should look in dark mode. These styles only apply when the HTML element has the dark class.

cssCopyEdit/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
}

html.dark {
  background-color: #181818;
  color: #f1f1f1;
}

This simple rule gave the site a dark background and light text when dark mode was active.

Step 3: Build the Toggle Button

I created a button to let users switch between light and dark themes. This button also saves the user's choice using localStorage so it stays consistent across sessions.

jsxCopyEdit<button
  onClick={() => {
    document.documentElement.classList.toggle('dark');
    localStorage.setItem(
      'theme',
      document.documentElement.classList.contains('dark') ? 'dark' : 'light'
    );
  }}
>
  Toggle Dark Mode
</button>

The logic is straightforward. It checks if dark mode is active, toggles the class, and stores the preference.

Step 4: Apply Saved Theme on Page Load

To make sure the selected theme is still active when the page reloads, I added this logic early in the main script or inside a React effect.

jsCopyEdit// Apply saved theme on load
if (localStorage.theme === 'dark') {
  document.documentElement.classList.add('dark');
} else {
  document.documentElement.classList.remove('dark');
}

Now the site remembers whether the user prefers light or dark mode, even after refreshing the browser or closing the tab.

Step 5: Adjust Existing UI Elements

Since the website was already live, I had to carefully inspect each section and component. Some custom icons, backgrounds, and buttons needed extra attention. I made the following updates:

• Adjusted background colors in feature sections

• Checked images and icons to make sure they looked good on dark backgrounds

• Verified that buttons remained visible and clickable

• Reviewed all text for proper contrast

These changes helped keep the experience consistent across both light and dark modes.

Step 6: Challenges I Faced

Here are some issues I ran into while working on this feature:

Third-party components
Some components ignored the dark class completely. I had to write specific overrides to style them correctly.

CSS conflicts
In a few places, Tailwind styles were being overridden by existing styles. I fixed this by increasing specificity where needed.

Lack of smooth transitions
The theme switch felt abrupt at first. I added Tailwind transition utilities to smooth out background and text changes.

Step 7: Final Touches

Once everything was functional, I went through the whole site one more time. I checked every page to make sure it was easy to read, and that everything worked as expected.

Here is what I focused on:

• Verified all input fields and forms worked in both themes

• Checked the contrast for headers, buttons, and links

• Used transition classes like transition-colors and duration-300 for a smoother effect

Left clear comments in the code for future updates

Final Thoughts

Working on this clinic site gave me a good opportunity to practice implementing dark mode in a real-world layout. It was not just about inverting colors. It required careful visual checks and respect for the existing brand.

If you are planning to add dark mode to a live site, I suggest starting with Tailwind’s class-based approach. Keep your CSS minimal at first, and gradually add overrides where needed. Always remember to test your changes in both themes, and think about how to store the user’s preference.

This feature now makes the clinic site more accessible and modern, which is always a step in the right direction.

View the Project

• Live site: https://sahal-web-dylan66s-projects.vercel.app/#home

• GitHub repository: https://github.com/Dylan66/sahal_web

Open to Feedback

If you have feedback, questions, or suggestions, feel free to leave a comment or open an issue on GitHub. I would love to hear how others approach dark mode in their projects.