fix: code blocks color styles on dark mode (#406)

sigle · Mar 24, 2022 · 0322c20 · 0322c20
1 parent 90aa0ed
commit 0322c20
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 6 deletions.
diff --git a/.changeset/brave-snakes-hug.md b/.changeset/brave-snakes-hug.md
@@ -0,0 +1,5 @@
+---
+'@sigle/app': patch
+---
+
+Fix code blocks not displaying with the correct styling on dark mode.
diff --git a/.changeset/large-foxes-travel.md b/.changeset/large-foxes-travel.md
@@ -0,0 +1,5 @@
+---
+'@sigle/tailwind-style': patch
+---
+
+Fix code block color styles on dark mode.
diff --git a/packages/tailwind-style/dist/tailwind.css b/packages/tailwind-style/dist/tailwind.css
@@ -609,7 +609,7 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: var(--tw-prose-code);
   font-weight: 400;
   font-size: 14px;
-  background-color: #ededed;
+  background-color: var(--tw-prose-code-bg);
   padding: 1px 4px;
   border-radius: 4px;
 }
@@ -724,10 +724,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-prose-invert-quote-borders: #343434;
   --tw-prose-invert-captions: #a1a1a1;
   --tw-prose-invert-code: #f2f2f2;
-  --tw-prose-invert-pre-code: #2e2e2e;
-  --tw-prose-invert-pre-bg: #f2f2f2;
+  --tw-prose-invert-pre-code: #f2f2f2;
+  --tw-prose-invert-pre-bg: #202020;
   --tw-prose-invert-th-borders: #4b5563;
   --tw-prose-invert-td-borders: #374151;
+  --tw-prose-code-bg: #f6f6f6;
+  --tw-prose-invert-code-bg: #202020;
   font-size: 16px;
   line-height: 1.75;
 }
@@ -861,6 +863,7 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
   --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
   --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
+  --tw-prose-code-bg: var(--tw-prose-invert-code-bg);
 }
 
 @media (min-width: 1024px) {

diff --git a/packages/tailwind-style/tailwind.config.js b/packages/tailwind-style/tailwind.config.js
@@ -62,6 +62,7 @@ module.exports = {
             '--tw-prose-quote-borders': gray.gray6,
             '--tw-prose-captions': gray.gray9,
             '--tw-prose-code': gray.gray11,
+            '--tw-prose-code-bg': gray.gray2,
             '--tw-prose-pre-code': gray.gray5,
             '--tw-prose-pre-bg': gray.gray11,
             '--tw-prose-hr': gray.gray6,
@@ -76,11 +77,17 @@ module.exports = {
             '--tw-prose-invert-quote-borders': grayDark.gray6,
             '--tw-prose-invert-captions': grayDark.gray9,
             '--tw-prose-invert-code': grayDark.gray11,
-            '--tw-prose-invert-pre-code': grayDark.gray5,
-            '--tw-prose-invert-pre-bg': grayDark.gray11,
+            '--tw-prose-invert-code-bg': grayDark.gray2,
+            '--tw-prose-invert-pre-code': grayDark.gray11,
+            '--tw-prose-invert-pre-bg': grayDark.gray2,
             '--tw-prose-invert-hr': grayDark.gray6,
           },
         },
+        invert: {
+          css: {
+            '--tw-prose-code-bg': 'var(--tw-prose-invert-code-bg)',
+          },
+        },
         DEFAULT: {
           css: {
             maxWidth: '760px',
@@ -96,7 +103,7 @@ module.exports = {
             code: {
               fontWeight: '400',
               fontSize: '14px',
-              backgroundColor: gray.gray4,
+              backgroundColor: 'var(--tw-prose-code-bg)',
               padding: '1px 4px',
               borderRadius: '4px',
             },

diff --git a/sigle/src/modules/editor/TipTapEditor.tsx b/sigle/src/modules/editor/TipTapEditor.tsx
@@ -60,6 +60,7 @@ const StyledEditorContent = styled(EditorContent, {
     height: 0,
     animation: `${fadeInAnimation} 75ms cubic-bezier(0, 0, 0.2, 1)`,
   },
+
   // Image selected style
   '& img.ProseMirror-selectednode': {
     outline: '1px solid $orange11',

diff --git a/sigle/src/modules/editor/extensions/CodeBlock.tsx b/sigle/src/modules/editor/extensions/CodeBlock.tsx
@@ -1,4 +1,5 @@
 import { NodeViewWrapper, NodeViewProps, NodeViewContent } from '@tiptap/react';
+import { darkTheme } from '../../../stitches.config';
 import { Box, Button } from '../../../ui';
 
 /**
@@ -31,6 +32,11 @@ export const CodeBlockComponent = (props: NodeViewProps) => {
                   color: '$gray1',
                   backgroundColor: '$gray10',
                 },
+
+                [`.${darkTheme} &`]: {
+                  color: '$gray10',
+                  backgroundColor: '$gray5',
+                },
               }}
               contentEditable={false}
               onChange={handleCHangeLanguage}