From f5b90c1c169272df5409374a57fd999ebc934cec Mon Sep 17 00:00:00 2001 From: Steve Genoud Date: Fri, 31 Jan 2025 13:57:45 +0100 Subject: [PATCH] Improve the dark mode --- packages/studio/src/GlobalStyles.jsx | 9 ++++-- packages/studio/src/InfiniteGrid.jsx | 13 +++++++- packages/studio/src/Welcome.jsx | 7 ++++ packages/studio/src/components/Dialog.jsx | 2 +- .../studio/src/components/FloatingInfo.jsx | 6 ++-- packages/studio/src/utils/useDarkMode.js | 32 +++++++++++++++++++ packages/studio/src/visualiser/Editor.jsx | 4 ++- .../src/visualiser/editor/ParamsEditor.jsx | 6 ++-- packages/studio/src/workbench/EditorPane.jsx | 1 + packages/studio/src/workbench/Workbench.jsx | 6 ++++ 10 files changed, 76 insertions(+), 10 deletions(-) create mode 100644 packages/studio/src/utils/useDarkMode.js diff --git a/packages/studio/src/GlobalStyles.jsx b/packages/studio/src/GlobalStyles.jsx index 1c33554..17cc372 100644 --- a/packages/studio/src/GlobalStyles.jsx +++ b/packages/studio/src/GlobalStyles.jsx @@ -37,8 +37,8 @@ export default createGlobalStyle` html, body { box-sizing: border-box; background-color: white; - color: #444; - fill: #444; + color: var(--text-color); + fill: var(--text-color); scroll-behavior: smooth; } @@ -49,6 +49,9 @@ export default createGlobalStyle` } :root { + --text-color: #444; + --bg-color-secondary: white; + --color-primary: rgb(90, 130, 150); --color-primary-light: rgb(170, 190, 200); --color-primary-dark: rgb(60, 90, 110); @@ -61,6 +64,8 @@ export default createGlobalStyle` @media (prefers-color-scheme: dark) { :root { --bg-color: #1e1e1e; + --bg-color-secondary: #2e2e2e; + --text-color: #f2f2f2; } } diff --git a/packages/studio/src/InfiniteGrid.jsx b/packages/studio/src/InfiniteGrid.jsx index fafd319..1682c13 100644 --- a/packages/studio/src/InfiniteGrid.jsx +++ b/packages/studio/src/InfiniteGrid.jsx @@ -1,6 +1,8 @@ -import React, { useRef } from "react"; +import React, { useRef, useEffect } from "react"; import * as THREE from "three"; import { Plane } from "@react-three/drei"; +import { useDarkMode } from "./utils/useDarkMode"; +import { useThree } from "@react-three/fiber"; // // // Author: Fyrestar https://mevedia.com (https://github.com/Fyrestar/THREE.InfiniteGridHelper) @@ -101,5 +103,14 @@ const infiniteGridMaterial = function InfiniteGridMaterial({ export default () => { const material = useRef(infiniteGridMaterial()); + const isDarkMode = useDarkMode(); + const { invalidate } = useThree(); + + useEffect(() => { + material.current.uniforms.uColor.value = new THREE.Color( + isDarkMode ? "lightgrey" : "grey" + ); + invalidate(); + }, [isDarkMode, invalidate]); return ; }; diff --git a/packages/studio/src/Welcome.jsx b/packages/studio/src/Welcome.jsx index 0f17f18..c60f374 100644 --- a/packages/studio/src/Welcome.jsx +++ b/packages/studio/src/Welcome.jsx @@ -6,6 +6,7 @@ import { Link } from "react-router-dom"; const Main = styled.div` width: 100%; min-height: 100%; + background-color: var(--bg-color); `; const Hero = styled.div` @@ -55,6 +56,12 @@ const BoxCard = styled(Link)` &: hover { background-color: var(--color-primary-light); } + + @media (prefers-color-scheme: dark) { + &: hover { + background-color: var(--color-primary-dark); + } + } `; const BoxTitle = styled.div` diff --git a/packages/studio/src/components/Dialog.jsx b/packages/studio/src/components/Dialog.jsx index d920680..58ce328 100644 --- a/packages/studio/src/components/Dialog.jsx +++ b/packages/studio/src/components/Dialog.jsx @@ -53,7 +53,7 @@ const DialogBox = styled.div` display: flex; flex-direction: column; - background: #fff; + background: var(--bg-color); border: 1px solid #ccc; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); outline: none; diff --git a/packages/studio/src/components/FloatingInfo.jsx b/packages/studio/src/components/FloatingInfo.jsx index f62271a..217d6cc 100644 --- a/packages/studio/src/components/FloatingInfo.jsx +++ b/packages/studio/src/components/FloatingInfo.jsx @@ -7,13 +7,15 @@ export const InfoTopRight = styled.div` top: 3.5em; right: 2em; max-width: 300px; - padding: 10px; + padding: 8px; border-radius: 10px; max-height: calc(100% - 5em); overflow-y: auto; ${(props) => - props.noBg ? "" : `background-color: white; border: 1px solid lightgrey;`} + props.noBg + ? "" + : `background-color: var(--bg-color); border: 1px solid lightgrey;`} `; export const InfoBottomLeft = styled(InfoTopRight)` diff --git a/packages/studio/src/utils/useDarkMode.js b/packages/studio/src/utils/useDarkMode.js new file mode 100644 index 0000000..d966a10 --- /dev/null +++ b/packages/studio/src/utils/useDarkMode.js @@ -0,0 +1,32 @@ +import { useState, useEffect } from "react"; + +export function useDarkMode() { + const [isDarkMode, setIsDarkMode] = useState(false); + + useEffect(() => { + // Create the media query inside useEffect to ensure browser environment + const mediaQuery = window?.matchMedia("(prefers-color-scheme: dark)"); + + if (!mediaQuery) { + return; + } + + // Define the change handler + const handleChange = (event) => { + setIsDarkMode(event.matches); + }; + + // Add the listener + mediaQuery.addEventListener("change", handleChange); + + // Set initial value + setIsDarkMode(mediaQuery.matches); + + // Clean up + return () => { + mediaQuery.removeEventListener("change", handleChange); + }; + }, []); + + return isDarkMode; +} diff --git a/packages/studio/src/visualiser/Editor.jsx b/packages/studio/src/visualiser/Editor.jsx index fba4378..a0b5653 100644 --- a/packages/studio/src/visualiser/Editor.jsx +++ b/packages/studio/src/visualiser/Editor.jsx @@ -43,7 +43,7 @@ const Select = styled.select` const ErrorOverlay = styled(InfoBottomLeft)` border-color: red; - background-color: white; + background-color: var(--bg-color); border-width: 2px; max-height: initial; max-width: 50vw; @@ -61,11 +61,13 @@ const ErrorOverlay = styled(InfoBottomLeft)` font-size: 0.6em; overflow-x: auto; padding: 1em; + color: #444; background-color: #f2e0de; } `; const CenterInfo = styled.div` + background-color: var(--bg-color); display: flex; flex-direction: column; align-items: center; diff --git a/packages/studio/src/visualiser/editor/ParamsEditor.jsx b/packages/studio/src/visualiser/editor/ParamsEditor.jsx index da6a328..bd7a548 100644 --- a/packages/studio/src/visualiser/editor/ParamsEditor.jsx +++ b/packages/studio/src/visualiser/editor/ParamsEditor.jsx @@ -52,7 +52,7 @@ export default observer(function ParamsEditor({ colors: { elevation1: "white", elevation2: "var(--bg-color)", - elevation3: "white", // bg color of the root panel (main title bar) + elevation3: "var(--bg-color-secondary)", // bg color of the root panel (main title bar) highlight1: "var(--color-primary)", highlight2: "var(--color-primary)", @@ -65,8 +65,8 @@ export default observer(function ParamsEditor({ vivid1: "red", }, sizes: { - controlWidth: "80px" - } + controlWidth: "80px", + }, }} /> ); diff --git a/packages/studio/src/workbench/EditorPane.jsx b/packages/studio/src/workbench/EditorPane.jsx index 514b6d8..83dcd7b 100644 --- a/packages/studio/src/workbench/EditorPane.jsx +++ b/packages/studio/src/workbench/EditorPane.jsx @@ -45,6 +45,7 @@ export const ErrorOverlay = styled.div` font-size: 0.6em; overflow-x: auto; padding: 1em; + color: #444; background-color: #f2e0de; } `; diff --git a/packages/studio/src/workbench/Workbench.jsx b/packages/studio/src/workbench/Workbench.jsx index e3294a5..ed29268 100644 --- a/packages/studio/src/workbench/Workbench.jsx +++ b/packages/studio/src/workbench/Workbench.jsx @@ -52,6 +52,12 @@ const WorkbenchWrapper = styled.div` & .custom-gutter-theme { background-color: var(--color-primary-light); } + + @media (prefers-color-scheme: dark) { + & .custom-gutter-theme { + background-color: var(--bg-color); + } + } `; export default function Workbench() {