Skip to content

F
frontend
Commit a6d05af5 authored by Igor Stuev's avatar Igor Stuev Committed by GitHub
Browse files
Options

fix incorrect color mode (#2596)

parent 540d95ee
Hide whitespace changes
Inline Side-by-side
Showing with 7 additions and 3 deletions
lib/contexts/chakra.tsx
View file @ a6d05af5
...@@ -6,6 +6,7 @@ import { ...@@ -6,6 +6,7 @@ import {
import type { ChakraProviderProps } from '@chakra-ui/react'; import type { ChakraProviderProps } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import { get, NAMES } from 'lib/cookies';
import theme from 'theme/theme'; import theme from 'theme/theme';
interface Props extends ChakraProviderProps { interface Props extends ChakraProviderProps {
...@@ -13,10 +14,13 @@ interface Props extends ChakraProviderProps { ...@@ -13,10 +14,13 @@ interface Props extends ChakraProviderProps {
} }
export function ChakraProvider({ cookies, children }: Props) { export function ChakraProvider({ cookies, children }: Props) {
// When a cookie header is present, cookieStorageManagerSSR looks for a "chakra-ui-color-mode" cookie.
// If it doesn’t find one, it doesn’t consider theme’s initialColorMode. Instead, it is defaulting to light mode
// So we need to use localStorageManager instead of cookieStorageManagerSSR to get the correct default color mode
const colorModeManager = const colorModeManager =
typeof cookies === 'string' ? typeof cookies === 'string' && get(NAMES.COLOR_MODE, cookies) ?
cookieStorageManagerSSR(typeof document !== 'undefined' ? document.cookie : cookies) : cookieStorageManagerSSR(typeof document !== 'undefined' ? document.cookie : cookies) :
localStorageManager; localStorageManager;
return ( return (
<ChakraProviderDefault colorModeManager={ colorModeManager } theme={ theme }> <ChakraProviderDefault colorModeManager={ colorModeManager } theme={ theme }>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment