Persist the darkmode state

Author: markrickert

src/components/common/Diff/DiffCommentReminder.js

@@ -32,11 +32,11 @@ const DiffCommentReminder = styled(
   }
 )`
   display: inline;
-  background-color: #fffbe6;
+  background-color: ${({ theme }) => theme.yellowBackground};
   padding: 5px;
   border-radius: 3px;
   margin-left: 10px;
-  border: 1px solid #ffe58f;
+  border: 1px solid ${({ theme }) => theme.yellowBorder};
 
   & > .icon {
     margin-right: 6px;

src/components/common/Diff/DiffViewStyleOptions.js

@@ -32,7 +32,7 @@ const DiffViewStyleOptions = styled(
   &,
   &:hover,
   &:focus {
-    color: #24292e;
+    color: ${({ theme }) => theme.text};
   }
 `
 export default DiffViewStyleOptions

src/components/common/Markdown.js

@@ -12,7 +12,7 @@ export const Link = styled((props) => (
   />
 ))`
   text-decoration: none;
-  color: #045dc1;
+  color: ${({ theme }) => theme.link};
 `
 
 const InlineCode = styled.em`

src/components/common/UpgradeSupportAlert.js

@@ -25,10 +25,10 @@ const UpgradeSupportAlert = styled((props) => (
   </div>
 ))`
   span > a {
-    color: #045dc1;
+    color: ${({ theme }) => theme.link}};
 
     &:hover {
-      color: #40a9ff;
+      color: ${({ theme }) => theme.linkHover}};
     }
   }
 `

src/components/pages/Home.js

@@ -4,6 +4,7 @@ import { ThemeProvider } from '@emotion/react'
 import { Card, Input, Typography, ConfigProvider, theme } from 'antd'
 import GitHubButton from 'react-github-btn'
 import ReactGA from 'react-ga'
+import createPersistedState from 'use-persisted-state'
 import VersionSelector from '../common/VersionSelector'
 import DiffViewer from '../common/DiffViewer'
 import Settings from '../common/Settings'
@@ -114,6 +115,10 @@ const StarButton = styled(({ className, ...props }) => (
   margin-right: auto;
 `
 
+// Set up a persisted state hook for for dark mode so users coming back
+// will have dark mode automatically if they've selected it previously.
+const useDarkModeState = createPersistedState('darkMode')
+
 const Home = () => {
   const { packageName: defaultPackageName, isPackageNameDefinedInURL } =
     useGetPackageNameFromURL()
@@ -185,10 +190,17 @@ const Home = () => {
     setSettings(normalizedIncomingSettings)
   }
 
-  const { defaultAlgorithm, darkAlgorithm } = theme
-  const [isDarkMode, setIsDarkMode] = useState(false)
+  // Dark Mode Setup:
+  const { defaultAlgorithm, darkAlgorithm } = theme // Get default and dark mode states from antd.
+  const [isDarkMode, setIsDarkMode] = useDarkModeState(false) // Remembers dark mode state between sessions.
   const toggleDarkMode = () => setIsDarkMode((previousValue) => !previousValue)
   const themeString = isDarkMode ? 'dark' : 'light'
+  useEffect(() => {
+    // Set the document's background color to the theme's body color.
+    document.body.style.backgroundColor = isDarkMode
+      ? darkTheme.background
+      : lightTheme.background
+  }, [isDarkMode])
 
   return (
     <ConfigProvider

src/theme/index.js

@@ -1,9 +1,10 @@
 export const lightTheme = {
-  body: '#FFF',
   background: '#ffffff',
 
   text: '#363537',
   textHover: 'rgba(27, 31, 35, 0.6)',
+  link: '#045dc1',
+  linkHover: '#40a9ff',
   border: '#e8e8e8',
   greenBorder: '#bef5cb',
   yellowBorder: '#ffe58f',
@@ -42,10 +43,13 @@ export const lightTheme = {
   },
 }
 export const darkTheme = {
-  body: '#363537',
   background: '#363537',
+
   text: '#FAFAFA',
   textHover: '#999',
+  link: '#045dc1',
+  linkHover: '#40a9ff',
+
   border: '#888',
   greenBorder: '#bef5cb',
   yellowBorder: '#c69026',