Dark mode the diffs

markrickert · markrickert · commit 4db7e9431712 · 2023-12-01T09:02:01.000-07:00
diff --git a/src/components/common/Diff/Diff.js b/src/components/common/Diff/Diff.js
@@ -21,17 +21,17 @@ const Container = styled.div`
   border-radius: 3px;
   margin-bottom: 16px;
   margin-top: 16px;
+  color: ${({ theme }) => theme.text};
 `
 
 const More = styled.div`
-  background-color: #f1f8ff;
   margin-left: 30px;
   padding-left: 4px;
-  color: '#1b1f23b3';
 `
 
 const Decoration = styled(DiffDecoration)`
-  background-color: #dbedff;
+  background-color: ${({ theme }) => theme.diff.decorationContentBackground};
+  color: ${({ theme }) => theme.diff.decorationContent};
 `
 
 const DiffView = styled(RDiff)`
@@ -44,31 +44,19 @@ const DiffView = styled(RDiff)`
       monospace;
   }
 
-  td.diff-gutter {
-    color: rgba(27, 31, 35, 0.3);
-    padding: 0;
-    text-align: center;
-    font-size: 12px;
-    cursor: auto;
-  }
-
   td.diff-gutter .diff-line-normal {
-    background-color: ${({ theme }) => theme.lightGreenBackground};
+    background-color: ${({ theme }) => theme.gutterInsertBackground};
     border-color: ${({ theme }) => theme.greenBorder};
   }
 
   td.diff-gutter:hover {
     cursor: pointer;
-    color: rgba(27, 31, 35, 0.6);
+    color: ${({ theme }) => theme.textHover};
   }
 
   td.diff-code {
     font-size: 12px;
-    color: #24292e;
-  }
-
-  td.diff-code-insert .diff-code-edit {
-    background-color: ${({ theme }) => theme.darkGreenBackground};
+    color: ${({ theme }) => theme.text};
   }
 
   td.diff-gutter-omit:before {
@@ -79,6 +67,79 @@ const DiffView = styled(RDiff)`
   td.diff-widget-content {
     padding: 0;
   }
+
+  // From diff global
+  .diff {
+    background-color: ${({ theme }) => theme.diff.backgroundColor};
+    color: ${({ theme }) => theme.diff.text};
+    tab-size: 4;
+    hyphens: none;
+  }
+
+  .diff::selection {
+    background-color: ${({ theme }) => theme.diff.selectionMackground};
+  }
+
+  .diff-decoration {
+    line-height: 2;
+    font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier,
+      monospace;
+    background-color: ${({ theme }) => theme.diff.decorationBackground};
+  }
+
+  .diff-decoration-content {
+    padding-left: 0.5em;
+    background-color: ${({ theme }) => theme.diff.contentBackground};
+    color: ${({ theme }) => theme.diff.decorationContent};
+  }
+
+  .diff-gutter {
+    padding: 0;
+    text-align: center;
+    font-size: 12px;
+    cursor: auto;
+  }
+
+  .diff-gutter-insert {
+    background-color: ${({ theme }) => theme.diff.gutterInsertBackground};
+  }
+
+  .diff-gutter-delete {
+    background-color: ${({ theme }) => theme.diff.gutterDeleteBackground};
+  }
+
+  .diff-gutter-selected {
+    background-color: ${({ theme }) => theme.diff.gutterSelectedBackground};
+  }
+
+  .diff-code-insert {
+    background-color: ${({ theme }) => theme.diff.codeInsertBackground};
+  }
+
+  .diff-code-edit {
+    color: inherit;
+  }
+
+  .diff-code-insert .diff-code-edit {
+    background-color: ${({ theme }) => theme.diff.codeInsertEditBackground};
+  }
+
+  .diff-code-delete {
+    background-color: ${({ theme }) => theme.diff.codeDeleteBackground};
+  }
+
+  .diff-code-delete .diff-code-edit {
+    background-color: ${({ theme }) => theme.diff.codeDeleteEditBackground};
+  }
+
+  .diff-code-selected {
+    background-color: ${({ theme }) => theme.diff.codeSelectedBackground};
+  }
+
+  .diff-decoration-gutter {
+    background-color: ${({ theme }) => theme.diff.decorationGutterBackground};
+    color: ${({ theme }) => theme.diff.decorationGutter};
+  }
 `
 
 // Diff will be collapsed by default if the file has been deleted or has more than 5 hunks
diff --git a/src/components/common/Diff/DiffHeader.js b/src/components/common/Diff/DiffHeader.js
@@ -122,8 +122,8 @@ const CompleteDiffButton = styled(({ open, onClick, ...props }) =>
   &,
   &:hover,
   &:focus {
-    color: ${({ isDiffCompleted }) =>
-      isDiffCompleted ? '#52c41a' : '#24292e'};
+    color: ${({ isDiffCompleted, theme }) =>
+      isDiffCompleted ? '#52c41a' : theme.text};
   }
 `
 
diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useDeferredValue } from 'react'
 import styled from '@emotion/styled'
-import { ThemeProvider, Global, css } from '@emotion/react'
+import { ThemeProvider } from '@emotion/react'
 import { Card, Input, Typography, ConfigProvider, theme } from 'antd'
 import GitHubButton from 'react-github-btn'
 import ReactGA from 'react-ga'
@@ -194,16 +194,6 @@ const Home = () => {
     <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}>
diff --git a/src/theme/index.js b/src/theme/index.js
@@ -3,29 +3,67 @@ export const lightTheme = {
   background: '#ffffff',
 
   text: '#363537',
-  //   toggleBorder: '#FFF',
-  //   background: '#363537',
+  textHover: 'rgba(27, 31, 35, 0.6)',
   border: '#e8e8e8',
   greenBorder: '#bef5cb',
   yellowBorder: '#ffe58f',
-  lightGreenBackground: '#cdffd8',
-  darkGreenBackground: '#acf2bd',
-  // Alternating Rows
+
+  diff: {
+    decoration: '#dbedff',
+
+    // Color object from https://github.com/otakustay/react-diff-view/blob/master/site/components/DiffView/diff.global.less
+    textColor: '#000',
+    selectionBackground: '#b3d7ff',
+    gutterInsertBackground: '#cdffd8',
+    gutterDeleteBackground: '#fadde0',
+    gutterSelectedBackground: '#fffce0',
+    codeInsertBackground: '#eaffee',
+    codeDeleteBackground: '#fdeff0',
+    codeInsertEditBackground: '#acf2bd',
+    codeDeleteEditBackground: '#f39ea2',
+    codeSelectedBackground: '#fffce0',
+    omitBackground: '#fafbfc',
+    decorationGutterBackground: '#dbedff',
+    decorationGutter: '#999',
+    decorationContentBackground: '#dbedff',
+    decorationContent: '#999',
+  },
+
+  // Alternating Row Colors for Binary Download component
   rowEven: '#fafbfc',
   rowOdd: '#ffffff',
 }
 export const darkTheme = {
   body: '#363537',
   background: '#363537',
   text: '#FAFAFA',
-  //   toggleBorder: '#6B8096',
-  //   background: '#999',
+  textHover: '#999',
   border: '#888',
   greenBorder: '#bef5cb',
   yellowBorder: '#ffe58f',
-  lightGreenBackground: '#cdffd8',
-  darkGreenBackground: '#acf2bd',
-  // Alternating Rows
+
+  diff: {
+    decoration: '#dbedff',
+
+    // Color object from https://github.com/otakustay/react-diff-view/blob/master/site/components/DiffView/diff.global.less
+    textColor: '#fafafa',
+    selectionBackground: '#5a5f80',
+    gutterInsertBackground: '#082525',
+    gutterDeleteBackground: '#2b1523',
+    gutterSelectedBackground: '#5a5f80',
+    codeInsertBackground: '#082525',
+    codeDeleteBackground: '#2b1523',
+    codeInsertEditBackground: '#00462f',
+    codeDeleteEditBackground: '#4e2436',
+    codeSelectedBackground: '#5a5f80',
+    omitBackground: '#101120',
+    decorationGutterBackground: '#222',
+    decorationGutter: '#ababab',
+    decorationContentBackground: '#222',
+    decorationContent: '#ababab',
+  },
+
+  // Alternating Row Colors for Binary Download component
   rowEven: '#363537',
-  rowOdd: '#363537',
+  rowOdd: '#222223',
 }

Original file line number	Diff line number	Diff line change
`@@ -122,8 +122,8 @@ const CompleteDiffButton = styled(({ open, onClick, ...props }) =>`
`122`	`122`	`&,`
`123`	`123`	`&:hover,`
`124`	`124`	`&:focus {`
`125`		`- color: ${({ isDiffCompleted }) =>`
`126`		`- isDiffCompleted ? '#52c41a' : '#24292e'};`
	`125`	`+ color: ${({ isDiffCompleted, theme }) =>`
	`126`	`+ isDiffCompleted ? '#52c41a' : theme.text};`
`127`	`127`	`}`
`128`	`128`	`
`129`	`129`