Skip to content

VUFIND-1590: Add dark mode color-scheme #4472

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 16 commits into
base: dev
Choose a base branch
from
Open

VUFIND-1590: Add dark mode color-scheme #4472

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3c5a45b
VUFIND-1590: Add dark mode color-scheme
maccabeelevine Jul 8, 2025
9fa29d2
Merge branch 'dev' into VUFIND-1590-dark-color-scheme
maccabeelevine Jul 8, 2025
cc47f67
Set a meta tag based on user preference, per Chris
maccabeelevine Jul 8, 2025
3f10590
Add control menu to header
maccabeelevine Jul 10, 2025
a25e771
Fix order of en.ini
maccabeelevine Jul 10, 2025
77ee726
Learn alphabetical order already
maccabeelevine Jul 10, 2025
e1a7c65
Restrict color scheme to those supported by the current theme
maccabeelevine Jul 11, 2025
23b9a4d
Explain color-mode better
maccabeelevine Jul 11, 2025
83884ef
Fix outdated comment
maccabeelevine Jul 11, 2025
d5d7ec6
Simplify color scheme labels
maccabeelevine Jul 11, 2025
d6d50b7
Style .btn-default
maccabeelevine Jul 11, 2025
c422c12
Style links and navbar links, including hover
maccabeelevine Jul 11, 2025
396335a
Style .myresearch-menu
maccabeelevine Jul 11, 2025
e27762f
Merge branch 'dev' into VUFIND-1590-dark-color-scheme
maccabeelevine Jul 15, 2025
27e4e42
Access constructor arguments directly
maccabeelevine Jul 15, 2025
c8c342a
Use array for $config
maccabeelevine Jul 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion themes/bootstrap5/css/compiled.css
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 2 additions & 5 deletions themes/bootstrap5/scss/bootstrap-variable-overrides.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ $danger-border-subtle: darken(adjust-hue($danger-bg-subtle, -10), 5%) !defa
$input-border-color: #888 !default;
$form-select-border-color: #888 !default;

$breadcrumb-bg: #f5f5f5 !default;
Copy link
Member Author

@maccabeelevine maccabeelevine Jul 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I understand it, we would have to not define any colors using these bootstrap global properties, as these are not specific to any color mode.

$breadcrumb-padding-y: 8px !default;
$breadcrumb-padding-x: 15px !default;

Expand Down Expand Up @@ -55,14 +54,12 @@ $enable-caret: false !default;
$link-hover-decoration: underline !default;
$icon-link-underline-offset: inherit !default;

// Disable dark mode for now:
$enable-dark-mode: false !default;
// Enable dark mode:
$enable-dark-mode: true !default;

// Disable smooth scroll for now (doesn't interact well with Mink tests):
$enable-smooth-scroll: false !default;

// Disable validation icons that take a lot of room e.g. in select fields:
$enable-validation-icons: false !default;
$form-select-indicator-padding: .75rem !default;

$table-striped-bg: #f9f9f9 !default;
4 changes: 4 additions & 0 deletions themes/bootstrap5/scss/bootstrap.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ $fa-font-path: "../../bootstrap5/css/vendor/font-awesome/webfonts";
// Include remainder of required parts
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";

// Include mixin overrides
@import "mixin-overrides/mixin-overrides";

@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";

Expand Down
5 changes: 5 additions & 0 deletions themes/bootstrap5/scss/components/search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -654,6 +654,11 @@ header .container.navbar { margin-bottom: 0; }
height: auto !important;
}
}
@include color-mode(dark, true) {
.top-title {
color: #fff;
}
}
Comment on lines +645 to +649
Copy link
Member Author

@maccabeelevine maccabeelevine Jul 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would be an example of overriding a locally defined color, in this case for .top-title. It works fine.

It would be more elegant IMHO to put this @include within the main styles for .top-title above. But unfortunately, supporting that kind of non-root-level media query causes problems with some of the built-in Bootstrap styles. Also, since we handle different breakpoints as top-level @includes just above here, I don't see any harm in handling color mode the same way.


/* ------ CURRENT FILTERS ------ */
.active-filters {
Expand Down
25 changes: 25 additions & 0 deletions themes/bootstrap5/scss/mixin-overrides/color-mode.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/* Override of built-in color mode, to output both types */

@mixin color-mode($mode: light, $root: false) {
Copy link
Member Author

@maccabeelevine maccabeelevine Jul 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am overriding the provided color-mode mixin, which supports only one mode at a time -- either system-defined or DOM-defined color-scheme, but not both. So, I'm outputting the CSS for both types.

// Generally ignore $color-mode-type and output handlers for both types.
// Handle media-query $color-mode-type
@if $root == true {
@media (prefers-color-scheme: $mode) {
:root:not([data-bs-theme]) {
Copy link
Member Author

@maccabeelevine maccabeelevine Jul 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This :not is so that the media query (system-defined) color scheme never overrides a DOM-defined color scheme.

@content;
}
}
} @else {
// Except that for non-root elements, only output the media-query for its own type
// And don't use non-root media queries for our customized dark theme
@if $color-mode-type == "media-query" {
@media (prefers-color-scheme: $mode) {
@content;
}
}
}
// And handle data $color-mode-type
[data-bs-theme="#{$mode}"] {
@content;
}
}
3 changes: 3 additions & 0 deletions themes/bootstrap5/scss/mixin-overrides/mixin-overrides.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
// Import vendor override mixins here

@import 'color-mode';
17 changes: 17 additions & 0 deletions themes/bootstrap5/scss/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,20 @@ $nav-link-hover-bg: $gray-lighter !default;

$alert-default-bg: #f5f5f5 !default;
$alert-default-border-color: darken($alert-default-bg, 7%) !default;

Copy link
Member Author

@maccabeelevine maccabeelevine Jul 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These styles in variables.scss replace the global (not color-scheme specific) declarations in bootstrap-variable-overrides.scss.

@include color-mode(light, true) {
.breadcrumb {
--bs-breadcrumb-bg: #f5f5f5;
}
}
@include color-mode(dark, true) {
.breadcrumb {
--bs-breadcrumb-bg: #{$dark-bg-subtle-dark};
}
}

@include color-mode(light, true) {
table.table-striped {
--bs-table-striped-bg: #f9f9f9;
}
}
4 changes: 3 additions & 1 deletion themes/bootstrap5/templates/layout/layout.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@
$this->layout()->searchbox = $this->context($this)->renderInContext('search/searchbox.phtml', []);
}
?>
<html lang="<?=$this->layout()->userLang?>"<?php if ($this->layout()->rtl): ?> dir="rtl"<?php endif; ?>>
<html
<?php /* data-bs-theme="dark" */ ?>
Copy link
Member Author

@maccabeelevine maccabeelevine Jul 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Uncomment this line (for now) to simulate javascript-specified dark mode. At this initial POC stage I'm more interested in how the code would actually support dark mode than how the user would indicate that they want it.

Copy link
Contributor

@crhallberg crhallberg Jul 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the meta tags (better) or in the CSS, I think we should set the color-scheme. This will cause some unspecified colors to follow the system, but it is a very easy way to implement user preference of color-scheme.

<meta name="color-scheme" content="light dark">

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/color-scheme

Copy link
Member Author

@maccabeelevine maccabeelevine Jul 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I may be misreading that MDN page, but that meta tag seems to be for the document to say which color schemes it supports (and order of preference), rather than expressing the user's preference?

That said, I'm fine using that meta tag to echo/reflect the user's preference (if they have expressed one via VuFind) -- just implemented that. I don't see any immediate changes but as you say there may be some.

Copy link
Contributor

@crhallberg crhallberg Jul 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, but this will follow the system. User preference will have to be applied and stored separately - one of the current blind spots of modern web dev. If you change the meta tag to just "dark", it will apply a dark theme. You can then use the prefers-color-scheme and light-dark css tools.

lang="<?=$this->layout()->userLang?>"<?php if ($this->layout()->rtl): ?> dir="rtl"<?php endif; ?>>
<head>
<?php $this->setupThemeResources(); ?>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Expand Down
2 changes: 1 addition & 1 deletion themes/local_theme_example/css/compiled.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion themes/sandal5/css/compiled.css
View file
Open in desktop

Large diffs are not rendered by default.