Zum Inhalt springen
(function() {
function applyScrollbarStyles() {
if (!document.documentElement.hasAttribute('data-wp-dark-mode-active')) {
document.documentElement.style.removeProperty('scrollbar-color');
return;
}
document.documentElement.style.setProperty('scrollbar-color', '#2E334D #1D2033', 'important');
// Find and remove dark mode engine scrollbar styles.
var styles = document.querySelectorAll('style');
styles.forEach(function(style) {
if (style.id === 'wp-dark-mode-scrollbar-custom') return;
if (style.textContent && style.textContent.indexOf('::-webkit-scrollbar') !== -1 && style.textContent.indexOf('#1D2033') === -1) {
style.textContent = style.textContent.replace(/::-webkit-scrollbar[^}]*\{[^}]*\}/g, '');
style.textContent = style.textContent.replace(/::-webkit-scrollbar-track[^}]*\{[^}]*\}/g, '');
style.textContent = style.textContent.replace(/::-webkit-scrollbar-thumb[^{]*\{[^}]*\}/g, '');
style.textContent = style.textContent.replace(/::-webkit-scrollbar-corner[^}]*\{[^}]*\}/g, '');
}
});
// Inject our styles.
var existing = document.getElementById('wp-dark-mode-scrollbar-custom');
if (!existing) {
var customStyle = document.createElement('style');
customStyle.id = 'wp-dark-mode-scrollbar-custom';
customStyle.textContent =
'::-webkit-scrollbar { width: 12px !important; height: 12px !important; background: #1D2033 !important; }' +
'::-webkit-scrollbar-track { background: #1D2033 !important; }' +
'::-webkit-scrollbar-thumb { background: #2E334D !important; border-radius: 6px; }' +
'::-webkit-scrollbar-thumb:hover { filter: brightness(1.2); }' +
'::-webkit-scrollbar-corner { background: #1D2033 !important; }';
document.body.appendChild(customStyle);
}
}
// Listen for dark mode changes.
document.addEventListener('wp_dark_mode', function(e) {
setTimeout(applyScrollbarStyles, 100);
setTimeout(applyScrollbarStyles, 500);
setTimeout(applyScrollbarStyles, 1000);
});
// Observe attribute changes.
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'data-wp-dark-mode-active') {
var existing = document.getElementById('wp-dark-mode-scrollbar-custom');
if (existing && !document.documentElement.hasAttribute('data-wp-dark-mode-active')) {
existing.remove();
}
setTimeout(applyScrollbarStyles, 100);
setTimeout(applyScrollbarStyles, 500);
}
});
});
observer.observe(document.documentElement, { attributes: true });
// Initial apply.
setTimeout(applyScrollbarStyles, 100);
setTimeout(applyScrollbarStyles, 500);
setTimeout(applyScrollbarStyles, 1000);
})();
