CV uno Logo Text
<- Back To Blog

how to add dark mode to my resume website?

Bruno
Bruno ·
Let’s Create a CV 🚀

Introduction to Dark Mode for Your Resume Website

As a job seeker, having a standout CV website is crucial, and enhancing it with features like dark mode can significantly improve the user experience. Dark mode not only provides a modern aesthetic but also reduces eye strain for visitors. In this post, I'll share practical steps on how to implement dark mode on your CV website created with cvuno.

Why Dark Mode Matters

  • Aesthetic Appeal: Dark mode gives your CV website a sleek, modern look.
  • Eye Comfort: It’s easier on the eyes, especially in low-light environments.
  • Battery Saving: For users on mobile devices, dark mode can help save battery life.

How to Add Dark Mode to Your CV Website

Step 1: Check Your cvuno Settings

Firstly, ensure your CV website is created using cvuno, which allows for flexible customization. While cvuno does not require templates, you can still adjust the design elements to include dark mode features.

Step 2: Use CSS for Dark Mode

With cvuno, you can easily integrate custom CSS. Here’s a simple example of how to achieve dark mode using CSS:

body {
    background-color: #121212; /* Dark background */
    color: #ffffff; /* Light text color */
}
 
a {
    color: #bb86fc; /* Light purple for links */
}
 
/* Button styles */
button {
    background-color: #1f1f1f;
    color: #ffffff;
    border: 1px solid #bb86fc;
}

Step 3: Implement a Toggle Button

To allow users to switch between light and dark modes, you can implement a toggle button. Here is an example of how you might structure it:

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

You can then use JavaScript to switch classes when the button is clicked:

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

Step 4: Test Your Dark Mode

After implementing the dark mode, it’s essential to test it across various devices and browsers. Ensure the readability of text and the visibility of links in both modes.

Step 5: Promote Your Dark Mode Feature

Once your dark mode is live, promote this feature on your CV website. Mention it in your resume summary or skills section to showcase your tech-savvy side to potential employers.

Benefits of Using cvuno for Your CV Website

  • Quick Setup: With cvuno, you can create your CV website in about 10 seconds.
  • Synced PDFs: Your CV is automatically generated in a downloadable PDF format.
  • No Templates: Each CV website is uniquely designed for readability and recruiter flow.
  • ATS Friendly: Your CV will pass through common applicant tracking systems seamlessly.

Premium Features

Consider upgrading to cvuno's Premium service for added benefits like:

  • Full watermark removal for just $3.
  • Access to the Bruno AI assistant, which allows for 100 smart edits each day.
  • Flash priority support for any immediate needs.

Conclusion

Adding dark mode to your CV website can significantly enhance the user experience and showcase your modern web design skills. By following the steps outlined above, you'll not only improve your website's aesthetics but also create a more comfortable browsing experience for recruiters.

Feel free to explore See an example CV to get inspired by how a dark mode feature can elevate your CV website.

Ready to take your CV website to the next level? Try cvuno today and create your personalized CV website in just seconds!

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