feat: ✨ add dark mode support

Features:
- header dark/light mode toggle
- configurable theming
- configuration: enabled/disabled, setting dark mode as default
- setting up user-preferred theme based on browser / system config

config/config.yml

@@ -103,3 +103,7 @@ features:
  matchRegex: "^/"
  outputPath: "/rss.xml"
  generator: "gidocs"
+ darkMode:
+ enabled: true 
+ default: false
+

config/default.js

@@ -99,5 +99,9 @@ module.exports = {
  outputPath: '/rss.xml',
  generator: 'gidocs',
  },
+ darkMode: {
+ enabled: true,
+ default: false,
+ }
  },
 };

src/components/darkModeSwitch.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Sun as DayImage, Moon as NightImage } from 'react-feather';
+
+const StyledSwitch = styled('div')`
+ display: flex;
+ justify-content: flex-end;
+ width: 100%;
+ margin: 0 20px 0 5px;
+ padding: 6px;
+
+ background-color: ${(props) => props.theme.darkModeSwitch.background};
+ border-radius: 50%;
+ cursor: pointer;
+ &:hover {
+ svg {
+ fill: ${(props) => props.theme.darkModeSwitch.hover};
+ stroke: ${(props) => props.theme.darkModeSwitch.hover};
+ }
+ }
+ svg {
+ transition: ${(props) => props.theme.transitions.hover};
+ fill: ${(props) => props.theme.darkModeSwitch.fill};
+ stroke: ${(props) => props.theme.darkModeSwitch.stroke};
+ }
+`;
+
+export const DarkModeSwitch = ({ isDarkThemeActive, toggleActiveTheme, ...props }) => {
+ const img = isDarkThemeActive ? NightImage : DayImage;
+ return (
+ <StyledSwitch {...props} role={'button'} tabIndex={0} onClick={toggleActiveTheme}>
+ {/* not defining color as a workaround to use css styling instead */}
+ {img.render({ color: '' })}
+ </StyledSwitch>
+ );
+};

src/components/header/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { StaticQuery, graphql } from 'gatsby';
 import 'css';
 import config from 'config';
@@ -8,6 +8,7 @@ import Navigation from './navigation';
 import Sidebar from '../sidebar';
 import styled from '@emotion/styled';
 import SearchBox from '../search/input';
+import { DarkModeSwitch } from '../darkModeSwitch';
 
 const isSearchEnabled = config.features.search && config.features.search.enabled;
 
@@ -85,7 +86,7 @@ const TopNavigation = styled.div`
  }
 `;
 
-const Index = ({ setShowSearch, location }) => (
+const Index = ({ setShowSearch, location, themeProvider }) => (
  <StaticQuery
  query={graphql`
  query headerTitleQuery {
@@ -114,6 +115,12 @@ const Index = ({ setShowSearch, location }) => (
  } = data;
  const logoLink = logo.link !== '' ? logo.link : '/';
  const logoImg = require('images/logo.svg');
+ const [darkMode, setDarkMode] = useState(false);
+
+ useEffect(() => {
+ setDarkMode(themeProvider.current.retrieveActiveTheme());
+ });
+
  return (
  <Header>
  <Logo link={logoLink} img={logoImg} title={headerTitle} />
@@ -142,6 +149,18 @@ const Index = ({ setShowSearch, location }) => (
  />
  </SearchWrapper>
  ) : null}
+
+ {config.features.darkMode.enabled ? (
+ <DarkModeSwitch
+ css={{ flex: '0' }}
+ isDarkThemeActive={darkMode}
+ toggleActiveTheme={() => {
+ setDarkMode(themeProvider.current.toggleActiveTheme());
+ }}
+ />
+ ) : (
+ ''
+ )}
  </Header>
  );
  }}

src/components/layout.js

@@ -35,13 +35,17 @@ const Content = styled('main')`
 
 const Layout = ({ children, location }) => {
  const [showSearch, setShowSearch] = useState(false);
-
+ const themeProviderRef = React.createRef();
  return (
- <ThemeProvider>
+ <ThemeProvider ref={themeProviderRef} darkModeConfig={config.features.darkMode}>
  {config.header.enabled === true ? (
  <>
  <SearchSidebar show={showSearch} setShow={setShowSearch} />
- <Header location={location} setShowSearch={setShowSearch} />
+ <Header
+ location={location}
+ setShowSearch={setShowSearch}
+ themeProvider={themeProviderRef}
+ />
  </>
  ) : (
  ''

src/components/themeProvider.js

@@ -1,12 +1,56 @@
-import * as React from 'react';
+import React from 'react';
 import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
-import { default as defaultTheme } from '../theme';
-import 'css';
-
-export default function ThemeProvider({ children, theme = {} }) {
- return (
- <div>
- <EmotionThemeProvider theme={{ ...defaultTheme, ...theme }}>{children}</EmotionThemeProvider>
- </div>
- );
+import { light, dark } from '../theme';
+
+class ThemeProvider extends React.Component {
+ state = {
+ isDarkThemeActive: false,
+ };
+
+ constructor({ darkModeConfig }) {
+ super();
+ this.darkModeConfig = darkModeConfig;
+ }
+
+ componentDidMount() {
+ this.retrieveActiveTheme();
+ }
+
+ retrieveActiveTheme = () => {
+ if (!this.darkModeConfig.enabled) {
+ return false;
+ }
+ let isDarkThemeActive = JSON.parse(window.localStorage.getItem('isDarkThemeActive'));
+ if (isDarkThemeActive == null) {
+ isDarkThemeActive =
+ window.matchMedia('(prefers-color-scheme: dark)').matches || this.darkModeConfig.default;
+ }
+ this.setState({ isDarkThemeActive });
+ return isDarkThemeActive;
+ };
+
+ toggleActiveTheme = () => {
+ if (!this.darkModeConfig.enabled) {
+ console.warn('Dark mode is disabled, but trying to activate it.');
+ return false;
+ }
+ this.setState((prevState) => ({ isDarkThemeActive: !prevState.isDarkThemeActive }));
+
+ window.localStorage.setItem('isDarkThemeActive', JSON.stringify(!this.state.isDarkThemeActive));
+ return !this.state.isDarkThemeActive;
+ };
+
+ render() {
+ const { children } = this.props;
+ const { isDarkThemeActive } = this.state;
+ const currentActiveTheme = isDarkThemeActive ? dark : light;
+
+ return (
+ <div>
+ <EmotionThemeProvider theme={currentActiveTheme}>{children}</EmotionThemeProvider>
+ </div>
+ );
+ }
 }
+
+export default ThemeProvider;