From f74049a49047ac2df13682bf20a12a66a00fe04a Mon Sep 17 00:00:00 2001
From: alina sireneva <alina@tei.su>
Date: Wed, 15 Jan 2025 07:57:45 +0300
Subject: [PATCH] dark theme

---
 packages/repl/src/App.tsx                     | 104 +++++++++---------
 .../repl/src/components/editor/Editor.tsx     |  17 ++-
 .../repl/src/components/runner/Devtools.tsx   |  21 +++-
 .../repl/src/lib/components/ui/button.tsx     |   2 +-
 packages/repl/src/lib/use-color-scheme.ts     |  17 ---
 5 files changed, 83 insertions(+), 78 deletions(-)
 delete mode 100644 packages/repl/src/lib/use-color-scheme.ts

diff --git a/packages/repl/src/App.tsx b/packages/repl/src/App.tsx
index 45069b8..63e92cf 100644
--- a/packages/repl/src/App.tsx
+++ b/packages/repl/src/App.tsx
@@ -1,5 +1,6 @@
-import { workerInit } from 'mtcute-repl-worker/client'
+import { ColorModeProvider, ColorModeScript } from '@kobalte/core'
 
+import { workerInit } from 'mtcute-repl-worker/client'
 import { createSignal, lazy, onMount, Show } from 'solid-js'
 import { EditorTabs } from './components/editor/EditorTabs.tsx'
 import { NavbarMenu } from './components/nav/NavbarMenu.tsx'
@@ -25,57 +26,60 @@ export function App() {
   return (
     <div class="flex h-screen w-screen flex-col overflow-hidden">
       <Toaster />
-      <iframe
-        ref={workerIframe}
-        class="invisible size-0"
-        src={import.meta.env.VITE_IFRAME_URL}
-      />
-      <nav class="relative flex h-auto w-full shrink-0 flex-row items-center overflow-hidden px-4 py-2">
-        <h1 class="font-mono text-base">
-          @mtcute/
-          <b>playground</b>
-        </h1>
-
-        <NavbarMenu
-          onShowAccounts={() => {
-            setShowSettings(true)
-            setSettingsTab('accounts')
-          }}
-          onShowSettings={() => {
-            setShowSettings(true)
-          }}
+      <ColorModeScript />
+      <ColorModeProvider>
+        <iframe
+          ref={workerIframe}
+          class="invisible size-0"
+          src={import.meta.env.VITE_IFRAME_URL}
         />
-      </nav>
-      <div class="h-px shrink-0 bg-border" />
-      <Show
-        when={!updating()}
-        fallback={(
-          <Updater
-            onComplete={() => setUpdating(false)}
-          />
-        )}
-      >
-        <Resizable orientation="horizontal" class="size-full max-h-[calc(100vh-57px)]">
-          <ResizablePanel class="h-full overflow-x-auto overflow-y-hidden" minSize={0.2}>
-            <EditorTabs />
-            <Editor class="size-full" />
-          </ResizablePanel>
-          <ResizableHandle withHandle />
-          <ResizablePanel
-            class="flex max-h-full flex-col overflow-hidden"
-            minSize={0.2}
-          >
-            <Runner />
-          </ResizablePanel>
-        </Resizable>
-      </Show>
+        <nav class="relative flex h-auto w-full shrink-0 flex-row items-center overflow-hidden px-4 py-2">
+          <h1 class="font-mono text-base">
+            @mtcute/
+            <b>playground</b>
+          </h1>
 
-      <SettingsDialog
-        show={showSettings()}
-        onClose={() => setShowSettings(false)}
-        tab={settingsTab()}
-        onTabChange={setSettingsTab}
-      />
+          <NavbarMenu
+            onShowAccounts={() => {
+              setShowSettings(true)
+              setSettingsTab('accounts')
+            }}
+            onShowSettings={() => {
+              setShowSettings(true)
+            }}
+          />
+        </nav>
+        <div class="h-px shrink-0 bg-border" />
+        <Show
+          when={!updating()}
+          fallback={(
+            <Updater
+              onComplete={() => setUpdating(false)}
+            />
+          )}
+        >
+          <Resizable orientation="horizontal" class="size-full max-h-[calc(100vh-57px)]">
+            <ResizablePanel class="h-full overflow-x-auto overflow-y-hidden" minSize={0.2}>
+              <EditorTabs />
+              <Editor class="size-full" />
+            </ResizablePanel>
+            <ResizableHandle withHandle />
+            <ResizablePanel
+              class="flex max-h-full flex-col overflow-hidden"
+              minSize={0.2}
+            >
+              <Runner />
+            </ResizablePanel>
+          </Resizable>
+        </Show>
+
+        <SettingsDialog
+          show={showSettings()}
+          onClose={() => setShowSettings(false)}
+          tab={settingsTab()}
+          onTabChange={setSettingsTab}
+        />
+      </ColorModeProvider>
     </div>
   )
 }
diff --git a/packages/repl/src/components/editor/Editor.tsx b/packages/repl/src/components/editor/Editor.tsx
index eef96b6..51c79f1 100644
--- a/packages/repl/src/components/editor/Editor.tsx
+++ b/packages/repl/src/components/editor/Editor.tsx
@@ -1,7 +1,7 @@
+import { useColorModeValue } from '@kobalte/core'
 import { editor as mEditor, Uri } from 'monaco-editor'
