I am developing an extension to change the primary color of Flarum based on the selected tag. So far, so good, except that I need to select all the elements I want to change the color based on the tag.
My question is: is it possible to change 'themePrimaryColor' => $this->settings->get('theme_primary_color')
, all at once? Or is there a more practical way?
So far, my code is as follows:
import {extend, override} from 'flarum/extend';
import app from 'flarum/app';
import WelcomeHero from 'flarum/components/WelcomeHero';
import UserPage from 'flarum/components/UserPage';
import TagHero from 'flarum/tags/components/TagHero';
import DiscussionHero from 'flarum/components/DiscussionHero';
function removeBodyClasses(hero) {
if (hero && hero.prototype) {
extend(hero.prototype, 'view', function(view) {
$('body').removeClass (function (index, className) {
return (className.match (/(^|\s)col\S+/g) || []).join(' ');
});
});
}
}
function updateColors(hero) {
if (hero) {
var heroElement = document.querySelector(".Hero");
if (heroElement) {
var bgColor = window.getComputedStyle(heroElement).backgroundColor;
var colorClass = 'col-' + bgColor.replace('rgb(', '').replace(', ', '-').replace(', ', '-').replace(')', '');
$('body')
.removeClass(function (index, className) {
return (className.match(/(^|\s)col\S+/g) || []).join(' ');
})
.addClass(colorClass);
document.documentElement.style.setProperty('--link-color', bgColor);
document.documentElement.style.setProperty('--primary-color', bgColor); // Update primary color
$('.announcementBarContent').css('background-color', bgColor);
$('.Button--primary').css('background-color', bgColor); // Update primary button color
} else {
// Use default Flarum color if no background color is defined
var defaultColor = window.getComputedStyle(document.documentElement).getPropertyValue('--link-color');
var defaultColorClass = 'col-' + defaultColor.replace('rgb(', '').replace(', ', '-').replace(', ', '-').replace(')', '');
$('body')
.removeClass(function (index, className) {
return (className.match(/(^|\s)col\S+/g) || []).join(' ');
})
.addClass(defaultColorClass);
document.documentElement.style.setProperty('--link-color', defaultColor);
document.documentElement.style.setProperty('--primary-color', defaultColor); // Update primary color
$('.announcementBarContent ').css('background-color', defaultColor);
$('.Button--primary').css('background-color', defaultColor); // Update primary button color
}
}
}
app.initializers.add('ramon/colored', () => {
console.log('[ramon/colored] Hello, forum!');
// Update the class of the <body> element with the first tag to enable restyling page elements
removeBodyClasses(WelcomeHero);
removeBodyClasses(UserPage);
if (TagHero && TagHero.prototype) {
extend(TagHero.prototype, 'view', function(vdom) {
updateColors(TagHero);
});
}
if (DiscussionHero && DiscussionHero.prototype) {
extend(DiscussionHero.prototype, 'view', function(view) {
updateColors(DiscussionHero);
});
}
// Automatically update colors when changing elements
$(document).on('change', '.Hero, .TagHero','.App-header', function() {
updateColors(this);
});
});
Live: https://support.ramonguilherme.com.br