Add antd config provider for automated darkm mode in lots of components

markrickert · markrickert · commit a48fa53dfdfa · 2023-12-01T08:56:11.000-07:00
diff --git a/src/components/common/BinaryDownload.js b/src/components/common/BinaryDownload.js
@@ -12,23 +12,22 @@ const BinaryRow = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: ${({ index }) => (index % 2 === 0 ? '#fafbfc' : '#ffffff')};
-  color: #24292e;
+  background-color: ${({ index, theme }) =>
+    index % 2 === 0 ? theme.rowEven : theme.rowOdd};
   font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
     monospace;
   font-size: 12px;
   width: 500px;
   max-width: 500px;
   padding: 10px 15px;
-  border-bottom: 1px solid #e1e4e8;
+  border-bottom: 1px solid ${({ theme }) => theme.border};
 `
 
 const Popover = styled(({ className, ...props }) => (
   <AntdPopover overlayClassName={className} {...props} />
 ))`
   .ant-popover-inner-content {
     padding: 0;
-    background: red;
   }
 `
 
diff --git a/src/components/common/Diff/DiffHeader.js b/src/components/common/Diff/DiffHeader.js
@@ -26,10 +26,10 @@ const Wrapper = styled.div`
   font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
     monospace;
   font-size: 12px;
-  color: #24292e;
+  color: ${({ theme }) => theme.text};
   line-height: 32px;
-  background-color: #fafbfc;
-  border-bottom: 1px solid #e1e4e8;
+  background-color: ${({ theme }) => theme.background};
+  border-bottom: 1px solid ${({ theme }) => theme.border};
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   padding: 5px 10px;
@@ -212,7 +212,7 @@ const CollapseClickableArea = styled.div`
 const CollapseDiffButton = styled(({ open, isDiffCollapsed, ...props }) =>
   open ? <Button {...props} type="link" icon={<DownOutlined />} /> : null
 )`
