Skip to content

Commit

Permalink
feat: enhance dark mode foundations
Browse files Browse the repository at this point in the history
refs #21
  • Loading branch information
mezeitamas committed Jun 7, 2023
1 parent 3c8cdc4 commit 3c25987
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 7 deletions.
7 changes: 6 additions & 1 deletion jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,12 @@ module.exports = {

// Coverage
collectCoverage: true,
collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.types.{ts,tsx}', '!src/**/*.test.{ts,tsx}', '!src/gatsby-types.d.ts'],
collectCoverageFrom: [
'src/**/*.{ts,tsx}',
'!src/**/*.types.{ts,tsx}',
'!src/**/*.test.{ts,tsx}',
'!src/gatsby-types.d.ts'
],
coverageDirectory: 'reports/coverage',
coveragePathIgnorePatterns: ['/node_modules/'],
coverageProvider: 'babel',
Expand Down
36 changes: 32 additions & 4 deletions src/components/dark-mode-switch/dark-mode-switch.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,43 @@
import React, { useCallback, useState } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import type { FunctionComponent, ReactElement } from 'react';

import { FiSun, FiMoon } from 'react-icons/fi';

const DarkModeSwitch: FunctionComponent = (): ReactElement => {
const [darkMode, setDarkMode] = useState<boolean>(false);

const changeColorScheme = useCallback((darkMode: boolean) => {
if (darkMode === true) {
window.localStorage.setItem('darkModeColorScheme', 'dark');
document.documentElement.classList.add('dark');
} else {
window.localStorage.removeItem('darkModeColorScheme');
document.documentElement.classList.remove('dark');
}

setDarkMode(darkMode);
}, []);

const toggleDarkMode = useCallback(() => {
setDarkMode(!darkMode);
document.documentElement.classList.toggle('dark');
}, [darkMode]);
changeColorScheme(!darkMode);
}, [darkMode, changeColorScheme]);

useEffect(() => {
const savedDarkModeColorScheme = window.localStorage.getItem('darkModeColorScheme');
const darkModeColorSchemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

changeColorScheme(savedDarkModeColorScheme === 'dark' ? true : darkModeColorSchemeMediaQuery.matches);

const darkModeColorSchemeChangeHandler = (event: MediaQueryListEvent) => {
changeColorScheme(event.matches);
};

darkModeColorSchemeMediaQuery.addEventListener('change', darkModeColorSchemeChangeHandler);

return () => {
darkModeColorSchemeMediaQuery.removeEventListener('change', darkModeColorSchemeChangeHandler);
};
}, [changeColorScheme]);

return (
<>
Expand Down
2 changes: 1 addition & 1 deletion src/components/layout/__snapshots__/layout.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`<Layout /> should render 1`] = `
<div
className="container mx-auto bg-white px-4"
className="container mx-auto bg-white px-4 dark:bg-black"
>
<header
className="mb-12 mt-6 flex flex-col gap-4 leading-8"
Expand Down
2 changes: 1 addition & 1 deletion src/components/layout/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const Layout: FunctionComponent<PropsWithChildren> = ({ children }): ReactElemen
const { title, author } = useSiteMetadata();

return (
<div className="container mx-auto bg-white px-4">
<div className="container mx-auto bg-white px-4 dark:bg-black">
<Header title={title} />

<Content>{children}</Content>
Expand Down

0 comments on commit 3c25987

Please sign in to comment.