From d75c5d6a7d5bcb7027835fe2e8049f3fac78b088 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Wed, 7 Oct 2026 15:51:50 +0200 Subject: [PATCH] Fix dark mode contrast of secondary text and tertiary surfaces (#3282) --- .changeset/bg-surface-tertiary-translucent.md | 5 +++++ .changeset/fix-dark-mode-fixed-grays.md | 5 +++++ .changeset/fix-input-group-text-contrast.md | 5 +++++ core/scss/_variables.scss | 18 +++++++++--------- core/scss/layout/_root.scss | 10 +++++++--- core/scss/ui/_forms.scss | 4 ++-- 6 files changed, 33 insertions(+), 14 deletions(-) create mode 100644 .changeset/bg-surface-tertiary-translucent.md create mode 100644 .changeset/fix-dark-mode-fixed-grays.md create mode 100644 .changeset/fix-input-group-text-contrast.md diff --git a/.changeset/bg-surface-tertiary-translucent.md b/.changeset/bg-surface-tertiary-translucent.md new file mode 100644 index 000000000..a4db24265 --- /dev/null +++ b/.changeset/bg-surface-tertiary-translucent.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Updated `--tblr-bg-surface-tertiary` to a translucent color, so card headers, footers and table stripes show on dark cards. diff --git a/.changeset/fix-dark-mode-fixed-grays.md b/.changeset/fix-dark-mode-fixed-grays.md new file mode 100644 index 000000000..2301c5a69 --- /dev/null +++ b/.changeset/fix-dark-mode-fixed-grays.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed dark mode contrast of nav links, list group headers, toast headers, breadcrumbs, the footer, `.form-control-light` and `.form-help`. diff --git a/.changeset/fix-input-group-text-contrast.md b/.changeset/fix-input-group-text-contrast.md new file mode 100644 index 000000000..35bc19f9a --- /dev/null +++ b/.changeset/fix-input-group-text-contrast.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed `.input-group-text` contrast in dark mode with the `--tblr-secondary-color` text color and a translucent background. diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index ba57494ed..d8c1bc92b 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -1026,7 +1026,7 @@ $breadcrumb-padding-x: 0 !default; $breadcrumb-item-padding-x: 0.5rem !default; $breadcrumb-margin-bottom: 1rem !default; $breadcrumb-bg: null !default; -$breadcrumb-divider-color: var(--gray-500) !default; +$breadcrumb-divider-color: var(--secondary-color) !default; $breadcrumb-active-color: inherit !default; $breadcrumb-divider: string.quote('/') !default; $breadcrumb-border-radius: null !default; @@ -1464,7 +1464,7 @@ $tooltip-arrow-height: 0.4rem !default; $loader-size: 2.5rem !default; $list-group-header-bg: var(--bg-surface-tertiary) !default; -$list-group-header-color: var(--gray-500) !default; +$list-group-header-color: var(--secondary-color) !default; // Modals // scss-docs-start modal-variables @@ -1523,7 +1523,7 @@ $nav-link-padding-y: 0.5rem !default; $nav-link-padding-x: 0.75rem !default; $nav-link-font-size: var(--body-font-size) !default; $nav-link-font-weight: null !default; -$nav-link-color: var(--gray-500) !default; +$nav-link-color: var(--secondary-color) !default; $nav-link-active-color: var(--body-color) !default; $nav-link-hover-color: var(--link-hover-color) !default; $nav-link-transition: @@ -1668,7 +1668,7 @@ $popover-arrow-height: 0.5rem !default; $footer-padding-y: 2rem !default; $footer-bg: var(--bg-surface) !default; $footer-border-color: var(--border-color) !default; -$footer-color: var(--gray-500) !default; +$footer-color: var(--secondary-color) !default; // Pagination // scss-docs-start pagination-variables @@ -1813,12 +1813,12 @@ $table-border-color: var(--border-color-translucent) !default; $table-th-padding-x: $table-cell-padding-x !default; $table-th-padding-y: 0.5rem !default; $table-th-font-weight: null !default; -$table-th-bg: light-dark(color-transparent(var(--body-color), 0.025), color-transparent(var(--body-color), 0.04)) !default; +$table-th-bg: var(--bg-surface-tertiary) !default; $table-striped-color: $table-color !default; $table-striped-bg-factor: 0.05 !default; $table-striped-order: even !default; -$table-striped-bg: light-dark(color-transparent(var(--body-color), 0.025), color-transparent(var(--body-color), 0.04)) !default; +$table-striped-bg: var(--bg-surface-tertiary) !default; $table-striped-columns-order: even !default; // Rows and cells matching this selector keep their own background instead of the stripe. $table-striped-exclude-selector: '[class^="bg-"], [class*=" bg-"], [class^="table-"], [class*=" table-"], [class^="text-bg-"], [class*=" text-bg-"], [style*="background"]' !default; @@ -1869,7 +1869,7 @@ $toast-border-radius: var(--border-radius) !default; $toast-box-shadow: var(--box-shadow) !default; $toast-spacing: $container-padding-x !default; -$toast-header-color: var(--gray-500) !default; +$toast-header-color: var(--secondary-color) !default; $toast-header-background-color: color-transparent(var(--body-bg), 0.85) !default; $toast-header-border-color: $toast-border-color !default; // scss-docs-end toast-variables @@ -1971,8 +1971,8 @@ $input-placeholder-color: var(--tertiary) !default; $input-group-addon-padding-y: $input-padding-y !default; $input-group-addon-padding-x: $input-padding-x !default; $input-group-addon-font-weight: $input-font-weight !default; -$input-group-addon-color: var(--gray-500) !default; -$input-group-addon-bg: var(--bg-surface-secondary) !default; +$input-group-addon-color: var(--secondary-color) !default; +$input-group-addon-bg: var(--bg-surface-tertiary) !default; $input-group-addon-border-color: $input-border-color !default; $input-border-radius: var(--border-radius) !default; diff --git a/core/scss/layout/_root.scss b/core/scss/layout/_root.scss index 5c6820c59..139a6c335 100644 --- a/core/scss/layout/_root.scss +++ b/core/scss/layout/_root.scss @@ -16,11 +16,15 @@ --bg-surface: light-dark(var(--bg-surface-primary), var(--gray-800)); --bg-surface-primary: var(--white); --bg-surface-secondary: light-dark(var(--gray-50), var(--gray-900)); - --bg-surface-tertiary: light-dark(var(--gray-50), var(--gray-800)); + // Translucent, so a card header or footer, a table stripe or an input-group + // addon stands out from whatever surface it sits on, in both color modes + // (an opaque gray-800 was invisible on a dark card). + --bg-surface-tertiary: light-dark(#{color-transparent(var(--body-color), 0.025)}, #{color-transparent(var(--body-color), 0.04)}); --bg-surface-dark: var(--gray-900); --bg-surface-inverted: light-dark(var(--gray-900), var(--gray-100)); --bg-forms: light-dark(var(--bg-surface), var(--gray-900)); - --bg-forms-disabled: light-dark(var(--bg-surface-secondary), var(--gray-800)); + // Dark: translucent, like the tertiary surface, so a disabled control on a card is not the card's own gray. + --bg-forms-disabled: light-dark(var(--bg-surface-secondary), #{color-transparent(var(--body-color), 0.04)}); --text-inverted: light-dark(var(--gray-100), var(--gray-800)); @@ -33,7 +37,7 @@ --link-hover-color: light-dark(#{mix-color-css(var(--black), var(--link-color), 20%)}, #{mix-color-css(var(--white), var(--link-color), 20%)}); --secondary: light-dark(var(--gray-500), var(--gray-400)); - --tertiary: var(--gray-400); + --tertiary: light-dark(var(--gray-500), var(--gray-400)); --border-color: light-dark(#{$border-color}, var(--gray-700)); --border-color-translucent: light-dark(#{$border-color-translucent}, var(--dark-mode-border-color-translucent)); diff --git a/core/scss/ui/_forms.scss b/core/scss/ui/_forms.scss index 61193f6f4..2b2b304c8 100644 --- a/core/scss/ui/_forms.scss +++ b/core/scss/ui/_forms.scss @@ -57,7 +57,7 @@ textarea { } .form-control-light { - background-color: var(--gray-100); + background-color: var(--bg-surface-secondary); border-color: transparent; } @@ -130,7 +130,7 @@ fieldset:empty { text-decoration: none; cursor: pointer; user-select: none; - background: var(--gray-100); + background: var(--bg-surface-tertiary); border: 0; @include border-radius(var(--border-radius-pill)); @include transition(background-color $transition-time, color $transition-time);