feat: theme

Author: zhangmo8

src/components/Editor/CodeMirror/styles.css

@@ -35,11 +35,11 @@
   --cm-ttc-c-track: white;
 }
 
-html[data-kb-theme="dark"] {
+html[class="dark"] {
   --cm-scheme: dark;
   --cm-foreground: #d4cfbf80;
-  --cm-background: #121212;
   --cm-tooltip-background: #121212;
+  --cm-background: #121212;
   --cm-comment: #758575;
   --cm-string: #d48372;
   --cm-keyword: #4d9375;
@@ -54,6 +54,9 @@ html[data-kb-theme="dark"] {
   --cm-line-highlight-background: #4d4d4d29;
   --cm-line-highlight-border: #3a3a3a80;
   --cm-selection-background: #242424;
+  /* scrollbars colors */
+  --cm-ttc-c-thumb: #3d3d3d;
+  --cm-ttc-c-track: #000;
 }
 
 .highlighted,

src/components/Output/Preview/index.tsx

@@ -5,6 +5,8 @@ import { useImportMap } from "@/hooks/impormap"
 import logger from "@/utils/logger"
 import basicTemplate from "./basic.html?raw"
 
+import "./styles.css"
+
 interface Props {
   className?: string
   code: string
@@ -72,7 +74,6 @@ const Preview: React.FC<Props> = ({ code, className }) => {
       <iframe
         ref={iframeRef}
         title="preview"
-        style={{ width: "100%", height: "100%", border: "none" }}
         sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation"
       />
     </div>

src/components/Output/Preview/styles.css

@@ -0,0 +1,6 @@
+.react-repl-iframe-container > iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: #fff;
+}

src/components/Output/styles.css

@@ -24,17 +24,18 @@
   color: var(--repl-text-secondary);
   font-weight: bold;
   border-radius: 3px;
+  border: 1px solid transparent;
 }
 
 .repl-tab-button:hover,
 .repl-tab-button.active {
-  background-color: var(--repl-primary-hover);
-  color: var(--repl-bg-primary);
+  background-color: var(--repl-hover);
 }
 
 .repl-tab-button.active {
-  color: var(--repl-bg-primary);
-  background-color: var(--repl-primary-color);
+  color: var(--repl-text-primary);
+  background-color: var(--repl-hover);
+  border-color: var(--repl-border-color);
 }
 
 .repl-output-content {

src/components/SplitPanel/styles.css

@@ -30,9 +30,11 @@
   flex-shrink: 0;
   position: relative;
   z-index: 10;
+
+  transition: transform 0.2s ease-in-out;
 }
 
 .repl-split-panel-divider:hover,
 .repl-split-panel-divider:active {
-  background-color: var(--repl-primary-color);
+  transform: scale(2);
 }

src/repl.css

@@ -1,32 +1,40 @@
-.react-repl {
-  height: 100%;
-  width: 100%;
-  margin: 0px;
-}
-
-#gtx-trans,
-grammarly-extension,
-deepl-inline-translate,
-grammarly-popups,
-deepl-inline-popup,
-grammarly-desktop-integration {
-  display: none !important;
-}
-
 :root {
   /* Base Colors */
-  --repl-primary-color: #1e9dbc;
-  --repl-primary-hover: #58c4dc;
+  --repl-primary-color: #ffffff;
 
   /* UI Colors */
   --repl-divider-color: #e0e0e0;
+  --repl-border-color: #e4e4e7;
+  --repl-hover: #f4f4f5;
 
   /* Text Colors */
-  --repl-text-primary: #393a34;
+  --repl-text-primary: #000;
   --repl-text-secondary: #858585;
 
   /* Background Colors */
   --repl-bg-primary: #fdfdfd;
-  --repl-bg-secondary: #f5f5f5;
-  --repl-bg-hover: rgba(0, 0, 0, 0.04);
+}
+
+.dark {
+  /* Base Colors */
+  --repl-primary-color: #09090b;
+
+  /* UI Colors */
+  --repl-divider-color: #27272a;
+  --repl-border-color: #27272a;
+  --repl-hover: #09090b;
+
+  /* Text Colors */
+  --repl-text-primary: #fff;
+  --repl-text-secondary: #858585;
+
+  /* Background Colors */
+  --repl-bg-primary: #09090b;
+}
+
+.react-repl {
+  height: 100%;
+  width: 100%;
+  margin: 0px;
+  background-color: var(--repl-bg-primary);
 }