disable forcing light/dark mode (doesn't work properly)

src/App/App.tsx

@@ -45,7 +45,8 @@ export function App() {
   const [editHistory, setEditHistory] = useState<EditHistory|null>(null);
   const [modal, setModal] = useState<ReactElement|null>(null);
 
-  const [lightMode, setLightMode] = usePersistentState<LightMode>("lightMode", "auto");
+  // const [lightMode, setLightMode] = usePersistentState<LightMode>("lightMode", "auto");
+  const lightMode = "auto";
 
   const {makeCheckPoint, onRedo, onUndo, onRotate} = useEditor(setEditHistory);
 
@@ -140,7 +141,11 @@ export function App() {
 
   const plantState = currentBigStep && currentBigStep.state.plant || plant.execution.initial()[1];
 
-  return <div style={{height:'100%', colorScheme: lightMode!=="auto"?lightMode:undefined}}>
+  return <div style={{
+    height:'100%',
+    // doesn't work:
+    colorScheme: lightMode!=="auto"?lightMode:undefined,
+  }}>
     <ModalOverlay modal={modal} setModal={setModal}>
     {/* top-to-bottom: everything -> bottom panel */}
     <div className="stackVertical" style={{height:'100%'}}>
@@ -156,7 +161,7 @@ export function App() {
             style={{flex: '0 0 content'}}
           >
             {editHistory && <TopPanel
-              {...{onUndo, onRedo, onRotate, lightMode, setLightMode, setModal, editHistory, ...simulator, ...setters, ...appState}}
+              {...{onUndo, onRedo, onRotate, setModal, editHistory, ...simulator, ...setters, ...appState}}
             />}
           </div>
           {/* Editor */}

src/App/BottomPanel/BottomPanel.css

@@ -1,7 +1,7 @@
 .errorStatus {
   /* background-color: rgb(230,0,0); */
   background-color: var(--error-color);
-  color: white;
+  color: var(--background-color);
 }
 
 .bottom {

src/App/SideBar/SideBar.css

@@ -62,11 +62,8 @@ button.inputEvent:active:not(:disabled) {
 }
 
 .activeState {
-  /* border: rgb(192, 125, 0); */
-  /* background-color:rgb(255, 251, 244); */
   border: var(--active-state-border-color) 1px solid;
   background-color: var(--active-state-bg-color);
-  /* filter: drop-shadow( 0px 0px 3px rgba(192, 125, 0, 0.856)); */
   border-radius: 6px;
   margin-left: 4px;
   padding-left: 2px;
@@ -75,18 +72,6 @@ button.inputEvent:active:not(:disabled) {
   color: var(--text-color);
 }
 
-/* hr {
-  display: block;
-  height: 1px;
-  border: 0;
-  border-top: 1px solid #ccc;
-  margin: 0;
-  margin-top: -1px;
-  margin-bottom: -5px;
-  padding: 0;
-  z-index: -1;
-} */
-
 ul {
   list-style-type: circle;
   margin-block-start: 0;

src/App/TopPanel/TopPanel.tsx

@@ -37,8 +37,8 @@ export type TopPanelProps = {
   onInit: () => void,
   onClear: () => void,
   onBack: () => void,
-  lightMode: LightMode,
-  setLightMode: Dispatch<SetStateAction<LightMode>>,
+  // lightMode: LightMode,
+  // setLightMode: Dispatch<SetStateAction<LightMode>>,
   insertMode: InsertMode,
   setInsertMode: Dispatch<SetStateAction<InsertMode>>,
   setModal: Dispatch<SetStateAction<ReactElement|null>>,
@@ -51,7 +51,7 @@ export type TopPanelProps = {
 
 const ShortCutShowKeys = <kbd>~</kbd>;
 
-export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, onRedo, onRotate, onInit, onClear, onBack, lightMode, setLightMode, insertMode, setInsertMode, setModal, zoom, setZoom, showKeys, setShowKeys, editHistory}: TopPanelProps) {
+export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, onRedo, onRotate, onInit, onClear, onBack, insertMode, setInsertMode, setModal, zoom, setZoom, showKeys, setShowKeys, editHistory}: TopPanelProps) {
   const [displayTime, setDisplayTime] = useState("0.000");
   const [timescale, setTimescale] = usePersistentState("timescale", 1);
 
@@ -152,7 +152,8 @@ export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, on
   }, [config, time, onInit, onChangePaused, setShowKeys, onSkip, onBack, onClear]);
 
   return <div className="toolbar">
-    {/* light / dark mode */}
+
+    {/* light / dark mode
     <div className="toolbarGroup">
       <button title="force light mode" className={lightMode==="light"?"active":""} onClick={() => setLightMode("light")}>
         <LightModeIcon fontSize="small"/>
@@ -164,7 +165,7 @@ export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, on
         <DarkModeIcon fontSize="small"/>
       </button>
       &emsp;
-    </div>
+    </div> */}
 
     {/* shortcuts / about */}
     <div className="toolbarGroup">

src/App/VisualEditor/hooks/useMouse.tsx

@@ -356,8 +356,6 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo
     }
   }, [makeCheckPoint, deleteSelection, setState, setDragging]);
 
-  console.log(state.selection);
-
   useEffect(() => {
     // mousemove and mouseup are global event handlers so they keep working when pointer is outside of browser window
     window.addEventListener("mouseup", onMouseUp);

src/index.css

@@ -8,11 +8,11 @@ html, body {
 :root {
   color-scheme: light dark;
 
-  --background-color: light-dark(white, rgb(26, 26, 26));
+  --background-color: light-dark(white, rgb(0, 0, 0));
   --text-color: light-dark(black, white);
   --error-color: light-dark(rgb(163, 0, 0), rgb(255, 82, 82));
   --error-bg-color: light-dark(lightpink, rgb(75, 0, 0));
-  --error-hover-bg-color: light-dark(rgb(102, 0, 0), rgb(102, 0, 0));
+  --error-hover-bg-color: light-dark(rgb(102, 0, 0), rgb(238, 153, 153));
   --light-accent-color: light-dark(rgba(0,0,255,0.2), rgba(78, 186, 248, 0.377));
   --accent-border-color: light-dark(blue, rgb(64, 185, 255));
   --separator-color: light-dark(lightgrey, rgb(44, 44, 44));
@@ -39,12 +39,6 @@ html, body {
   --output-event-bg-color: light-dark(rgb(230, 249, 255), rgb(28, 83, 104));
 }
 
-/* for some reason i need to add this or some elements are rendered in OS color rather than 'forced' color */
-div {
-  color: var(--text-color);
-  background-color: var(--background-color);
-}
-
 div#root {
   height: 100%;
 }