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