From cd119fcdb4ee290260ad4c564b36fc4db23bb072 Mon Sep 17 00:00:00 2001
From: brysonbw <77869922+brysonbw@users.noreply.github.com>
Date: Mon, 6 Oct 2025 20:55:21 -0600
Subject: [PATCH] fix (ui): show current theme on the color theme toggle button

---
 components/color-theme/element.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/color-theme/element.js b/components/color-theme/element.js
index ad468fc6e..029f4e7a3 100644
--- a/components/color-theme/element.js
+++ b/components/color-theme/element.js
@@ -17,11 +17,11 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
     super();
     /** @type {import("./types.js").ColorScheme} */
     this._mode = "light dark";
-    this._options = Object.entries({
+    this._options = {
       "light dark": this.l10n("theme-default")`OS default`,
       light: this.l10n`Light`,
       dark: this.l10n`Dark`,
-    });
+    };
   }
 
   /** @param {MouseEvent} event */
@@ -43,6 +43,10 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
     }
   }
 
+  get _theme() {
+    return this._options[this._mode] ?? this.l10n`Theme`;
+  }
+
   /**
    * @param {import("lit").PropertyValues<this>} changedProperties
    */
@@ -69,7 +73,7 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
           type="button"
           aria-label=${this.l10n`Switch color theme`}
         >
-          <span>${this.l10n`Theme`}</span>
+          <span>${this._theme}</span>
         </button>
         <div
           slot="dropdown"
@@ -77,7 +81,7 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
           id="color-theme__dropdown"
         >
           <ul class="color-theme__list">
-            ${this._options.map(
+            ${Object.entries(this._options).map(
               ([mode, option]) =>
                 html`<li>
                   <button