Revert "fix:themes - switch to theme drop down from toggle (mdn#5628)" (

mdn#5647)

This reverts commit 51a39f6.

client/src/ui/atoms/button/index.scss

@@ -41,6 +41,7 @@ button,
 
 .button .icon {
   background-color: var(--button-color);
+  margin: 0 -1px; // shrinks icon-only buttons to square.
 }
 
 /* Button States */

client/src/ui/atoms/icon/index.scss

@@ -1,13 +1,12 @@
 $icons: "add-filled", "add", "altname", "bell-filled", "bell", "bookmark-filled",
-  "bookmark", "cancel", "checkmark", "chevron", "critical", "theme-dark",
-  "deprecated", "desktop", "disabled", "edit", "ellipses", "experimental",
-  "external", "eye-filled", "eye", "firefox", "footnote", "github-mark-small",
-  "information", "language", "theme-light", "menu-filled", "menu", "mobile",
-  "next", "no", "nonstandard", "note-info", "note-warning", "note-deprecated",
-  "theme-os-default", "partial", "prefix", "preview", "previous", "quote",
-  "search", "server", "sidebar", "small-arrow", "star-filled", "star",
-  "thumbs-down", "thumbs-up", "trash", "twitter", "unknown", "warning", "yes",
-  "yes-circle";
+  "bookmark", "cancel", "checkmark", "chevron", "critical", "deprecated",
+  "desktop", "disabled", "edit", "ellipses", "experimental", "external",
+  "eye-filled", "eye", "firefox", "footnote", "github-mark-small", "information",
+  "language", "menu-filled", "menu", "mobile", "moon-fill", "next", "no",
+  "nonstandard", "note-info", "note-warning", "note-deprecated", "partial",
+  "prefix", "preview", "previous", "quote", "search", "server", "sidebar",
+  "small-arrow", "sun-fill", "star-filled", "star", "theme", "thumbs-down",
+  "thumbs-up", "trash", "twitter", "unknown", "warning", "yes", "yes-circle";
 
 .icon {
   --size: var(--icon-size, 1rem);

client/src/ui/molecules/theme-switcher/index.tsx

@@ -65,7 +65,7 @@ export const ThemeSwitcher = () => {
         ariaControls={menuId}
         ariaHasPopup={"menu"}
         ariaExpanded={isOpen || undefined}
-        icon={`theme-${activeTheme}`}
+        icon="theme"
         extraClasses="theme-switcher-menu small"
         onClickHandler={() => {
           setIsOpen(!isOpen);

client/src/ui/molecules/theme-toggle/index.scss

@@ -0,0 +1,5 @@
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}

client/src/ui/molecules/theme-toggle/index.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { switchTheme } from "../../../utils";
+import { Icon } from "../../atoms/icon";
+import { Switch } from "../../atoms/switch";
+
+import "./index.scss";
+
+export function ThemeToggle() {
+  const isServer = typeof window === "undefined";
+  let prefers = "light";
+  if (!isServer) {
+    const mql = window?.matchMedia?.("(prefers-color-scheme: dark)");
+    if (mql?.matches) {
+      prefers = "dark";
+    }
+  }
+  const [activeTheme, setActiveTheme] = React.useState(
+    (!isServer && document?.body?.className) || prefers
+  );
+  const [dark, setDark] = React.useState(activeTheme === "dark");
+
+  const toggle = (e) => {
+    let checked = e?.target?.checked || false;
+    const theme = checked ? "dark" : "light";
+    switchTheme(theme, setActiveTheme);
+    setDark(checked);
+  };
+
+  return (
+    <div className="theme-toggle">
+      <Icon name="sun-fill" />
+      <Switch
+        name="themeToggle"
+        hiddenLabel={`toggle theme to ${dark ? "light" : "dark"} mode`}
+        checked={dark}
+        toggle={toggle}
+      ></Switch>
+      <Icon name="moon-fill" />
+    </div>
+  );
+}

client/src/ui/organisms/article-actions/index.tsx

@@ -63,9 +63,11 @@ export const ArticleActions = ({
                   <BookmarkContainer doc={doc} />
                 </li>
               )}
-              <li className="article-actions-entry">
-                <ThemeSwitcher />
-              </li>
+              {isAuthenticated && (
+                <li className="article-actions-entry">
+                  <ThemeSwitcher />
+                </li>
+              )}
               {!MDN_APP && translations && !!translations.length && (
                 <li className="article-actions-entry">
                   <LanguageMenu

client/src/ui/organisms/top-navigation-main/index.tsx

@@ -11,6 +11,7 @@ import { useUserData } from "../../../user-context";
 
 import "./index.scss";
 import { ENABLE_PLUS } from "../../../constants";
+import { ThemeToggle } from "../../molecules/theme-toggle";
 
 export const TopNavigationMain = ({ isOpenOnMobile }) => {
   const userData = useUserData();
@@ -37,7 +38,7 @@ export const TopNavigationMain = ({ isOpenOnMobile }) => {
           setShowSearch(false);
         }}
       />
-
+      <ThemeToggle></ThemeToggle>
       <Button
         type="action"
         icon="search"