teidesu/mtcute-repl
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dark theme

Browse source
This commit is contained in:
alina 🌸 2025-01-15 07:57:45 +03:00
parent be415be9d6
commit f74049a490
Signed by: teidesu
SSH key fingerprint: SHA256:uNeCpw6aTSU4aIObXLvHfLkDa82HWH9EiOj9AXOIRpI
5 changed files with 83 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/repl/src/App.tsx
View file

@ -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 { createSignal, lazy, onMount, Show } from 'solid-js'
import { EditorTabs } from './components/editor/EditorTabs.tsx' import { EditorTabs } from './components/editor/EditorTabs.tsx'
import { NavbarMenu } from './components/nav/NavbarMenu.tsx' import { NavbarMenu } from './components/nav/NavbarMenu.tsx'
@ -25,6 +26,8 @@ export function App() {
return ( return (
<div class="flex h-screen w-screen flex-col overflow-hidden"> <div class="flex h-screen w-screen flex-col overflow-hidden">
<Toaster /> <Toaster />
<ColorModeScript />
<ColorModeProvider>
<iframe <iframe
ref={workerIframe} ref={workerIframe}
class="invisible size-0" class="invisible size-0"
@ -76,6 +79,7 @@ export function App() {
tab={settingsTab()} tab={settingsTab()}
onTabChange={setSettingsTab} onTabChange={setSettingsTab}
/> />
</ColorModeProvider>
</div> </div>
) )
} }

17
packages/repl/src/components/editor/Editor.tsx
View file

@ -1,7 +1,7 @@
import { useColorModeValue } from '@kobalte/core'
import { editor as mEditor, Uri } from 'monaco-editor' 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 { $activeTab, $tabs, type EditorTab } from '../../store/tabs.ts'
import { useStore } from '../../store/use-store.ts' import { useStore } from '../../store/use-store.ts'
import { setupMonaco } from './utils/setup.ts' import { setupMonaco } from './utils/setup.ts'
@ -38,7 +38,7 @@ export default function Editor(props: EditorProps) {
let ref!: HTMLDivElement let ref!: HTMLDivElement
let editor: mEditor.IStandaloneCodeEditor | undefined let editor: mEditor.IStandaloneCodeEditor | undefined
const scheme = useColorScheme() const monacoTheme = useColorModeValue('latte', 'mocha')
// const monacoTheme = () => scheme() === 'dark' ? 'ayu-dark' : 'ayu-light' // const monacoTheme = () => scheme() === 'dark' ? 'ayu-dark' : 'ayu-light'
const modelsByTab = new Map<string, mEditor.ITextModel>() const modelsByTab = new Map<string, mEditor.ITextModel>()
@ -68,8 +68,7 @@ export default function Editor(props: EditorProps) {
enabled: 'on', enabled: 'on',
}, },
lineNumbersMinChars: 3, lineNumbersMinChars: 3,
// theme: monacoTheme(), theme: monacoTheme(),
theme: 'latte', // todo
scrollBeyondLastLine: false, scrollBeyondLastLine: false,
}) })
@ -89,10 +88,10 @@ export default function Editor(props: EditorProps) {
return () => editor?.dispose() return () => editor?.dispose()
}) })
// createEffect(on(() => monacoTheme(), (theme) => { createEffect(on(() => monacoTheme(), (theme) => {
// if (!editor) return if (!editor) return
// editor.updateOptions({ theme }) editor.updateOptions({ theme })
// })) }))
createEffect(on(activeTab, (tabId) => { createEffect(on(activeTab, (tabId) => {
if (!editor) return if (!editor) return

19
packages/repl/src/components/runner/Devtools.tsx
View file

@ -10,6 +10,21 @@ const HTML = `
<script src="https://unpkg.com/@ungap/custom-elements/es.js"></script> <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> <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"> <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 = ` const INJECTED_SCRIPT = `
@ -45,6 +60,10 @@ async function focusConsole(tabbedPane) {
const consoleToolbar = await waitForElement('.console-main-toolbar', document.body); const consoleToolbar = await waitForElement('.console-main-toolbar', document.body);
hideBySelector(consoleToolbar, 'devtools-issue-counter'); hideBySelector(consoleToolbar, 'devtools-issue-counter');
const injectCss = await waitForElement('#inject-css', document.body);
const rootView = await waitForElement('.root-view', document.body);
rootView.appendChild(injectCss);
})(); })();
` `

2
packages/repl/src/lib/components/ui/button.tsx
View file

@ -17,7 +17,7 @@ const buttonVariants = cva(
outline: 'border border-input text-muted-foreground hover:bg-accent hover:text-accent-foreground', outline: 'border border-input text-muted-foreground hover:bg-accent hover:text-accent-foreground',
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground', 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', link: 'text-primary underline-offset-4 hover:underline',
}, },
size: { size: {

17
packages/repl/src/lib/use-color-scheme.ts
View file

@ -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
}