-import { createEffect, on, onMount } from 'solid-js'
-import { useColorScheme } from '../../lib/use-color-scheme'
 
+import { createEffect, on, onMount } from 'solid-js'
 import { $activeTab, $tabs, type EditorTab } from '../../store/tabs.ts'
 import { useStore } from '../../store/use-store.ts'
 import { setupMonaco } from './utils/setup.ts'
@@ -38,7 +38,7 @@ export default function Editor(props: EditorProps) {
   let ref!: HTMLDivElement
   let editor: mEditor.IStandaloneCodeEditor | undefined
 
-  const scheme = useColorScheme()
+  const monacoTheme = useColorModeValue('latte', 'mocha')
   // const monacoTheme = () => scheme() === 'dark' ? 'ayu-dark' : 'ayu-light'
   const modelsByTab = new Map<string, mEditor.ITextModel>()
 
@@ -68,8 +68,7 @@ export default function Editor(props: EditorProps) {
         enabled: 'on',
       },
       lineNumbersMinChars: 3,
-      // theme: monacoTheme(),
-      theme: 'latte', // todo
+      theme: monacoTheme(),
       scrollBeyondLastLine: false,
     })
 
@@ -89,10 +88,10 @@ export default function Editor(props: EditorProps) {
     return () => editor?.dispose()
   })
 
-  // createEffect(on(() => monacoTheme(), (theme) => {
-  //     if (!editor) return
-  //     editor.updateOptions({ theme })
-  // }))
+  createEffect(on(() => monacoTheme(), (theme) => {
+    if (!editor) return
+    editor.updateOptions({ theme })
+  }))
 
   createEffect(on(activeTab, (tabId) => {
     if (!editor) return
diff --git a/packages/repl/src/components/runner/Devtools.tsx b/packages/repl/src/components/runner/Devtools.tsx
index c1a966d..85cf39e 100644
--- a/packages/repl/src/components/runner/Devtools.tsx
+++ b/packages/repl/src/components/runner/Devtools.tsx
@@ -10,6 +10,21 @@ const HTML = `
   <script src="https://unpkg.com/@ungap/custom-elements/es.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/chii@1.12.3/public/front_end/entrypoints/chii_app/chii_app.js"></script>
   <body class="undocked" id="-blink-dev-tools">
+  <style id="inject-css">
+    :root {
+      --sys-color-base-container: hsl(0 0% 100%);
+      --sys-color-on-base-divider: hsl(240 5.9% 90%);
+      --sys-color-divider: hsl(240 5.9% 90%);
+      --sys-color-neutral-outline: hsl(240 5.9% 90%);
+    }
+    .-theme-with-dark-background {
+      --sys-color-base-container: hsl(240 10% 3.9%);
+      --sys-color-on-base-divider: hsl(240 3.7% 15.9%);
+      --sys-color-divider: hsl(240 3.7% 15.9%);
+      --sys-color-neutral-outline: hsl(240 3.7% 15.9%);
+      --sys-color-state-hover-on-subtle: hsl(0 0% 98% / 0.08);
+    }
+  </style>
 `
 
 const INJECTED_SCRIPT = `
@@ -38,13 +53,17 @@ async function focusConsole(tabbedPane) {
   consoleTab.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
 }
 
-(async ()=> {
+(async () => {
   const tabbedPane = await waitForElement('.tabbed-pane', document.body);
   await focusConsole(tabbedPane);
   hideBySelector(tabbedPane, '.tabbed-pane-header');
 
   const consoleToolbar = await waitForElement('.console-main-toolbar', document.body);
   hideBySelector(consoleToolbar, 'devtools-issue-counter');
+
+  const injectCss = await waitForElement('#inject-css', document.body);
+  const rootView = await waitForElement('.root-view', document.body);
+  rootView.appendChild(injectCss);
 })();
 `
 
diff --git a/packages/repl/src/lib/components/ui/button.tsx b/packages/repl/src/lib/components/ui/button.tsx
index 1fa3293..633e1d1 100644
--- a/packages/repl/src/lib/components/ui/button.tsx
+++ b/packages/repl/src/lib/components/ui/button.tsx
@@ -17,7 +17,7 @@ const buttonVariants = cva(
         outline: 'border border-input text-muted-foreground hover:bg-accent hover:text-accent-foreground',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
-        ghostDestructive: 'text-error-foreground hover:bg-error',
+        ghostDestructive: 'text-error-foreground hover:bg-error dark:hover:bg-error-foreground/20',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
diff --git a/packages/repl/src/lib/use-color-scheme.ts b/packages/repl/src/lib/use-color-scheme.ts
deleted file mode 100644
index e3dbb38..0000000
--- a/packages/repl/src/lib/use-color-scheme.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { createSignal, onMount } from 'solid-js'
-
-export type ColorScheme = 'light' | 'dark'
-
-export function useColorScheme() {
-  const [scheme, setScheme] = createSignal<ColorScheme>(matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
-
-  onMount(() => {
-    const listener = (e: MediaQueryListEvent) => setScheme(e.matches ? 'dark' : 'light')
-    const media = matchMedia('(prefers-color-scheme: dark)')
-    media.addEventListener('change', listener)
-
-    return () => media.removeEventListener('change', listener)
-  })
-
-  return scheme
-}