Revert "Add dark mode depending on system settings (#205)" (#259)

This reverts commit 1854a39.

src/components/Instructions/InstructionItem.tsx

@@ -9,9 +9,8 @@ import { TableCell, TableRow } from "../ui/table";
 import { ProgramRow } from ".";
 import { useAppSelector } from "@/store/hooks.ts";
 import { selectWorkers, WorkerState } from "@/store/workers/workersSlice.ts";
-import { hexToRgb, invertHexColor } from "@/lib/utils.ts";
+import { hexToRgb } from "@/lib/utils.ts";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip.tsx";
-import useDarkMode from "@/hooks/useDarkMode.ts";
 
 const getWorkerValueFromState = (
   worker: WorkerState,
@@ -74,7 +73,6 @@ export const InstructionItem = forwardRef(
     ref: ForwardedRef<HTMLTableRowElement>,
   ) => {
     const { numeralSystem } = useContext(NumeralSystemContext);
-    const isDarkMode = useDarkMode();
 
     const workers = useAppSelector(selectWorkers);
     const workersWithCurrentPc = workers.filter((worker) => worker.currentState.pc === programRow.address);
@@ -83,7 +81,7 @@ export const InstructionItem = forwardRef(
       onClick(programRow);
     }, [programRow, onClick]);
 
-    const { backgroundColor, hasTooltip } = getHighlightStatus(workers, programRow, status, isDarkMode);
+    const { backgroundColor, hasTooltip } = getHighlightStatus(workers, programRow, status);
 
     const renderContent = () => {
       return (
@@ -163,7 +161,7 @@ export const InstructionItem = forwardRef(
   },
 );
 
-function getHighlightStatus(workers: WorkerState[], programRow: ProgramRow, status?: Status, isDarkMode?: boolean) {
+function getHighlightStatus(workers: WorkerState[], programRow: ProgramRow, status?: Status) {
   const pcInAllWorkers = (state: "currentState" | "previousState") =>
     workers.map((worker) => getWorkerValueFromState(worker, state, "pc"));
 
@@ -179,11 +177,7 @@ function getHighlightStatus(workers: WorkerState[], programRow: ProgramRow, stat
     pcInAllWorkers("currentState").length;
 
   const blockBackground = programRow.block.number % 2 === 0 ? "#fff" : "#efefef";
-  const backgroundColor = isHighlighted
-    ? `rgba(${hexToRgb(bgColor)}, ${bgOpacity})`
-    : isDarkMode
-      ? invertHexColor(blockBackground)
-      : blockBackground;
+  const backgroundColor = isHighlighted ? `rgba(${hexToRgb(bgColor)}, ${bgOpacity})` : blockBackground;
 
   return {
     backgroundColor,

src/components/MemoryPreview/index.tsx

@@ -51,8 +51,8 @@ const MemoryCell = ({
     <span
       key={index}
       className={classNames("relative mr-[1px]", {
-        "text-gray-700 dark:text-gray-300": (index + 1) % 2 === 0,
-        "text-gray-950 dark:text-gray-400": (index + 1) % 2 === 1,
+        "text-gray-700": (index + 1) % 2 === 0,
+        "text-gray-950": (index + 1) % 2 === 1,
         "font-bold": value !== 0,
         "opacity-50": isEqualAcrossWorkers && value === 0,
       })}

src/components/ProgramLoader/Assembly.tsx

@@ -5,7 +5,6 @@ import classNames from "classnames";
 import { compile_assembly, disassemble } from "@typeberry/spectool-wasm";
 import { mapUploadFileInputToOutput } from "./utils";
 import CodeMirror from "@uiw/react-codemirror";
-import useDarkMode from "@/hooks/useDarkMode.ts";
 
 const DEFAULT_ASSEMBLY = `pre: a0 = 9
 pre: ra = 0xffff0000
@@ -157,7 +156,6 @@ export const Assembly = ({
   const [error, setError] = useState<string>();
   const [assembly, setAssembly] = useState(defaultAssembly);
   const [isFirstCompilation, setFirstCompilation] = useState(true);
-  const isDarkMode = useDarkMode();
 
   // compile the assembly for the first time
   useEffect(() => {
@@ -196,7 +194,6 @@ export const Assembly = ({
           height="100%"
           placeholder="Try writing some PolkaVM assembly code."
           value={assembly}
-          theme={isDarkMode ? "dark" : "light"}
           onChange={(value) => compile(value)}
         />
       </div>

src/components/ui/multi-select.tsx

@@ -222,13 +222,13 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                     selectedValues.slice(0, maxCount).map((value) => {
                       const option = options.find((o) => o.value === value);
                       return (
-                        <span key={value} className="text-primary px-2">
+                        <span key={value} className="text-black px-2">
                           {option?.label}
                         </span>
                       );
                     })}
                   {!showOptionsAsTags && selectedValues.length > maxCount && (
-                    <span className="text-prmiary px-2">{selectedValues.length} PVMs in parallel</span>
+                    <span className="text-black px-2">{selectedValues.length} PVMs in parallel</span>
                   )}
                   {showOptionsAsTags &&
                     selectedValues.slice(0, maxCount).map((value) => {

src/globals.css

@@ -35,21 +35,21 @@
 
   .dark {
     --background: 190 84% 4.9%;
-    --foreground: 210 40% 90%;
+    --foreground: 210 40% 98%;
     --card: 190 84% 4.9%;
-    --card-foreground: 210 40% 90%;
+    --card-foreground: 210 40% 98%;
     --popover: 190 84% 4.9%;
-    --popover-foreground: 210 40% 90%;
-    --primary: 210 40% 90%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
     --primary-foreground: 190 47.4% 11.2%;
     --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 90%;
+    --secondary-foreground: 210 40% 98%;
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
     --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 90%;
+    --accent-foreground: 210 40% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 90%;
+    --destructive-foreground: 210 40% 98%;
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
@@ -69,7 +69,3 @@
     @apply bg-background text-foreground;
   }
 }
-
-::file-selector-button {
-  @apply bg-background text-foreground;
-}

src/lib/utils.ts

@@ -12,18 +12,3 @@ export const hexToRgb = (hex: string) => {
   const b = bigint & 255;
   return `${r}, ${g}, ${b}`;
 };
-
-export const invertHexColor = (hex: string) => {
-  hex = hex.replace(/^#/, "");
-
-  if (hex.length === 3) {
-    hex = hex
-      .split("")
-      .map((char) => char + char)
-      .join("");
-  }
-
-  const invertedColor = (0xffffff ^ parseInt(hex, 16)).toString(16).padStart(6, "0");
-
-  return `#${invertedColor}`;
-};

src/main.tsx

@@ -7,8 +7,6 @@ import { Provider } from "react-redux";
 import { store } from "./store";
 import { HashRouter } from "react-router";
 
-document.documentElement.classList.toggle("dark", window.matchMedia("(prefers-color-scheme: dark)").matches);
-
 ReactDOM.createRoot(document.getElementById("root")!).render(
   // TODO: strict mode is disabled because of the App useEffect for init being called twice
   // <React.StrictMode>