feat: themes

2026-04-04 13:38:32 +03:00
parent 8175d7b3a5
commit 55cb214458
14 changed files with 197 additions and 99 deletions
@@ -13,16 +13,45 @@ import {
  TitleBar,
  StatusBar,
 } from "./components";
+import { useThemeStore } from "@/modules/theme-bw/stores/theme.store";

 interface IDEProps {
  initialFiles?: FileNode;
  onBack?: () => void;
 }

+const darkColors = {
+  bg: "#1e1e1e",
+  bgSecondary: "#252526",
+  bgTertiary: "#2d2d30",
+  border: "#3e3e42",
+  textPrimary: "#cccccc",
+  textSecondary: "#858585",
+  accent: "#0e639c",
+  accentHover: "#1177bb",
+  statusBar: "#007acc",
+};
+
+const lightColors = {
+  bg: "#ffffff",
+  bgSecondary: "#f3f3f3",
+  bgTertiary: "#e8e8e8",
+  border: "#e0e0e0",
+  textPrimary: "#333333",
+  textSecondary: "#616161",
+  accent: "#0e639c",
+  accentHover: "#1177bb",
+  statusBar: "#007acc",
+};
+
 export const IDE: React.FC<IDEProps> = ({
  initialFiles: externalFiles,
  onBack,
 }: IDEProps = {}) => {
+  const theme = useThemeStore((s) => s.theme);
+  const isDark = theme === "dark";
+  const c = isDark ? darkColors : lightColors;
+
  const files = useIDEStore((state) => state.files);
  const openFiles = useIDEStore((state) => state.openFiles);
  const activeFile = useIDEStore((state) => state.activeFile);
@@ -51,7 +80,7 @@ export const IDE: React.FC<IDEProps> = ({
          height: "100vh",
          display: "flex",
          flexDirection: "column",
-          backgroundColor: "#1e1e1e",
+          backgroundColor: c.bg,
          fontFamily:
            "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
          position: "relative",
@@ -66,8 +95,8 @@ export const IDE: React.FC<IDEProps> = ({
              top: "40px",
              left: "12px",
              background: "transparent",
-              border: "1px solid #3e3e42",
-              color: "#cccccc",
+              border: `1px solid ${c.border}`,
+              color: c.textPrimary,
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
@@ -79,14 +108,14 @@ export const IDE: React.FC<IDEProps> = ({
              zIndex: 10,
            }}
            onMouseEnter={(e) => {
-              e.currentTarget.style.backgroundColor = "#3e3e42";
+              e.currentTarget.style.backgroundColor = c.border;
              e.currentTarget.style.color = "#fff";
              e.currentTarget.style.borderColor = "#555";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = "transparent";
-              e.currentTarget.style.color = "#cccccc";
-              e.currentTarget.style.borderColor = "#3e3e42";
+              e.currentTarget.style.color = c.textPrimary;
+              e.currentTarget.style.borderColor = c.border;
            }}
            title="Go back"
          >
@@ -117,7 +146,7 @@ export const IDE: React.FC<IDEProps> = ({
              style={{
                fontSize: "22px",
                marginBottom: "12px",
-                color: "#cccccc",
+                color: c.textPrimary,
                fontWeight: 300,
              }}
            >
@@ -127,7 +156,7 @@ export const IDE: React.FC<IDEProps> = ({
              style={{
                fontSize: "13px",
                marginBottom: "32px",
-                color: "#858585",
+                color: c.textSecondary,
              }}
            >
              Create a new project to get started
@@ -136,7 +165,7 @@ export const IDE: React.FC<IDEProps> = ({
              onClick={createNewProject}
              style={{
                padding: "10px 24px",
-                backgroundColor: "#0e639c",
+                backgroundColor: c.accent,
                border: "none",
                borderRadius: "4px",
                color: "#fff",
@@ -146,10 +175,10 @@ export const IDE: React.FC<IDEProps> = ({
                transition: "background-color 0.1s",
              }}
              onMouseEnter={(e) => {
-                e.currentTarget.style.backgroundColor = "#1177bb";
+                e.currentTarget.style.backgroundColor = c.accentHover;
              }}
              onMouseLeave={(e) => {
-                e.currentTarget.style.backgroundColor = "#0e639c";
+                e.currentTarget.style.backgroundColor = c.accent;
              }}
            >
              <MdAdd size={14} /> New Project
@@ -168,7 +197,7 @@ export const IDE: React.FC<IDEProps> = ({
        display: "flex",
        flexDirection: "column",
        overflow: "hidden",
-        backgroundColor: "#1e1e1e",
+        backgroundColor: c.bg,
        fontFamily:
          "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
      }}
@@ -176,14 +205,14 @@ export const IDE: React.FC<IDEProps> = ({
      <div
        style={{
          height: "30px",
-          backgroundColor: "#323233",
+          backgroundColor: c.bgTertiary,
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "0 8px",
-          borderBottom: "1px solid #1e1e1e",
+          borderBottom: `1px solid ${c.bg}`,
          fontSize: "12px",
-          color: "#cccccc",
+          color: c.textPrimary,
          userSelect: "none",
          flexShrink: 0,
        }}
@@ -194,7 +223,7 @@ export const IDE: React.FC<IDEProps> = ({
            style={{
              background: "transparent",
              border: "none",
-              color: "#cccccc",
+              color: c.textPrimary,
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
@@ -205,12 +234,12 @@ export const IDE: React.FC<IDEProps> = ({
              transition: "all 0.1s",
            }}
            onMouseEnter={(e) => {
-              e.currentTarget.style.backgroundColor = "#3e3e42";
+              e.currentTarget.style.backgroundColor = c.border;
              e.currentTarget.style.color = "#fff";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = "transparent";
-              e.currentTarget.style.color = "#cccccc";
+              e.currentTarget.style.color = c.textPrimary;
            }}
            title="Go back"
          >