more dark mode

src/components/big-interactive-pages/editor.tsx

@@ -224,7 +224,7 @@ export default function Editor({ persistenceState, cookies }: EditorProps) {
  <div class={styles.page}>
  <Navbar persistenceState={persistenceState} />
 
- <div class={styles.pageMain} style={{ backgroundColor: isDark.value ? "#2f2f2f" : "#fafed7" }}>
+ <div class={styles.pageMain}>
  <div className={styles.codeContainer}>
  <CodeMirror
  class={styles.code}

src/components/codemirror.tsx

@@ -18,6 +18,9 @@ export default function CodeMirror(props: CodeMirrorProps) {
  const parent = useRef<HTMLDivElement>(null)
  const [editorRef, setEditorRef] = useState<EditorView>();
 
+ // set dark mode on render
+ useEffect(() => { if (window.matchMedia("(prefers-color-scheme: dark)").matches) isDark.value = true }, []);
+
  // Alert the parent to code changes (not reactive)
  const onCodeChangeRef = useRef(props.onCodeChange)
  useEffect(() => { onCodeChangeRef.current = props.onCodeChange }, [props.onCodeChange])
@@ -35,6 +38,8 @@ export default function CodeMirror(props: CodeMirrorProps) {
  }, () => onRunShortcutRef.current?.());
 
  const setEditorTheme = () => {
+ const shouldBeDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+ console.log("shouldBeDarkMode = ", shouldBeDarkMode);
  if (isDark.value) {
  editorRef?.dispatch({
  effects: StateEffect.appendConfig.of(oneDark)

src/components/navbar-main.tsx

@@ -2,6 +2,7 @@ import { IoAdd, IoLogoGithub, IoOpenOutline } from 'react-icons/io5'
 import Button from './design-system/button'
 import styles from './navbar.module.css'
 import { SessionInfo } from '../lib/game-saving/account'
+import { isDark } from '../lib/state'
 
 interface MainNavbarProps {
  session: SessionInfo | null

src/global.css

@@ -36,6 +36,12 @@ body {
  position: relative;
 }
 
+@media (prefers-color-scheme: dark) {
+ body {
+ background: #2f2f2f; 
+ }
+}
+
 a {
  color: var(--accent);
  text-decoration: none;

src/pages/gallery/index.astro

@@ -33,6 +33,11 @@ games
  body {
  overflow-y: scroll;
  }
+ @media (prefers-color-scheme: dark) {
+ body {
+ color: white;
+ }
+ }
 
  .copy-container > h1 {
  margin-bottom: 12px;

src/pages/index.astro

@@ -223,7 +223,7 @@ if (session && session.session.full) {
  </div>
  </section>
 
- <section class='credits wrapper'>
+ <section style="color: black;" class='credits wrapper'>
  <div class='container limit-text'>
  <p>
  Sprig was developed by a team at Hack Club with assistance from Brian Silverman (who helped develop Scratch and

src/pages/~/index.astro

@@ -36,6 +36,11 @@ if (games.length === 0 && unnamedGames.length > 0) {
  flex-direction: column;
  overflow: hidden;
  }
+ @media (prefers-color-scheme: dark) {
+ body {
+ color: white;
+ }
+ }
 
  .columns {
  flex: 1;