Change Histoire Preview Background on Dark Mode toggle #490
hrishikesh-k
started this conversation in
Show and tell
Replies: 1 comment
-
|
An alternative approach so that you can still use the backgrounds feature: // src/histoire-setup.ts
import {defineSetupVue3} from '@histoire/plugin-vue'
export const setupVue3 = defineSetupVue3(histoireInstance => {
histoireInstance.app.use({
install: () => {
if (window && window.frameElement) {
document.body.setAttribute('u-text', 'neutral-light-800 dark:neutral-000')
document.querySelector<HTMLDivElement>('.__histoire-render-story')!.setAttribute('u-p', '6')
const rootEl : Document = window.frameElement.ownerDocument
const htmlEl = rootEl.querySelector<HTMLHtmlElement>('html')!
function setPreviewBg() {
rootEl.querySelector<HTMLDivElement>('[data-test-id="toolbar-background"]>div:first-child')!.click()
setTimeout(() => {
const backgroundButtons = rootEl.querySelectorAll<HTMLButtonElement>('[data-test-id="background-popper"]>button')
if (htmlEl.classList.contains('htw-dark')) {
const darkButton = Array.prototype.find.call(backgroundButtons, buttonElement => {
return buttonElement.innerText.includes('Dark')
})
if (darkButton) {
darkButton.click()
} else {
setPreviewBg()
}
} else {
const lightButton = Array.prototype.find.call(backgroundButtons, buttonElement => {
return buttonElement.innerText.includes('Light')
})
if (lightButton) {
lightButton.click()
} else {
setPreviewBg()
}
}
}, 100)
}
setPreviewBg()
new MutationObserver(mutations => {
if (Array.prototype.find.call(mutations, mutation => {
return mutation.attributeName === 'class'
})) {
setPreviewBg()
}
}).observe(htmlEl, {
attributes: true
})
}
}
})
}) |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Not sure if someone else needed this, but I was looking for a way to switch the preview background colour automatically to the dark mode when the dark mode of Histoire was toggled. I achieved it using the following:
This is automatically enabled for all stories. Not sure if this feature already existed in Histoire, but I wasn't able to find it. Also happy to know any better way to handle this.
Beta Was this translation helpful? Give feedback.
All reactions