swap onesearch logo based on dark/light mode

Use onesearch_logo2.png (black text) in light mode and
onesearch_logo3.png (white text) in dark mode via MutationObserver.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Mark Eaton
2026-02-23 10:12:42 -05:00
co-authored by Claude Opus 4.6
parent 3fd860a065
commit 898e623b2b
3 changed files with 14 additions and 1 deletions
+14 -1
View File
@@ -133,7 +133,7 @@ const onesearchComponent = {
<input name="query" ref="primoQueryString" type="hidden" /> <input name="query" ref="primoQueryString" type="hidden" />
<div id="onesearch-header"> <div id="onesearch-header">
<a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en"> <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en">
<img class="image-fail onesearchsubmit" src="https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/onesearch_logo3.png" alt="OneSearch" /> <img class="image-fail onesearchsubmit" :src="logoSrc" alt="OneSearch" />
</a> </a>
</div> </div>
<div class="form-group" id="flex-search-form"> <div class="form-group" id="flex-search-form">
@@ -205,12 +205,25 @@ const onesearchComponent = {
this.$refs.oneSearchForm.submit(); // submit the form this.$refs.oneSearchForm.submit(); // submit the form
}, },
}, },
computed: {
logoSrc() {
return this.isDark ? "onesearch_logo3.png" : "onesearch_logo2.png";
},
},
data() { data() {
return { return {
facet: "", // initialize the data from the radio selection facet: "", // initialize the data from the radio selection
mfacet: "", mfacet: "",
isDark: false,
}; };
}, },
mounted() {
this.isDark = document.body.getAttribute("data-bs-theme") === "dark";
var self = this;
new MutationObserver(function () {
self.isDark = document.body.getAttribute("data-bs-theme") === "dark";
}).observe(document.body, { attributes: true, attributeFilter: ["data-bs-theme"] });
},
}; };
const { createApp } = Vue; const { createApp } = Vue;
Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB