theme: increase contrast of muted text, lighten red in dark mode

- Light theme: darken gray-400/500/600 muted text one step
- Dark theme: lighten slate-400/500 muted text one step
- Dark theme: lighten red-500/600/700 text (was too dark on dark bg)

SW cache v40.
This commit is contained in:
2026-09-09 22:21:28 +03:00
parent 9d7fa11871
commit 1daced1e18
2 changed files with 33 additions and 1 deletions
+32
View File
@@ -1685,4 +1685,36 @@ video {
.dark\:hover\:text-slate-300:hover:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* ===== Theme contrast adjustments ===== */
/* Light theme: darken softer (muted) text one step for higher contrast */
.text-gray-400 {
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
/* Dark theme: lighten softer (muted) text one step for higher contrast */
.dark\:text-slate-500:is(.dark *) {
color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-400:is(.dark *) {
color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* Dark theme: red text is too dark on dark backgrounds — lighten it */
.dark :where(.text-red-500) {
color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.dark :where(.text-red-600) {
color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.dark :where(.text-red-700) {
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
+1 -1
View File
@@ -1,4 +1,4 @@
const CACHE = 'otaman-v39';
const CACHE = 'otaman-v40';
const URLS = [
'index.html',
'help.html',