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

fix: avoid fouc for dark theme

Browse source
This commit is contained in:
alina 🌸 2025-01-20 15:30:15 +03:00
parent 93a7611554
commit 5b941bb5a9
Signed by: teidesu
SSH key fingerprint: SHA256:uNeCpw6aTSU4aIObXLvHfLkDa82HWH9EiOj9AXOIRpI
2 changed files with 15 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/repl/index.html
View file

@ -8,6 +8,12 @@
<script defer src="https://zond.tei.su/script.js" data-website-id="e1726072-b61b-49ab-a4ee-decb8e6740be"></script> <script defer src="https://zond.tei.su/script.js" data-website-id="e1726072-b61b-49ab-a4ee-decb8e6740be"></script>
</head> </head>
<body> <body>
<script>
const theme = localStorage.getItem('kb-color-mode')
if (theme === 'dark' || ((!theme || theme === 'system') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.style.colorScheme = 'dark'
}
</script>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/index.tsx"></script> <script type="module" src="/src/index.tsx"></script>
</body> </body>

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

@ -1,3 +1,4 @@
import { useColorMode } from '@kobalte/core'
import { createEffect, createSignal, onCleanup } from 'solid-js' import { createEffect, createSignal, onCleanup } from 'solid-js'
import { cn } from '../../lib/utils.ts' import { cn } from '../../lib/utils.ts'
@ -10,6 +11,11 @@ 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">
<script>
if (window.location.hash.includes('dark=true')) {
document.documentElement.style.colorScheme = 'dark'
}
</script>
<style id="inject-css"> <style id="inject-css">
:root { :root {
--sys-color-base-container: hsl(0 0% 100%); --sys-color-base-container: hsl(0 0% 100%);
@ -88,6 +94,8 @@ export function Devtools(props: {
}) { }) {
const [innerRef, setInnerRef] = createSignal<HTMLIFrameElement | undefined>() const [innerRef, setInnerRef] = createSignal<HTMLIFrameElement | undefined>()
const { colorMode } = useColorMode()
const url = URL.createObjectURL(new Blob([HTML], { type: 'text/html' })) const url = URL.createObjectURL(new Blob([HTML], { type: 'text/html' }))
onCleanup(() => URL.revokeObjectURL(url)) onCleanup(() => URL.revokeObjectURL(url))
@ -110,7 +118,7 @@ export function Devtools(props: {
<div class={cn('relative', props.class)}> <div class={cn('relative', props.class)}>
<iframe <iframe
ref={setInnerRef} ref={setInnerRef}
src={`${url}#?embedded=${encodeURIComponent(location.origin)}`} src={`${url}#?embedded=${encodeURIComponent(location.origin)}&dark=${colorMode() === 'dark'}`}
title="Devtools" title="Devtools"
class="absolute inset-0 block size-full" class="absolute inset-0 block size-full"
onLoad={handleLoad} onLoad={handleLoad}