dark theme
This commit is contained in:
parent
be415be9d6
commit
f74049a490
SSH key fingerprint:
SHA256:uNeCpw6aTSU4aIObXLvHfLkDa82HWH9EiOj9AXOIRpI
5 changed files with 83 additions and 78 deletions
|
|
@ -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,6 +26,8 @@ export function App() {
|
|||
return (
|
||||
<div class="flex h-screen w-screen flex-col overflow-hidden">
|
||||
<Toaster />
|
||||
<ColorModeScript />
|
||||
<ColorModeProvider>
|
||||
<iframe
|
||||
ref={workerIframe}
|
||||
class="invisible size-0"
|
||||
|
|
@ -76,6 +79,7 @@ export function App() {
|
|||
tab={settingsTab()}
|
||||
onTabChange={setSettingsTab}
|
||||
/>
|
||||
</ColorModeProvider>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 = `
|
||||
|
|
@ -45,6 +60,10 @@ async function focusConsole(tabbedPane) {
|
|||
|
||||
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);
|
||||
})();
|
||||
`
|
||||
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
Loading…
Reference in a new issue