Skip to content
This repository has been archived by the owner on Apr 26, 2024. It is now read-only.

feat(useSetDocumentColorScheme): set document color scheme css hook #2880

Merged
merged 8 commits into from Oct 6, 2022
Merged

feat(useSetDocumentColorScheme): set document color scheme css hook #2880

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a21c6f5
feat(useSetDocumentColorScheme): add hook
junwen-k Oct 5, 2022
c21c194
feat(useSetDocumentColorScheme): use hook
junwen-k Oct 5, 2022
ba66bed
Merge branch 'main' into feature/useSetDocumentColorScheme
ovflowd Oct 5, 2022
0ed7559
feat(useUpdateDocumentColorScheme): update hook
junwen-k Oct 6, 2022
9d84a99
test(useUpdateDocumentColorScheme): add test
junwen-k Oct 6, 2022
3fa243a
fix(useUpdateDocumentColorScheme): fix lint
junwen-k Oct 6, 2022
c920d11
feat(useUpdateDocumentColorScheme): use hook
junwen-k Oct 6, 2022
935a1a9
Merge branch 'main' into feature/useSetDocumentColorScheme
ovflowd Oct 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 3 additions & 7 deletions src/components/DarkModeToggle/index.tsx
View file
Open in desktop
@@ -1,18 +1,14 @@
import React, { useEffect } from 'react';
import React from 'react';
import { useTheme } from '@skagami/gatsby-plugin-dark-mode';
import ModeNightIcon from '@mui/icons-material/ModeNight';
import BrightnessMediumIcon from '@mui/icons-material/BrightnessMedium';
import { useSetDocumentColorScheme } from '../../hooks/useSetDocumentColorScheme';
import styles from './index.module.scss';

const DarkModeToggle = () => {
const [theme, toggleTheme] = useTheme();

useEffect(() => {
// This is responsible for setting the color-scheme of the scroll-bars
if (typeof document === 'object' && document.documentElement) {
document.documentElement.style['color-scheme'] = theme;
}
}, [theme]);
useSetDocumentColorScheme(theme);

const handleThemeOnClick = (isKeyPress = false): void => {
if (isKeyPress) {
Expand Down
10 changes: 10 additions & 0 deletions src/hooks/useSetDocumentColorScheme.ts
View file
Open in desktop
@@ -0,0 +1,10 @@
import { useEffect } from 'react';

export function useSetDocumentColorScheme(theme: string | null): void {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I think this should be something like:

export function useSetDocumentColorScheme(): void {
  const [currentTheme, setCurrentTheme] = useState();

  useEffect(() => {
    // This is responsible for setting the color-scheme of the scroll-bars
    if (typeof document === 'object' && document.documentElement) {
      document.documentElement.style['color-scheme'] = theme;
    }
  }, [currentTheme]);

  return (theme: string | null) => setCurrentTheme(theme);
}

useEffect(() => {
// This is responsible for setting the color-scheme of the scroll-bars
if (typeof document === 'object' && document.documentElement) {
document.documentElement.style['color-scheme'] = theme;
}
}, [theme]);
}