From b7e4c13da44364df659cc35530c15ea0e665f772 Mon Sep 17 00:00:00 2001 From: nobleknightt <60701544+nobleknightt@users.noreply.github.com> Date: Wed, 11 Sep 2024 14:37:58 +0530 Subject: [PATCH] feat: adapt color theme to browser's theme --- public/favicon.ico | Bin 15406 -> 15406 bytes src/App.jsx | 84 +++++++++++++++++++++++++++------------------ 2 files changed, 51 insertions(+), 33 deletions(-) diff --git a/public/favicon.ico b/public/favicon.ico index 701556e4432b8124b17f940b34f819b1f141528c..8029b16ec2ad5bc419433c6097ef6aee1779dcf7 100644 GIT binary patch literal 15406 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 n`{NQ`1o+TDF`mlCr; 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 diff --git a/src/App.jsx b/src/App.jsx index 9ff6dd7..928eed1 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,10 @@ -import { useEffect, useRef, useState } from 'react'; -import Editor, { loader } from '@monaco-editor/react'; -import clearIcon from "./assets/images/clear.png"; -import outputIcon from "./assets/images/output.png"; -import pythonIcon from "./assets/images/python.png"; -import runIcon from "./assets/images/run.png"; -// import oneDarkProTheme from './assets/themes/OneDark-Pro.json'; +import { useEffect, useRef, useState } from "react"; +import Editor, { loader } from "@monaco-editor/react"; +// import clearIcon from "./assets/images/clear.png"; +// import outputIcon from "./assets/images/output.png"; +// import pythonIcon from "./assets/images/python.png"; +// import runIcon from "./assets/images/run.png"; +// import oneDarkProTheme from "./assets/themes/OneDark-Pro.json"; export default function App() { const editorRef = useRef(null); @@ -14,7 +14,7 @@ export default function App() { async function ping() { setReady(false); try { - await fetch(`${import.meta.env.VITE_API_URL}/ping`, {method: "GET"}); + await fetch(`${import.meta.env.VITE_API_URL}/ping`, { method: "GET" }); setReady(true); } catch (error) { console.error(error) @@ -29,8 +29,8 @@ export default function App() { // useEffect(() => { // loader.init().then((monaco) => { - // monaco.editor.defineTheme('one-dark-pro', { - // base: 'vs-dark', + // monaco.editor.defineTheme("one-dark-pro", { + // base: "vs-dark", // inherit: true, // rules: oneDarkProTheme.tokenColors, // colors: oneDarkProTheme.colors, @@ -40,8 +40,15 @@ export default function App() { function handleEditorDidMount(editor, monaco) { editorRef.current = editor; - editorRef.current.updateOptions({ theme: "vs" }); - // editorRef.current.updateOptions({ theme: "vs-dark" }); + + const isDarkTheme = window.matchMedia("(prefers-color-scheme: dark)").matches; + editorRef.current.updateOptions({ theme: isDarkTheme ? "vs-dark" : "vs" }); + + window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => { + const newTheme = event.matches ? "vs-dark" : "vs"; + editorRef.current.updateOptions({ theme: newTheme }); + }); + // editorRef.current.updateOptions({ theme: "one-dark-pro" }); } @@ -50,7 +57,7 @@ export default function App() { try { const response = await fetch( - `${import.meta.env.VITE_API_URL}/execute`, + `${import.meta.env.VITE_API_URL}/execute`, { method: "POST", headers: { @@ -77,27 +84,33 @@ export default function App() { } return ( -
+
-
-
- - Python +
+
+ + + + Python
- -
-
+
-
+
- - Output + + + + + Output
-
-
- 
{output}
+
+ 
{output}