feat(dark-theme): replace dark theme switcher with toggle group (#3788)

patternfly · Nov 1, 2023 · 0bf3c62 · 0bf3c62
1 parent 7eb15ac
commit 0bf3c62
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css
@@ -42,3 +42,9 @@
   --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-switch__input--checked__label--Color: var(--pf-v5-global--Color--100);
 }
+
+.ws-masthead .pf-v5-c-toggle-group {
+  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-400);
+  --pf-v5-c-toggle-group__button--focus--BackgroundColor: transparent;
+  --pf-v5-c-toggle-group__button--hover--BackgroundColor: transparent;
+}
diff --git a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js
@@ -10,6 +10,7 @@ import {
   DropdownGroup,
   DropdownList,
   Divider,
+  Icon,
   Masthead,
   MastheadToggle,
   MastheadMain,
@@ -23,10 +24,14 @@ import {
   ToolbarItem,
   SkipToContent,
   Switch,
-  SearchInput
+  SearchInput,
+  ToggleGroup,
+  ToggleGroupItem
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
+import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon';
+import SunIcon from '@patternfly/react-icons/dist/esm/icons/sun-icon';
 import { SideNav, TopNav, GdprBanner } from '../../components';
 import staticVersions from '../../versions.json';
 import v5Logo from '../PF-HorizontalLogo-Reverse.svg';
@@ -50,6 +55,7 @@ const HeaderTools = ({
   const [isDropdownOpen, setDropdownOpen] = useState(false);
   const [searchValue, setSearchValue] = React.useState('');
   const [isSearchExpanded, setIsSearchExpanded] = React.useState(false);
+  const [isDarkTheme, setIsDarkTheme] = React.useState(false);
 
   const getDropdownItem = (version, isLatest = false) => (
     <DropdownItem itemId={version.name} key={version.name} to={isLatest ? '/' : `/${version.name}`}>
@@ -65,6 +71,12 @@ const HeaderTools = ({
     setIsSearchExpanded(!isSearchExpanded);
   };
 
+  const toggleDarkTheme = (_evt, selected) => {
+    const darkThemeToggleClicked = !selected === isDarkTheme
+    document.querySelector('html').classList.toggle('pf-v5-theme-dark', darkThemeToggleClicked);
+    setIsDarkTheme(darkThemeToggleClicked);
+  };
+
   useEffect(() => {
     // reattach algolia to input each time search is expanded
     if (hasSearch && isSearchExpanded) {
@@ -86,8 +98,10 @@ const HeaderTools = ({
         >
           {hasDarkThemeSwitcher && (
             <ToolbarItem>
-              <Switch id="ws-theme-switch" label="Dark theme" defaultChecked={false} onChange={() =>
-                document.querySelector('html').classList.toggle('pf-v5-theme-dark')} />
+                <ToggleGroup aria-label="Dark theme toggle group">
+                  <ToggleGroupItem aria-label="light theme toggle" icon={<Icon size="md"><SunIcon /></Icon>} isSelected={!isDarkTheme} onChange={toggleDarkTheme} />
+                  <ToggleGroupItem aria-label="dark theme toggle" icon={<Icon size="md"><MoonIcon /></Icon>} isSelected={isDarkTheme} onChange={toggleDarkTheme} />
+                </ToggleGroup>
             </ToolbarItem>
           )}
           {hasRTLSwitcher && (