Skip to content

Commit

Permalink
feat(dark theme): revert localstorage/pref feature (#4424)
Browse files Browse the repository at this point in the history
  • Loading branch information
kmcfaul authored Dec 18, 2024
1 parent 01b5459 commit 0ffa269
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 113 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState, createContext, useCallback } from 'react';
import React, { useEffect, useState, createContext } from 'react';
import {
Button,
Page,
Expand Down Expand Up @@ -232,26 +232,6 @@ export function attachDocSearch(algolia, inputSelector, timeout) {
}
}

const DARK_MODE_CLASS = 'pf-v6-theme-dark';
const DARK_MODE_STORAGE_KEY = 'dark-mode';

/**
* Determines if dark mode is enabled based on the stored value or the system preference.
* @returns {boolean} true if dark mode is enabled, false otherwise
*/
function isDarkModeEnabled() {
// When running in prerender mode we can't access the browser APIs.
if (process.env.PRERENDER) {
return false;
}

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const storedValue = localStorage.getItem(DARK_MODE_STORAGE_KEY);
const isEnabled = storedValue === null ? mediaQuery.matches : storedValue === 'true';

return isEnabled;
}

export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp }) => {
const algolia = process.env.algolia;
const hasGdprBanner = process.env.hasGdprBanner;
Expand All @@ -265,63 +245,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })

const [versions, setVersions] = useState({ ...staticVersions });
const [isRTL, setIsRTL] = useState(false);
const [isDarkTheme, setIsDarkThemeInternal] = useState(() => isDarkModeEnabled());

/**
* Stores the dark mode preference in local storage and updates the dark mode class.
*/
const setIsDarkTheme = useCallback((value) => {
localStorage.setItem(DARK_MODE_STORAGE_KEY, value.toString());
updateDarkMode();
}, []);

/**
* Updates the dark mode class to the root element depending on whether dark mode is enabled.
*/
const updateDarkMode = useCallback(() => {
const isEnabled = isDarkModeEnabled();
const root = document.documentElement;

if (isEnabled) {
root.classList.add(DARK_MODE_CLASS);
} else {
root.classList.remove(DARK_MODE_CLASS);
}

setIsDarkThemeInternal(isEnabled);
}, []);

useEffect(() => {
// When running in prerender mode we can't access the browser APIs.
if (process.env.PRERENDER) {
return;
}

// Update the dark mode when the the user changes their system/browser preference.
const onQueryChange = () => {
// Remove the stored value to defer to the system preference.
localStorage.removeItem(DARK_MODE_STORAGE_KEY);
updateDarkMode();
};

// Update the dark mode when the user changes the preference in another context (e.g. tab or window).
/** @type {(event: StorageEvent) => void} */
const onStorageChange = (event) => {
if (event.key === DARK_MODE_STORAGE_KEY) {
updateDarkMode();
}
};

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

mediaQuery.addEventListener('change', onQueryChange);
window.addEventListener('storage', onStorageChange);

return () => {
mediaQuery.removeEventListener('change', onQueryChange);
window.removeEventListener('storage', onStorageChange);
};
}, []);
const [isDarkTheme, setIsDarkTheme] = React.useState(false);

useEffect(() => {
if (typeof window === 'undefined') {
Expand Down
35 changes: 0 additions & 35 deletions packages/documentation-framework/templates/html.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -13,41 +13,6 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#151515">
<meta name="application-name" content="PatternFly docs">
<script>
(() => {
"use strict";
const DARK_MODE_CLASS = "pf-v6-theme-dark";
const DARK_MODE_STORAGE_KEY = "dark-mode";
const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
// Ensure that the dark mode is correctly set before the page starts rendering.
updateDarkMode();
/**
* Applies the dark mode class to the root element if dark mode is enabled.
*/
function updateDarkMode() {
const isEnabled = isDarkModeEnabled();
const root = document.documentElement;
if (isEnabled) {
root.classList.add(DARK_MODE_CLASS);
}
}
/**
* Determines if dark mode is enabled based on the stored value or the system preference.
* @returns {boolean} true if dark mode is enabled, false otherwise
*/
function isDarkModeEnabled() {
const storedValue = localStorage.getItem(DARK_MODE_STORAGE_KEY);
const isEnabled = storedValue === null ? darkModeQuery.matches : storedValue === "true";
return isEnabled;
}
})();
</script>
<%= htmlWebpackPlugin.tags.headTags %>
</head>
<body>
Expand Down

0 comments on commit 0ffa269

Please sign in to comment.