From eae159eb4c061e7de5680008690fef838eef8e20 Mon Sep 17 00:00:00 2001
From: EllangoK <karun.ellango7@gmail.com>
Date: Tue, 11 Apr 2023 13:11:39 -0400
Subject: [PATCH] adds light theme, fixes multiline css

---
 web/extensions/core/colorPalette.js | 61 +++++++++++++++++++++++++++--
 web/style.css                       |  4 +-
 2 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/web/extensions/core/colorPalette.js b/web/extensions/core/colorPalette.js
index 33c03ca1..5f5cc035 100644
--- a/web/extensions/core/colorPalette.js
+++ b/web/extensions/core/colorPalette.js
@@ -5,9 +5,9 @@ import { api } from "/scripts/api.js";
 // Manage color palettes
 
 const colorPalettes = {
-	"palette_1": {
-		"id": "palette_1",
-		"name": "Palette 1",
+	"dark": {
+		"id": "dark",
+		"name": "Dark (Default)",
 		"colors": {
 			"node_slot": {
 				"CLIP": "#FFD500", // bright yellow
@@ -58,6 +58,59 @@ const colorPalettes = {
 			}
 		},
 	},
+	"light": {
+		"id": "light",
+		"name": "Light",
+		"colors": {
+			"node_slot": {
+				"CLIP": "#FFA726", // orange
+				"CLIP_VISION": "#5C6BC0", // indigo
+				"CLIP_VISION_OUTPUT": "#8D6E63", // brown
+				"CONDITIONING": "#EF5350", // red
+				"CONTROL_NET": "#66BB6A", // green
+				"IMAGE": "#42A5F5", // blue
+				"LATENT": "#AB47BC", // purple
+				"MASK": "#9CCC65", // light green
+				"MODEL": "#7E57C2", // deep purple
+				"STYLE_MODEL": "#D4E157", // lime
+				"VAE": "#FF7043", // deep orange
+			},
+			"litegraph_base": {
+				"NODE_TITLE_COLOR": "#222",
+				"NODE_SELECTED_TITLE_COLOR": "#000",
+				"NODE_TEXT_SIZE": 14,
+				"NODE_TEXT_COLOR": "#444",
+				"NODE_SUBTEXT_SIZE": 12,
+				"NODE_DEFAULT_COLOR": "#F7F7F7",
+				"NODE_DEFAULT_BGCOLOR": "#F5F5F5",
+				"NODE_DEFAULT_BOXCOLOR": "#CCC",
+				"NODE_DEFAULT_SHAPE": "box",
+				"NODE_BOX_OUTLINE_COLOR": "#000",
+				"DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.1)",
+				"DEFAULT_GROUP_FONT": 24,
+
+				"WIDGET_BGCOLOR": "#D4D4D4",
+				"WIDGET_OUTLINE_COLOR": "#999",
+				"WIDGET_TEXT_COLOR": "#222",
+				"WIDGET_SECONDARY_TEXT_COLOR": "#555",
+
+				"LINK_COLOR": "#4CAF50",
+				"EVENT_LINK_COLOR": "#FF9800",
+				"CONNECTING_LINK_COLOR": "#2196F3",
+			},
+			"comfy_base": {
+				"fg-color": "#222",
+				"bg-color": "#FFF",
+				"comfy-menu-bg": "#F5F5F5",
+				"comfy-input-bg": "#C9C9C9",
+				"input-text": "#222",
+				"descrip-text": "#444",
+				"drag-text": "#555",
+				"error-text": "#F44336",
+				"border-color": "#CCC"
+			}
+		},
+	},
 	"solarized": {
 		"id": "solarized",
 		"name": "Solarized",
@@ -116,7 +169,7 @@ const colorPalettes = {
 
 const id = "Comfy.ColorPalette";
 const idCustomColorPalettes = "Comfy.CustomColorPalettes";
-const defaultColorPaletteId = "palette_1";
+const defaultColorPaletteId = "dark";
 const els = {}
 // const ctxMenu = LiteGraph.ContextMenu;
 app.registerExtension({
diff --git a/web/style.css b/web/style.css
index d1bd730b..34e31726 100644
--- a/web/style.css
+++ b/web/style.css
@@ -32,8 +32,8 @@ body {
 }
 
 .comfy-multiline-input {
-	background-color: var(--bg-color);
-	color: var(--fg-color);
+	background-color: var(--comfy-input-bg);
+	color: var(--input-text);
 	overflow: hidden;
 	overflow-y: auto;
 	padding: 2px;