39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
|
import {log, querySelector} from '../utilities/exports.js';
|
||
|
|
|
||
|
|
export function runThemedLogoFeature() {
|
||
|
|
themedLogo();
|
||
|
|
log('Themed Logo: Initialized.');
|
||
|
|
}
|
||
|
|
|
||
|
|
const tildesLogo = `
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 100 100">
|
||
|
|
<rect fill="var(--background-primary-color)" width="100" height="100"/>
|
||
|
|
<rect fill="var(--comment-label-joke-color)" width="12.5" height="12.5" x="0" y="50"/>
|
||
|
|
<rect fill="var(--comment-label-offtopic-color)" width="12.5" height="12.5" x="12.5" y="37.5"/>
|
||
|
|
<rect fill="var(--comment-label-exemplary-color)" width="12.5" height="12.5" x="25" y="25"/>
|
||
|
|
<rect fill="var(--stripe-mine-color)" width="12.5" height="12.5" x="37.5" y="37.5"/>
|
||
|
|
<rect fill="var(--button-used-color)" width="12.5" height="12.5" x="50" y="50"/>
|
||
|
|
<rect fill="var(--comment-label-malice-color)" width="12.5" height="12.5" x="62.5" y="62.5"/>
|
||
|
|
<rect fill="var(--alert-color)" width="12.5" height="12.5" x="75" y="50"/>
|
||
|
|
<rect fill="var(--comment-label-noise-color)" width="12.5" height="12.5" x="87.5" y="37.5"/>
|
||
|
|
</svg>
|
||
|
|
`;
|
||
|
|
|
||
|
|
function themedLogo() {
|
||
|
|
let themedLogo = tildesLogo;
|
||
|
|
for (const customProperty of tildesLogo.match(/var\(--.+\)/g) ?? []) {
|
||
|
|
let color = window
|
||
|
|
.getComputedStyle(document.body)
|
||
|
|
.getPropertyValue(customProperty.slice('var('.length, -1));
|
||
|
|
if (color === '') {
|
||
|
|
color = '#f0f';
|
||
|
|
}
|
||
|
|
|
||
|
|
themedLogo = themedLogo.replace(customProperty, color);
|
||
|
|
}
|
||
|
|
|
||
|
|
const encodedSvg = encodeURIComponent(themedLogo);
|
||
|
|
const siteHeader = querySelector<HTMLElement>('.site-header-logo');
|
||
|
|
siteHeader.style.backgroundImage = `url("data:image/svg+xml,${encodedSvg}")`;
|
||
|
|
}
|