-  color: #24292e;
+  color: ${({ theme }) => theme.text};
   margin-right: 2px;
   font-size: 10px;
   transform: ${({ isDiffCollapsed }) =>
@@ -223,7 +223,7 @@ const CollapseDiffButton = styled(({ open, isDiffCollapsed, ...props }) =>
   height: auto;
   &:hover,
   &:focus {
-    color: #24292e;
+    color: ${({ theme }) => theme.text};
   }
 `
 
diff --git a/src/components/common/Settings.js b/src/components/common/Settings.js
@@ -31,8 +31,8 @@ const Settings = ({
   packageName,
   language,
   onChangePackageNameAndLanguage,
-  themeName,
-  handleThemeToggle,
+  isDarkMode,
+  toggleDarkMode,
 }) => {
   const [popoverVisibility, setVisibility] = useState(false)
   const [newPackageName, setNewPackageName] = useState(packageName)
@@ -61,8 +61,6 @@ const Settings = ({
   const updateCheckboxValues = (checkboxValues) =>
     handleSettingsChange(checkboxValues)
 
-  const humanThemeName = themeName[0].toUpperCase() + themeName.substring(1)
-
   return (
     <Popover
       placement="bottomRight"
@@ -107,8 +105,8 @@ const Settings = ({
             </Radio.Group>
           </PlatformsContainer>
           <h5>Theme:</h5>
-          <Button title={humanThemeName} onClick={handleThemeToggle}>
-            {humanThemeName}
+          <Button onClick={toggleDarkMode}>
+            {isDarkMode ? 'Dark' : 'Light'}
           </Button>
         </>
       }
diff --git a/src/components/common/ViewFileButton.js b/src/components/common/ViewFileButton.js
@@ -22,7 +22,6 @@ const ViewFileButton = styled(
   }
 )`
   font-size: 12px;
-  color: #24292e;
 `
 
 export default ViewFileButton
diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useDeferredValue } from 'react'
 import styled from '@emotion/styled'
-import { ThemeProvider } from '@emotion/react'
-import { Card, Input, Typography } from 'antd'
+import { ThemeProvider, Global, css } from '@emotion/react'
+import { Card, Input, Typography, ConfigProvider, theme } from 'antd'
 import GitHubButton from 'react-github-btn'
 import ReactGA from 'react-ga'
 import VersionSelector from '../common/VersionSelector'
@@ -31,6 +31,7 @@ const Page = styled.div`
 `
 
 const Container = styled(Card)`
+  background-color: ${({ theme }) => theme.background};
   width: 90%;
   border-radius: 3px;
   border-color: ${({ theme }) => theme.border};
@@ -184,108 +185,129 @@ const Home = () => {
     setSettings(normalizedIncomingSettings)
   }
 
-  const [themeName, setThemeName] = useState('light')
-  const themeToggler = () => {
-    themeName === 'light' ? setThemeName('dark') : setThemeName('light')
-  }
+  const { defaultAlgorithm, darkAlgorithm } = theme
+  const [isDarkMode, setIsDarkMode] = useState(false)
+  const toggleDarkMode = () => setIsDarkMode((previousValue) => !previousValue)
+  const themeString = isDarkMode ? 'dark' : 'light'
 
   return (
-    <ThemeProvider theme={themeName === 'light' ? lightTheme : darkTheme}>
-      <Page>
-        <Container>
-          <HeaderContainer>
-            <TitleContainer>
-              <LogoImg
-                alt="React Native Upgrade Helper logo"
-                title="React Native Upgrade Helper logo"
-                src={logo}
-              />
-              <a href={homepageUrl}>
-                <TitleHeader>React Native Upgrade Helper</TitleHeader>
-              </a>
-            </TitleContainer>
-
-            <SettingsContainer>
-              <StarButton
-                href="https://github.com/react-native-community/upgrade-helper"
-                data-icon="octicon-star"
-                data-show-count="true"
-                aria-label="Star react-native-community/upgrade-helper on GitHub"
-              >
-                Star
-              </StarButton>
-              {packageName === PACKAGE_NAMES.RN && (
-                <TroubleshootingGuidesButton />
-              )}
-              <Settings
-                handleSettingsChange={handleSettingsChange}
-                packageName={packageName}
-                onChangePackageNameAndLanguage={
-                  handlePackageNameAndLanguageChange
-                }
-                language={language}
-                themeName={themeName}
-                handleThemeToggle={themeToggler}
-              />
-            </SettingsContainer>
-          </HeaderContainer>
-
-          <AppDetailsContainer>
-            <AppNameField>
-              <Typography.Title level={5}>
-                What's your app name?
-              </Typography.Title>
-
-              <Input
-                size="large"
-                placeholder={DEFAULT_APP_NAME}
-                value={appName}
-                onChange={({ target }) => setAppName((value) => target.value)}
-              />
-            </AppNameField>
-
-            <AppPackageField>
-              <Typography.Title level={5}>
-                What's your app package?
-              </Typography.Title>
-
-              <Input
-                size="large"
-                placeholder={DEFAULT_APP_PACKAGE}
-                value={appPackage}
-                onChange={({ target }) =>
-                  setAppPackage((value) => target.value)
-                }
-              />
-            </AppPackageField>
-          </AppDetailsContainer>
-          <VersionSelector
-            key={packageName}
-            showDiff={handleShowDiff}
-            showReleaseCandidates={settings[SHOW_LATEST_RCS]}
-            packageName={packageName}
-            language={language}
-            isPackageNameDefinedInURL={isPackageNameDefinedInURL}
-          />
-        </Container>
-        {/*
+    <ConfigProvider
+      theme={{
+        algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
+        // components: {
+        //   Button: {
+        //     // colorPrimary: '#00b96b',
+        //     algorithm: true, // Enable algorithm
+        //   },
+        //   Input: {
+        //     colorPrimary: '#eb2f96',
+        //     algorithm: true, // Enable algorithm
+        //   },
+        // },
+      }}
+    >
+      <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
+        <Page>
+          <Container>
+            <HeaderContainer>
+              <TitleContainer>
+                <LogoImg
+                  alt="React Native Upgrade Helper logo"
+                  title="React Native Upgrade Helper logo"
+                  src={logo}
+                />
+                <a href={homepageUrl}>
+                  <TitleHeader>React Native Upgrade Helper</TitleHeader>
+                </a>
+              </TitleContainer>
+
+              <SettingsContainer>
+                <StarButton
+                  href="https://github.com/react-native-community/upgrade-helper"
+                  data-icon="octicon-star"
+                  data-show-count="true"
+                  aria-label="Star react-native-community/upgrade-helper on GitHub"
+                  data-color-scheme={`no-preference: ${themeString}; light: ${themeString}; dark: ${themeString};`}
+                >
+                  Star
+                </StarButton>
+                {packageName === PACKAGE_NAMES.RN && (
+                  <TroubleshootingGuidesButton />
+                )}
+                <Settings
+                  handleSettingsChange={handleSettingsChange}
+                  packageName={packageName}
+                  onChangePackageNameAndLanguage={
+                    handlePackageNameAndLanguageChange
+                  }
+                  language={language}
+                  isDarkMode={isDarkMode}
+                  toggleDarkMode={toggleDarkMode}
+                />
+              </SettingsContainer>
+            </HeaderContainer>
+
+            <AppDetailsContainer>
+              <AppNameField>
+                <Typography.Title level={5}>
+                  What's your app name?
+                </Typography.Title>
+
+                <Input
+                  size="large"
+                  placeholder={DEFAULT_APP_NAME}
+                  value={appName}
+                  onChange={({ target }) => setAppName((value) => target.value)}
+                />
+              </AppNameField>
+
+              <AppPackageField>
+                <Typography.Title level={5}>
+                  What's your app package?
+                </Typography.Title>
+
+                <Input
+                  size="large"
+                  placeholder={DEFAULT_APP_PACKAGE}
+                  value={appPackage}
+                  onChange={({ target }) =>
+                    setAppPackage((value) => target.value)
+                  }
+                />
+              </AppPackageField>
+            </AppDetailsContainer>
+            <VersionSelector
+              key={packageName}
+              showDiff={handleShowDiff}
+              showReleaseCandidates={settings[SHOW_LATEST_RCS]}
+              packageName={packageName}
+              language={language}
+              isPackageNameDefinedInURL={isPackageNameDefinedInURL}
+            />
+          </Container>
+          {/*
         Pass empty values for app name and package if they're the defaults to 
         hint to diffing components they don't need to further patch the 
         rn-diff-purge output.
       */}
-        <DiffViewer
-          shouldShowDiff={shouldShowDiff}
-          fromVersion={fromVersion}
-          toVersion={toVersion}
-          appName={deferredAppName !== DEFAULT_APP_NAME ? deferredAppName : ''}
-          appPackage={
-            deferredAppPackage !== DEFAULT_APP_PACKAGE ? deferredAppPackage : ''
-          }
-          packageName={packageName}
-          language={language}
-        />
-      </Page>
-    </ThemeProvider>
+          <DiffViewer
+            shouldShowDiff={shouldShowDiff}
+            fromVersion={fromVersion}
+            toVersion={toVersion}
+            appName={
+              deferredAppName !== DEFAULT_APP_NAME ? deferredAppName : ''
+            }
+            appPackage={
+              deferredAppPackage !== DEFAULT_APP_PACKAGE
+                ? deferredAppPackage
+                : ''
+            }
+            packageName={packageName}
+            language={language}
+          />
+        </Page>
+      </ThemeProvider>
+    </ConfigProvider>
   )
 }
 
diff --git a/src/theme/index.js b/src/theme/index.js
@@ -1,22 +1,31 @@
 export const lightTheme = {
   body: '#FFF',
-  //   text: '#363537',
+  background: '#ffffff',
+
+  text: '#363537',
   //   toggleBorder: '#FFF',
   //   background: '#363537',
   border: '#e8e8e8',
   greenBorder: '#bef5cb',
   yellowBorder: '#ffe58f',
   lightGreenBackground: '#cdffd8',
   darkGreenBackground: '#acf2bd',
+  // Alternating Rows
+  rowEven: '#fafbfc',
+  rowOdd: '#ffffff',
 }
 export const darkTheme = {
   body: '#363537',
-  //   text: '#FAFAFA',
+  background: '#363537',
+  text: '#FAFAFA',
   //   toggleBorder: '#6B8096',
   //   background: '#999',
-  border: '#e8e8e8',
+  border: '#888',
   greenBorder: '#bef5cb',
   yellowBorder: '#ffe58f',
   lightGreenBackground: '#cdffd8',
   darkGreenBackground: '#acf2bd',
+  // Alternating Rows
+  rowEven: '#363537',
+  rowOdd: '#363537',
 }

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,6 @@ const ViewFileButton = styled(`
`22`	`22`	`}`
`23`	`23`	)`
`24`	`24`	`font-size: 12px;`
`25`		`- color: #24292e;`
`26`	`25`	`
`27`	`26`
`28`	`27`	`export default ViewFileButton`