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:
co-authored by
Claude Opus 4.6
parent
3fd860a065
commit
898e623b2b
@@ -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 |
Reference in New Issue
Block a user