diff --git a/groups/home/bootstrap5/Kibbee library logo inverted.jpg b/groups/home/bootstrap5/Kibbee library logo inverted.jpg new file mode 100644 index 0000000..6a844d7 Binary files /dev/null and b/groups/home/bootstrap5/Kibbee library logo inverted.jpg differ diff --git a/groups/home/bootstrap5/home1.css b/groups/home/bootstrap5/home1.css index dd9aa35..47cf2cd 100644 --- a/groups/home/bootstrap5/home1.css +++ b/groups/home/bootstrap5/home1.css @@ -166,6 +166,13 @@ #hours-content-container > a { color: #fff } + [data-bs-theme="dark"] #hours-content-container { + background-color: var(--bg); + color: var(--text); + } + [data-bs-theme="dark"] #hours-content-container > a { + color: var(--text); + } /* style navbar */ nav.navbar-light.main-nav-container { @@ -177,6 +184,15 @@ border-radius: 0; padding: 5px 0; } + [data-bs-theme="dark"] nav.navbar-light.main-nav-container { + background-color: var(--kbccblue) !important; + background: var(--kbccblue) !important; + color: white; + } + [data-bs-theme="dark"] .navbar-light .navbar-nav > li > a, + [data-bs-theme="dark"] .caret-text { + color: white; + } .main-nav-dropdown { margin: 0 8px; } @@ -263,6 +279,12 @@ #radios label { font-weight: bolder; } + [data-bs-theme="dark"] #radios label { + color: white; + } + [data-bs-theme="dark"] #radios input[type="radio"] { + accent-color: white; + } #advanced { float: right; margin-top: 10px; @@ -284,6 +306,13 @@ #primoQueryTemp { border-radius: 0; } + [data-bs-theme="dark"] #primoQueryTemp { + background-color: #fff; + color: #111; + } + [data-bs-theme="dark"] #primoQueryTemp::placeholder { + color: #666; + } .onesearchsubmit { border-radius: 0; padding: 6px 12px; @@ -359,6 +388,10 @@ font-size: 1.7em; } + [data-bs-theme="dark"] .link-list a { + color: white; + } + /* External link icon styling (WCAG 2.4.4) */ .external-link-icon { font-size: 0.7em; @@ -419,6 +452,10 @@ padding: 3px; padding-left: 30px; } + [data-bs-theme="dark"] .slick-prev:before, + [data-bs-theme="dark"] .slick-next:before { + color: white; + } /* style to make all imported boxes floating */ .s-lib-box-title { @@ -434,6 +471,10 @@ box-shadow: none !important; border: 0 !important; } + [data-bs-theme="dark"] .s-lib-box, + [data-bs-theme="dark"] .s-lg-box { + background-color: var(--bg); + } /* style the dropdown menus */ .dropdown-margin { @@ -521,7 +562,7 @@ /* card body dark mode background */ .card-body { - background-color: var(--bg-surface); + background-color: var(--bg); transition: background-color 0.3s ease; } diff --git a/groups/home/bootstrap5/home1.html b/groups/home/bootstrap5/home1.html index 320e8a7..1aa260b 100644 --- a/groups/home/bootstrap5/home1.html +++ b/groups/home/bootstrap5/home1.html @@ -88,7 +88,7 @@ id="library-logo" class="image-fail" alt="Kibbee Library logo" - src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg" + :src="isDark ? 'https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/Kibbee_library_logo_inverted.jpg' : 'https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg'" /> {{content_box_33471502}}