CV uno Logo Text
<- Back To Blog

how to add dark mode to my resume website?

Bruno
Bruno ·
Let’s Create a CV 🚀

Introduction

As technology advances, user preferences evolve, and one feature that has gained popularity is dark mode. Implementing dark mode on my resume website not only enhances the visual appeal but also improves readability, especially in low-light conditions. In this article, I'll share how I added dark mode to my CV website created with cvuno.

Why Dark Mode?

Dark mode offers several advantages:

  • Reduced Eye Strain: Especially in dim environments, dark themes can lessen eye fatigue.
  • Battery Saving: For devices with OLED screens, dark mode can extend battery life.
  • Aesthetic Appeal: Many users find dark mode visually striking and modern.

Understanding cvuno's Customization

cvuno allows users to create personal CV websites quickly and effortlessly. While the platform offers a unique design tailored to each user's content, it also provides options for customization. Here’s how I approached adding dark mode to my resume website.

Step 1: Enable Dark Mode Feature

  1. Access Your cvuno Dashboard: Start by logging into your cvuno account.
  2. Navigate to Settings: Look for the settings section, where you can find options for visual customization.
  3. Select Dark Mode: If available, toggle the dark mode option to enable it. If cvuno doesn’t provide a direct option yet, you can consider the following workaround.

Step 2: Custom CSS Implementation

If cvuno doesn’t offer a built-in dark mode feature, you can add custom CSS to achieve this effect. Here’s how:

  1. Go to the Custom CSS Section: In your cvuno dashboard, look for an area where you can input custom styles.

  2. Add the Following CSS Code:

    body {
    background-color: #121212; /* Dark background */
    color: #E0E0E0; /* Light text color */
}
a {
    color: #BB86FC; /* Link color */
}
header, footer {
    background-color: #1F1F1F; /* Darker background for header and footer */
}

  3. Save Changes: After adding the custom CSS, save your changes and refresh your resume website to see the effects.

Step 3: Testing for Usability

Once dark mode is enabled, it’s crucial to test the website for usability:

  • Check Readability: Ensure all text is legible against the dark background.
  • Test Links: Make sure that links are still distinguishable and easy to click.
  • Feedback: Share your website with friends or mentors to gather feedback on the dark mode experience.

Step 4: Making Dark Mode Toggleable

To enhance user experience, consider adding a toggle feature for dark mode. Here’s a simple JavaScript code snippet:

  1. Add a Toggle Button: Create a button on your website that users can click to switch between modes.

    <button id="mode-toggle">Toggle Dark Mode</button>

  2. Implement the JavaScript:

    const toggleButton = document.getElementById('mode-toggle');
toggleButton.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
});

  3. Add CSS for Dark Mode:

    .dark-mode {
    background-color: #121212;
    color: #E0E0E0;
}

Step 5: Final Touches

  • Review Design Elements: Ensure all design aspects are coherent with the dark mode theme.
  • Mobile Responsiveness: Test how dark mode looks on mobile devices to ensure a seamless experience across platforms.

Conclusion

Adding dark mode to my cvuno resume website was a rewarding endeavor that enhanced its usability and modernity. Not only does it provide a visually appealing option for users, but it also showcases my adaptability to new trends.

If you’re ready to create your own CV website and explore features like dark mode, See an example CV to get inspired.

Call to Action

Try cvuno today and create your personal CV website in about 10 seconds. With options for dark mode and synced PDFs, it’s the perfect tool for job seekers looking to stand out!

Let’s Create a CV 🚀
how to add dark mode to my resume website? | CV UNO