Merge pull request #446 from processing/fix/dark-mode-code-editor

Fix color of dark mode code editor
processing · Jul 7, 2024 · 6d126dc · 6d126dc
2 parents d03abe0 + 48b7cb7
commit 6d126dc
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 3 deletions.
diff --git a/src/components/CircleButton/index.tsx b/src/components/CircleButton/index.tsx
@@ -15,7 +15,7 @@ export const CircleButton = ({
   href,
   className = "",
 }: CircleButtonProps) => {
-  const sharedClassName = `grid place-items-center w-[40px] h-[40px] rounded-full p-xs hover:border-type-white hover:!bg-bg-black hover:text-type-white ${className}`;
+  const sharedClassName = `circle-button grid place-items-center w-[40px] h-[40px] rounded-full p-xs hover:border-type-white text-black hover:!bg-bg-black hover:text-type-white ${className}`;
   if (href) {
     return (
       <a

diff --git a/src/components/CodeEmbed/index.jsx b/src/components/CodeEmbed/index.jsx
@@ -130,7 +130,7 @@ export const CodeEmbed = (props) => {
               setPreviewCodeString(initialCode);
             }}
             ariaLabel="Reset code to initial value"
-            className="bg-sidebar-bg-color"
+            className="bg-white text-black"
           >
             <Icon kind="refresh" />
           </CircleButton>

diff --git a/src/components/CopyCodeButton/index.tsx b/src/components/CopyCodeButton/index.tsx
@@ -15,7 +15,7 @@ export const CopyCodeButton = ({ textToCopy }: CopyCodeButtonProps) => {
     <CircleButton
       onClick={copyTextToClipboard}
       ariaLabel="Copy code to clipboard"
-      className="bg-sidebar-bg-color"
+      className="bg-white text-black"
     >
       <svg
         width="18"

diff --git a/styles/code-editor.scss b/styles/code-editor.scss
@@ -3,11 +3,15 @@
   padding: var(--spacing-sm);
   .dark-theme & {
     background-color: #DDD;
+    color: black;
   }
 }
 
 .dark-theme .code-editor-container {
   filter: invert(100%);
+  & .circle-button {
+    filter: invert(100%);
+  }
 }
 
 .cm-editor * {