From 9e9b5b22cf4e3951ff2c660b669a82d99517803a Mon Sep 17 00:00:00 2001 From: Davinder Singh Date: Thu, 15 Jan 2026 12:56:17 +0000 Subject: [PATCH] Merge pull request #30567 from overleaf/ds-mj-dark-mode-project-list [web] Adding dark mode project list on Dashboard GitOrigin-RevId: ed678b1ffa8abb776eed46fb3b4b88deedd3b62c --- .../stylesheets/components/table.scss | 48 +++++++++++++++++-- .../pages/project-list-ds-nav.scss | 18 +++---- .../stylesheets/pages/project-list.scss | 8 ++-- 3 files changed, 59 insertions(+), 15 deletions(-) diff --git a/services/web/frontend/stylesheets/components/table.scss b/services/web/frontend/stylesheets/components/table.scss index 978e3af32c..1065bdb217 100644 --- a/services/web/frontend/stylesheets/components/table.scss +++ b/services/web/frontend/stylesheets/components/table.scss @@ -1,8 +1,48 @@ +@mixin light-table { + --bs-table-color: var(--content-primary); + --bs-table-bg: var(--bg-light-primary); + --bs-table-striped-color: var(--content-secondary); + --bs-table-striped-bg: var(--bg-light-secondary); + --bs-table-active-color: var(--content-secondary); + --bs-table-active-bg: var(--link-web-hover); + --bs-table-hover-color: var(--content-secondary); + --bs-table-hover-bg: var(--bg-light-secondary); + --bs-border-divider: var(--border-divider); + --table-bg-tertiary: var(--bg-light-tertiary); +} + +@mixin dark-table { + --bs-table-color: var(--content-primary-dark); + --bs-table-bg: var(--bg-dark-primary); + --bs-table-striped-color: var(--content-secondary-dark); + --bs-table-striped-bg: var(--bg-dark-secondary); + --bs-table-active-color: var(--content-secondary-dark); + --bs-table-active-bg: var(--link-web-hover); + --bs-table-hover-color: var(--content-secondary-dark); + --bs-table-hover-bg: var(--bg-dark-secondary); + --bs-border-divider: var(--border-divider-dark); + --table-bg-tertiary: var(--bg-dark-tertiary); +} + +:root { + @include light-table; + + @include theme('default') { + .project-ds-nav-page { + .table, + .table-container { + @include dark-table; + } + } + } +} + .table-container { flex: 1; margin-bottom: var(--spacing-06); - background-color: var(--white); + background-color: var(--bs-table-bg); padding: var(--spacing-04); + border-color: var(--bs-border-divider); .table { margin-bottom: initial; @@ -10,6 +50,8 @@ } .table { + border-color: var(--bs-border-divider); + th, td { a { @@ -49,7 +91,7 @@ .table-container-bordered { padding: var(--spacing-04); - border-color: $table-border-color; + border-color: var(--bs-border-divider); border-radius: var(--border-radius-base); border-width: var(--bs-border-width); border-style: solid; @@ -65,7 +107,7 @@ > tbody > tr:nth-of-type(#{$table-striped-order}) { &:hover > * { - --#{$prefix}table-hover-bg: var(--bg-light-tertiary); + --#{$prefix}table-hover-bg: var(--table-bg-tertiary); } } } diff --git a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss index 451625c693..66c1eeb449 100644 --- a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss +++ b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss @@ -2,11 +2,13 @@ --ds-nav-active-bg: var(--bg-accent-03); --ds-nav-active-color: var(--green-60); --theme-toggle-selected-background: var(--green-20); + --ds-nav-content-bg-secondary: var(--bg-light-secondary); @include theme('default') { --ds-nav-active-bg: var(--green-70); --ds-nav-active-color: var(--green-10); --theme-toggle-selected-background: var(--green-70); + --ds-nav-content-bg-secondary: var(--bg-dark-secondary); } } @@ -19,7 +21,7 @@ body { .project-ds-nav-page { @include full-height-stacked-page; - color: var(--content-secondary); + color: var(--content-secondary-themed); // NOTE-AC: This code can be eliminated when we remove sidebar-navigation-ui-update --navbar-btn-padding-h: var(--spacing-06); @@ -61,7 +63,7 @@ body { .nav-item-help::before { content: ''; display: block; - border-top: 1px solid var(--border-divider); + border-top: 1px solid var(--border-divider-themed); margin: var(--spacing-07) var(--spacing-06); } @@ -111,7 +113,7 @@ body { border-bottom: solid 1px transparent; &.show-shadow { - border-bottom-color: var(--border-divider); + border-bottom-color: var(--border-divider-themed); } > .dropdown-menu { @@ -144,7 +146,7 @@ body { border-top: solid 1px transparent; &.show-shadow { - border-top-color: var(--border-divider); + border-top-color: var(--border-divider-themed); } } @@ -262,7 +264,7 @@ body { .project-dash-table { .btn-link { - color: var(--content-secondary); + color: var(--content-secondary-themed); height: var(--spacing-08); width: var(--spacing-08); border-radius: 100%; @@ -276,7 +278,7 @@ body { } .dash-cell-name a { - color: var(--content-secondary) !important; + color: var(--content-primary-themed) !important; } } @@ -295,11 +297,11 @@ body { flex-grow: 1; overflow-y: auto; position: relative; - background-color: var(--bg-light-secondary); + background-color: var(--ds-nav-content-bg-secondary); @include media-breakpoint-up(md) { border-top-left-radius: var(--border-radius-large); - border-top: 1px solid var(--border-divider); + border-top: 1px solid var(--border-divider-themed); } } diff --git a/services/web/frontend/stylesheets/pages/project-list.scss b/services/web/frontend/stylesheets/pages/project-list.scss index 25233bdd02..911afb7988 100644 --- a/services/web/frontend/stylesheets/pages/project-list.scss +++ b/services/web/frontend/stylesheets/pages/project-list.scss @@ -144,7 +144,7 @@ .project-list-title { @include heading-sm; - color: $content-secondary; + color: var(--content-secondary-themed); font-weight: bold; min-width: 0; } @@ -354,7 +354,7 @@ ul.project-list-filters { .table-header-sort-btn { border: 0; text-align: left; - color: var(--content-secondary); + color: var(--content-secondary-themed); background-color: transparent; padding: 0; font-weight: bold; @@ -365,7 +365,7 @@ ul.project-list-filters { &:hover, &:focus { - color: var(--content-secondary); + color: var(--content-secondary-themed); text-decoration: none; } @@ -576,7 +576,7 @@ ul.project-list-filters { .current-plan { a.current-plan-label { text-decoration: none; - color: $content-secondary; + color: var(--content-secondary-themed); } .current-plan-label-icon {