[IMP] runbot: add a friendly colorblindness theme

The runbot colors can lack contrast in some case, especially for
colorblinded people.

This commit introduces a theme that should help a little.
Note that this was done without much analysis and should be tweaked in
the future.
This commit is contained in:
Xavier-Do 2024-07-26 10:31:43 +02:00
parent 9d62213abf
commit 888d82f660
2 changed files with 25 additions and 2 deletions

View File

@ -13,13 +13,18 @@
--bs-info-bg-subtle: #d9edf7;
--bs-info-rgb: 23, 162, 184;
}
:root[data-bs-theme=red404] {
--bs-success-bg-subtle: #cdffb9;
--bs-danger-bg-subtle: #e67ecf;
--bs-warning-bg-subtle: #fae9b1;
--bs-info-bg-subtle: #b6e2f8;
--bs-info-rgb: 23, 162, 184;
}
[data-bs-theme=legacy] .text-bg-info {
color: #fff !important; /* black by default, changes from previous version, color forced to fit with --bs-info-rgb*/
}
[data-bs-theme=legacy] .btn-success {
--bs-btn-color: #fff;
--bs-btn-bg: #198754;
@ -37,6 +42,23 @@
--bs-btn-disabled-border-color: #28a745;
}
[data-bs-theme=red404] .btn-danger {
--bs-btn-color: #fff;
--bs-btn-bg: #990a59;
--bs-btn-border-color: #990a59;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #740442;
--bs-btn-hover-border-color: #740442;
--bs-btn-focus-shadow-rgb: 60, 153, 110;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #740442;
--bs-btn-active-border-color: #740442;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #b90e6c;
--bs-btn-disabled-border-color: #b90e6c;
}
:root {
--alternative:#ccc;

View File

@ -104,6 +104,7 @@
<button onclick="document.cookie = 'theme=legacy; expires=Thu, 1 Dec 2942 12:00:00 UTC; path=/'; location.reload();" type="button" t-attf-class="btn btn-{{'primary' if theme=='legacy' else 'secondary'}}">Legacy</button>
<button onclick="document.cookie = 'theme=dark; expires=Thu, 1 Dec 2942 12:00:00 UTC; path=/'; location.reload();" type="button" t-attf-class="btn btn-{{'primary' if theme=='dark' else 'secondary'}}">Dark</button>
<button onclick="document.cookie = 'theme=light; expires=Thu, 1 Dec 2942 12:00:00 UTC; path=/'; location.reload();" type="button" t-attf-class="btn btn-{{'primary' if theme=='light' else 'secondary'}}">Light</button>
<button onclick="document.cookie = 'theme=red404; expires=Thu, 1 Dec 2942 12:00:00 UTC; path=/'; location.reload();" type="button" t-attf-class="btn btn-{{'primary' if theme=='red404' else 'secondary'}}">Red zepplin</button>
</div>
<hr class="separator"/>