Add the Themed Logo feature (#7).

source/content-scripts.ts

@@ -11,6 +11,7 @@ import {
   runAnonymizeUsernamesFeature,
   runHideVotesFeature,
   runMarkdownToolbarFeature,
+  runThemedLogoFeature,
   runUsernameColorsFeature,
 } from './scripts/exports.js';
 import Settings from './settings.js';
@@ -48,6 +49,7 @@ async function initialize() {
 
   function startObserver() {
     observer.observe(document.body, {
+      attributes: true,
       childList: true,
       subtree: true,
     });
@@ -71,6 +73,12 @@ async function initialize() {
     });
   }
 
+  if (settings.features.themedLogo) {
+    observerFeatures.push(() => {
+      runThemedLogoFeature();
+    });
+  }
+
   if (settings.features.usernameColors) {
     observerFeatures.push(() => {
       runUsernameColorsFeature(settings);

source/options/components/exports.ts

@@ -5,5 +5,6 @@ export {BackToTopSetting} from './back-to-top.js';
 export {HideVotesSetting} from './hide-votes.js';
 export {JumpToNewCommentSetting} from './jump-to-new-comment.js';
 export {MarkdownToolbarSetting} from './markdown-toolbar.js';
+export {ThemedLogoSetting} from './themed-logo.js';
 export {UserLabelsSetting} from './user-labels.js';
 export {UsernameColorsSetting} from './username-colors.js';

source/options/components/themed-logo.ts

@@ -0,0 +1,14 @@
+import {html} from 'htm/preact';
+
+import {Setting, SettingProps} from './index.js';
+
+export function ThemedLogoSetting(props: SettingProps): TRXComponent {
+  return html`
+    <${Setting} ...${props}>
+      <p class="info">
+        Replaces the Tildes logo in the site header with a dynamic one that uses
+        the colors of your chosen Tildes theme.
+      </p>
+    <//>
+  `;
+}

source/options/features.ts

@@ -7,6 +7,7 @@ import {
   HideVotesSetting,
   JumpToNewCommentSetting,
   MarkdownToolbarSetting,
+  ThemedLogoSetting,
   UserLabelsSetting,
   UsernameColorsSetting,
 } from './components/exports.js';
@@ -62,6 +63,13 @@ export const features: Feature[] = [
     title: 'Markdown Toolbar',
     component: () => MarkdownToolbarSetting,
   },
+  {
+    availableSince: new Date('2022-02-27'),
+    index: 0,
+    key: 'themedLogo',
+    title: 'Themed Logo',
+    component: () => ThemedLogoSetting,
+  },
   {
     availableSince: new Date('2019-11-10'),
     index: 0,

source/scripts/exports.ts

@@ -4,5 +4,6 @@ export * from './back-to-top.js';
 export * from './hide-votes.js';
 export * from './jump-to-new-comment.js';
 export * from './markdown-toolbar.js';
+export * from './themed-logo.js';
 export * from './user-labels.js';
 export * from './username-colors.js';

source/scripts/themed-logo.ts

@@ -0,0 +1,38 @@
+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}")`;
+}

source/settings.ts

@@ -68,6 +68,7 @@ export default class Settings {
     hideVotes: boolean;
     jumpToNewComment: boolean;
     markdownToolbar: boolean;
+    themedLogo: boolean;
     userLabels: boolean;
     usernameColors: boolean;
   };
@@ -131,6 +132,7 @@ export default class Settings {
       hideVotes: false,
       jumpToNewComment: true,
       markdownToolbar: true,
+      themedLogo: false,
       userLabels: true,
       usernameColors: false,
     };