diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index cf88b7f2d2..99056aa2b6 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -338,6 +338,17 @@ body .todo-list input[type="checkbox"]:not(:checked):before { --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 13.2%, 20.8%); } +.modal.tab-bar-modal .tabs .tab-card.with-hue { + background-color: hsl(var(--bg-hue), 8.8%, 11.2%); + border-color: hsl(var(--bg-hue), 9.4%, 25.1%); +} + +.modal.tab-bar-modal .tabs .tab-card.active.with-hue { + background-color: hsl(var(--bg-hue), 8.8%, 11.2%); + border-color: hsl(var(--bg-hue), 9.4%, 25.1%); +} + + .use-note-color { --custom-color: var(--dark-theme-custom-color); } diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 00678c6ae9..ac50453d09 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -313,6 +313,16 @@ --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%); } +.modal.tab-bar-modal .tabs .tab-card.with-hue { + background-color: hsl(var(--bg-hue), 56%, 96%); + border-color: hsl(var(--bg-hue), 33%, 41%); +} + +.modal.tab-bar-modal .tabs .tab-card.active.with-hue { + background-color: hsl(var(--bg-hue), 86%, 96%); + border-color: hsl(var(--bg-hue), 33%, 41%); +} + .note-split.with-hue, .quick-edit-dialog-wrapper.with-hue { --note-icon-custom-background-color: hsl(var(--custom-color-hue), 44.5%, 43.1%); diff --git a/apps/client/src/widgets/mobile_widgets/TabSwitcher.css b/apps/client/src/widgets/mobile_widgets/TabSwitcher.css index 8be65240b2..58b6c1fbc3 100644 --- a/apps/client/src/widgets/mobile_widgets/TabSwitcher.css +++ b/apps/client/src/widgets/mobile_widgets/TabSwitcher.css @@ -35,11 +35,6 @@ display: flex; flex-direction: column; - &.with-hue { - background-color: hsl(var(--bg-hue), 8.8%, 11.2%); - border-color: hsl(var(--bg-hue), 9.4%, 25.1%); - } - &.active { outline: 4px solid var(--more-accented-background-color); background: var(--card-background-hover-color);