load and persist application theme

This commit is contained in:
vincentbpro 2022-02-24 12:12:41 +01:00
parent 3a74150d3a
commit d50bf67bf2
2 changed files with 17 additions and 2 deletions

View File

@ -8,11 +8,21 @@ import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { ThemeToggleContext } from '../../contexts';
const THEME_KEY = 'STRAPI_THEME';
const getDefaultTheme = () => {
const browserTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
const persistedTheme = localStorage.getItem(THEME_KEY);
return persistedTheme || browserTheme;
};
const ThemeToggleProvider = ({ children, themes }) => {
const [currentTheme, setCurrentTheme] = useState('light');
const [currentTheme, setCurrentTheme] = useState(getDefaultTheme());
const handleChangeTheme = nextTheme => {
setCurrentTheme(nextTheme);
localStorage.setItem(THEME_KEY, nextTheme);
};
return (

View File

@ -1,9 +1,12 @@
import { isEmpty } from 'lodash';
// TODO @soupette we need to refactor this file
import isEmpty from 'lodash/isEmpty';
const TOKEN_KEY = 'jwtToken';
const USER_INFO = 'userInfo';
const CURRENT_STEP = 'GUIDED_TOUR_CURRENT_STEP';
const COMPLETED_STEPS = 'GUIDED_TOUR_COMPLETED_STEPS';
const THEME_KEY = 'STRAPI_THEME'; // Also used in packages/core/admin/admin/src/components/ThemeToggleProvider/index.js
const parse = JSON.parse;
const stringify = JSON.stringify;
@ -29,6 +32,7 @@ const auth = {
const localeLang = localStorage.getItem('strapi-admin-language');
const guidedTourCurrentStep = auth.get(CURRENT_STEP);
const guidedTourState = auth.get(COMPLETED_STEPS);
const applicationTheme = localStorage.getItem(THEME_KEY);
localStorage.clear();
@ -38,6 +42,7 @@ const auth = {
localStorage.setItem('strapi-admin-language', localeLang);
localStorage.setItem(CURRENT_STEP, stringify(guidedTourCurrentStep));
localStorage.setItem(COMPLETED_STEPS, stringify(guidedTourState));
localStorage.setItem(THEME_KEY, applicationTheme);
}
if (sessionStorage) {