Dark mode

[Muphet]

As I am currently in the process of "upgrading" CVFY mostly for personal use, i will push few smaller changes to original repo maybe someone finds those useful.

This PR is the tailwindcss dark mode for editor only (print remains the same). It adds dark variant classes for text/backgrounds and lighter variant of colors used in the project, although color shade choice was random and probably requires attention.
It also adds composable to switch between light and dark mode and save to localstorage. I used separate key cvSettings-darkmode as current project for some reason saves separate options for each language (that probably should be changed) to remain consistent for all languages. I also added toggle button fixed to top right of the preview window.

The one thing i changed for print are the technical skills "tags" as they don't look good in gray

It's my first PR to open source so it would be nice to know if I made a mistake somewhere ;)

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
cvfy	✅ Ready (View Log)	Visit Preview	cc37d63

[claudiabdm]

Hi!

Even though dark mode is not a priority right now and probably it would take some time to implement, I thank you for your hard work and ideas! Just a few things to add and think about.

I agree that dark mode colour palette needs more thinking as the contrast doesn't seem good enough for accessibility and colours looks a bit off.

For setting the dark mode, I think the approach with Tailwind CSS dark selector is a bit chaotic and hard to maintain (although it may make sense with the way the colour styles are organise now). In my opinion, using prefers-color-scheme media in a CSS stylesheet could be a better way to set the two different colour palettes. We can create each theme using Tailwind colour values with Tailwind's theme() function. This would need some re-factoring but I could work on that beforehand. We would still need JavaScript to for the switch button component and take into account the user preference (it is missing in the composable).

Also, I don't think is a good idea to apply the dark mode to the CV preview as this is an exact representation of the PDF. However, we could reduce the brightness and contrast with CSS filter() function for the dark mode.

This and this are some articles that mention the above and explain the implementation I think is cleaner and more maintainable.

I did it before for my portfolio website if you would like to check for the implementation in Nuxt/Vue (without Tailwind though):

• CSS stylesheet with the light and dark themes.
• Switch mode button

Regarding the button placement, it overlaps with the "Buy me a coffee" button in smaller screens so it needs some fixing and maybe more thinking into the design.

Let me know what you think about this!