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 a job seeker in today's digital age, having an appealing online presence is essential. One way to enhance your CV website is by adding a dark mode feature. Not only does it provide a modern look, but it also improves readability in low-light conditions. In this article, I’ll share practical steps on how to implement dark mode on your resume website created with cvuno.

Why Dark Mode?

Dark mode has become a popular choice for many users for several reasons:

  • Reduced Eye Strain: Dark backgrounds can be easier on the eyes, especially during night-time reading.
  • Battery Saving: On OLED screens, dark mode can save battery life.
  • Aesthetic Appeal: Many users prefer the sleek, modern look of dark themes.

Implementing Dark Mode

Step 1: Choose Your Color Scheme

To create a dark mode version of your CV website, you will need to choose an appropriate color scheme. A popular choice is a dark gray or black background with white or light-colored text. Here’s a simple color palette to consider:

  • Background: #121212 (Dark Gray)
  • Text: #E0E0E0 (Light Gray)
  • Links: #BB86FC (Purple)

Step 2: Add CSS for Dark Mode

To implement dark mode, you will need to add some CSS to your CV website. Here’s how you can do it:

body {
    background-color: #121212;
    color: #E0E0E0;
}
 
a {
    color: #BB86FC;
}

Step 3: Toggle Between Light and Dark Modes

To make your website user-friendly, it’s beneficial to provide a toggle switch for users to switch between light and dark modes. You can achieve this using a simple JavaScript snippet along with your CSS.

<button id="toggle">Toggle Dark Mode</button>
 
<script>
    const toggleButton = document.getElementById('toggle');
    toggleButton.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
    });
</script>
 
<style>
.dark-mode {
    background-color: #121212;
    color: #E0E0E0;
}
</style>

Step 4: Test Your Design

Once you’ve added the dark mode feature, it’s crucial to test the design. Check how the text looks on different devices and ensure that all elements are still readable. Make adjustments as necessary.

Step 5: Update Your CV Website on cvuno

If you are using cvuno to create your CV website, you can easily update your design with the new dark mode feature. Simply log into your cvuno dashboard, navigate to your settings, and input your CSS and JavaScript codes. Remember, cvuno makes it easy to create professional CV websites without the hassle of templates.

Conclusion

Adding a dark mode feature to your resume website can significantly enhance its appeal and usability. By following the steps outlined above, you can provide a modern browsing experience for potential employers.

For those looking to create a stunning personal CV website quickly, cvuno is the perfect solution. With just a few clicks, you can have a unique online presence that stands out.

See an example CV to get inspired!

If you're ready to take your CV to the next level, consider trying cvuno's premium features for more customization options. Happy job hunting!

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