[19.0][IMP] web_dark_mode: blue-dark color palette

[gerard-domatix]

Replaces the neutral dark grays with a blue-tinted scale, closer to widely used dark UI references (cool-tinted surfaces instead of flat neutral gray).

Improves depth between canvas, cards, and inputs, and reads more comfortably on long sessions while staying aligned with Odoo’s purple/teal accents.

Change is limited to $o-gray-100 … $o-gray-900 in primary_variables.dark.scss — no logic or dependency changes.

Screenshots before/after attached.

Screenshots

Before

After

[pedrobaeza]

Please in English.

[gerard-domatix]

Already fixed, all in English now. Thanks!

[BhaveshHeliconia]

Looks Good!

[ljmnoonan]

Hello, and thank you for your contribution!

When I designed this theme I modeled off of VScode's Default Dark Modern which I and many other people use every day. Chrome dev tools was another inspiration. I did like the Odoo EE Theme, but I deliberately stayed away from it in order to maintain separation.

I doo like the idea of adding a bit more color, but, having a bit of astigmatism, I find the contrast with white text and certain colorful icons to be jarring. White text on $o-view-background-color, which is $o-gray-200 now has a contrast ratio of 18.88 where before it was just 16.48. This is enough to cause halation if I do not concentrate on keeping my eyes focused.

I could not find much guidance online for rules of thumb on how much is too much, but this American Foundation for the Blind blog post seems to suggest that anything above a 14 contrast is pushing it.
(Note: while writing this I noticed that the Github dark theme I am using is #F0F6FC on #0D1117 which is 18.92 contrast, but does not bother my eyes too much, so, as the article mentions, it is not just about contrast.)

However, these are my personal preferences, so if the larger community prefers this theme I will just have to maintain a patch for myself.

Regardless of my opinion, there is an objective issue with $o-gray-300. It is often used as a border between $o-gray-100 and $o-gray-200. Here it has been set too low. Whereas before the contrast of $o-gray-300 to $o-gray-100 and $o-gray-200 was 1.34 and 1.24 respectively, it is now 1.14 and 1.09. Seems small, but it makes a difference in several spots:

---

Most egregious: the calendar header in Week and Month view

Before:

After:

As you can see, the borders between the days are barely visible.

---

eLearning

Before: After:

Events

Before: After:

In both of these instances the bright colors seem dazzle the user causing him to lose sight of the edges of the kanban cards. This is further exacerbated by the low contrast of the $o-gray-300 border.

[ljmnoonan]

For more opinions, I would like to call this to the attention of @len-foss, @mathben, and @smaddlsoft as I know they actively use this.

[mathben]

I prefer the gray tint instead of the blue tint. Is it possible to make this choice in the user preferences?
Thanks

[ljmnoonan]

@mathben

Is it possible to make this choice in the user preferences?

Looking at web_company_color it seems like this may be a possibility, but is quite complex to pull off. In particular, all the scss primary variables and bootstrap overrides have to be loaded before the default ones load.

I don't have time for such a project now, but maybe later.

[OCA-git-bot]

This PR has the approved label and has been created more than 5 days ago. It should therefore be ready to merge by a maintainer (or a PSC member if the concerned addon has no declared maintainer). 🤖

[len-foss]

I don’t think this theme should become the default. It has a strong visual identity, and while some users may appreciate that, many prefer a more neutral look for default UI themes.

Looking at major desktop environments, I can’t find any default themes that use such a pronounced tint. Strongly tinted themes do exist, but they’re typically optional add‑ons, and even then the tint is usually more subtle or used as an accent.

Several of the arguments in the PR, such as being "widely used" or "more comfortable" seem subjective. Preferences for light/dark modes or color accents vary widely depending on users’ eyes, devices, and usage patterns, and I’m not aware of strong scientific evidence favoring one approach universally. However, personal preferences can be strongly held.

This would fit well as an optional theme, e.g. web_dark_mode_theme_blue, and you could even provide a module_web_dark_mode_theme_blue config setting to make installation straightforward.