diff --git a/javascripts/discourse/initializers/color-scheme-toggler.js b/javascripts/discourse/initializers/color-scheme-toggler.gjs
similarity index 84%
rename from javascripts/discourse/initializers/color-scheme-toggler.js
rename to javascripts/discourse/initializers/color-scheme-toggler.gjs
index 33f04b8..2f000e0 100644
--- a/javascripts/discourse/initializers/color-scheme-toggler.js
+++ b/javascripts/discourse/initializers/color-scheme-toggler.gjs
@@ -3,6 +3,7 @@ import { loadColorSchemeStylesheet } from "discourse/lib/color-scheme-picker";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { currentThemeId } from "discourse/lib/theme-selector";
 import Session from "discourse/models/session";
+import ColorSchemeToggler from "../components/color-scheme-toggler";
 import {
   COLOR_SCHEME_OVERRIDE_KEY,
   colorSchemeOverride,
@@ -68,8 +69,18 @@ export default {
       });
 
     if (settings.add_color_scheme_toggle_to_header) {
-      withPluginApi("0.8", (api) => {
-        api.addToHeaderIcons("header-toggle-button");
+      withPluginApi("1.28.0", (api) => {
+        api.headerIcons.add(
+          "header-toggle-button",
+          <template>
+            <li class="header-toggle-button header-dropdown-toggle">
+              <span class="header-color-scheme-toggle icon">
+                <ColorSchemeToggler />
+              </span>
+            </li>
+          </template>,
+          { before: "search" }
+        );
       });
     }
   },
diff --git a/javascripts/discourse/widgets/header-toggle-button.js b/javascripts/discourse/widgets/header-toggle-button.js
deleted file mode 100644
index fca4f7c..0000000
--- a/javascripts/discourse/widgets/header-toggle-button.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { hbs } from "ember-cli-htmlbars";
-import RenderGlimmer from "discourse/widgets/render-glimmer";
-import { createWidget } from "discourse/widgets/widget";
-
-createWidget("header-toggle-button", {
-  tagName: "li.header-toggle-button.header-dropdown-toggle",
-
-  html() {
-    return [
-      new RenderGlimmer(
-        this,
-        "span.header-color-scheme-toggle.icon",
-        hbs`<ColorSchemeToggler />`
-      ),
-    ];
-  },
-});