Vikunja Dark Mode

I think it would be nice to have a Dark Mode (I am using Dark Mode in almost every app that allows me too, and I find it way more confortable for the eyes, especially when we spend hours in front of screens).
Mind if I play a bit with CSS and post the result in a few days? :slight_smile:

2 Likes

Dark mode is a recurring feature request :slight_smile:

Unfortunately, it is kind of blocked by

Having proper css variables in bulma would make this rather easy to add
so Iā€™d like to wait until we have those. On the other hand, the issue
has been open for more than 6 months now without much progress so we
might as well go ahead and implement that ourselves.

1 Like

This is my number one ā€˜thing to tackle nextā€™ too. Having been near blinded tinkering with vikunja-desktop at 11pm a week or so ago =D
Busy with work for the next 2 or 3 weeks thoughā€¦

I have no experience with Bulma either.

1 Like

Thanks. One thing ā€œeasyā€ to do (as in I know how to do it) but not sure if ā€œbestā€ is to overlay a CSS file on top of Vikunjaā€™s CSS. I can try and see what I can do with it.
This brings me to one question: Vikunja is not open source, right? So, how are these potential modifications seen by the core devs? Just wondering, donā€™t want to mess anything :slight_smile:

Oh it is Open-Source :slight_smile: (just wondering, how have you found Vikunja if not through the usual oss channels?)

Iā€™d accept a pr for that but keep in mind it would only be a workaround until thereā€™s a proper solution in bulma. As such, it could break in future versions which would then require new PRs (aka I wouldnā€™t really maintain it) :upside_down_face:

Ok! (first saw Vikunja in this amazing list ā€“ so many things to play around! - GitHub - awesome-selfhosted/awesome-selfhosted: A list of Free Software network services and web applications which can be hosted on your own servers).

Fair enough. Since Iā€™ll try something for myself might as well share and try to keep my tweaks updated. And since it may be as simple as overlaying a CSS file on the browser (multiple extensions for that) it may as well not be necessary to complicate Vikunja development (i.e. letā€™s wait for bulma then).

Just started testing some styles, will have some news soon.

1 Like

Just FYI the wording ā€˜Free Softwareā€™ on this list means free as in freedom and not in price. That means by definition everything you find there is implied to be open-source (and more). Else it would not qualify.

Or to quote the wikipedia entry the awesome-list links to itself:

Sorry in advance for sidetracking the issueā€¦

2 Likes

Thanks for clarification. Thatā€™s the greatness of opensource. Sometimes, somewhere, people share great thinks for the sake of sharing. Sharing increases sharing.

1 Like

And speaking of sharing. Hereā€™s the current state of a dark-compact style for Vikunja. Still a lot work to do under the hood. But you get the idea: dark colors (for easyness of the eyes); compacting things a bit (for more info on the screen without scrolling - I have a LOT of items); and reducing fancyness :slight_smile: (shadows, roundings, etcā€¦ because I like it :wink: ).

Not bad! I feel like the buttons could use a bit more spacing around the icons, but I guess thatā€™s pretty much a matter of personal taste.
Is that the Vikunja Logo with inverted colors?

re: Free Software and Money (shameless plug ahead): If Vikunja is useful to you, please consider supporting me on github or buying me a coffee. Thanks!

Maybe right, will try to give some elements more space to breathe

Yes :frowning_face: since ā€œvikunjaā€ word is part of the logo, it was the easy and lazy way to make it readable against the darker background. But the logo become weird.

will do! right now, for numerous reasons (actually only 2) I donā€™t have a lot of work/tasks but as soon as I get sorted out I am eagering to make heavy use of Vikunja. Only felt like this when I used Things for mac/iOS a while back bug eventually had to let it go since I also use Windows and Linux, and wanted a more versatile todo app. Vikunja for the rescue!

1 Like

Hi Bruno,

Is it possible to get a copy of your dark mode CSS code? Iā€™m interested in modifying it to have dark blue colors instead of black/grey.

Thanks!

1 Like

Sure! But right now itā€™s literally unusable (canā€™t see whatā€™s being edited) but as soon as I get it done Iā€™ll post it here.

1 Like

Hi everyone. Just finished a first usable dark mode. Still work to do (especially on the edit screens) but still I think itā€™s worth to release it. It will always be a WIP and, remember, not oficial nor guaranteed to always work at all times :innocent:.

Get it on GitHub: GitHub - bmscmoreira/VikunjaStyles: Repository of custom CSS styles for the Vikunja to-app.

Separated stylesheets mean you can combine them to achieve different looks! (but dark-compact-styled will get the most love for sure).

Be well and be safe.

1 Like

That looks great!

The creator on bulma told me on twitter he is working on a themable version of bulma with css variables - a beta should be due soon. Once that happens, weā€™ll surely can find a way to integrate the themes into Vikunja directly.

1 Like

Great news! The CSS code is not super clean but as this is intended as temporary I guess thereā€™s no harm. Letā€™s wait for Bulma news!

I came across a maintained fork of Bulma called Bulma-css-variables and started building a dark mode for frontend using it, about 95% there I think. Details in this issue, including links to my fork. If you have yarn etc installed itā€™s fairly easy to checkout my fork/branch give it a go, so please do.

any updates on dark mode?

the white design is killing my eyes at night

Iā€™ts being worked on: #954 - WIP: Migrate to bulma-css-variables and introduce dark mode - frontend - Gitea

2 Likes

I see this is merged, do i need to update to the unstable tag?