diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
index ef094ec2..3787557a 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
@@ -7,11 +7,39 @@
 
 	let style =
 	{
-		lines_width: "1px",
-		lines_color: "black",
-		bg_color: "bisque",
+		lines_width:       "1px",
+		lines_color:       "rgb(30, 30, 30)",
+		lines_light_color: "rgb(100, 100, 100)",
+		bg_color:          "bisque",
+
+		btn_color:        "rgb(220, 220, 220)",
+		btn_color_hover:  "rgb(200, 200, 200)",
+		btn_color_active: "rgb(190, 190, 190)",
+		btn_color_border: "rgb(150, 150, 150)",
+
+		btn_light_color:        "rgb(235, 235, 235)",
+		btn_light_color_hover:  "rgb(220, 220, 220)",
+		btn_light_color_active: "rgb(210, 210, 210)",
+		btn_color_border:       "rgb(200, 200, 200)",
 	}
 
+	let style_dark =
+	{
+		lines_width:       "2px",
+		lines_color:       "rgb(200, 200, 200)",
+		lines_light_color: "rgb(100, 100, 100)",
+		bg_color:          "rgb(35, 35, 35)",
+
+		btn_color:        "rgb(220, 220, 220)",
+		btn_color_hover:  "rgb(200, 200, 200)",
+		btn_color_active: "rgb(190, 190, 190)",
+		btn_color_border: "rgb(150, 150, 150)",
+
+		btn_light_color:        "rgb(235, 235, 235)",
+		btn_light_color_hover:  "rgb(220, 220, 220)",
+		btn_light_color_active: "rgb(210, 210, 210)",
+		btn_color_border:       "rgb(200, 200, 200)",
+	}
 
 	console.log("location:",$location);
 	if ($location !== '/')
@@ -22,27 +50,21 @@
 		console.log("change color, location:", loc);
 		if (loc.startsWith("/game"))
 		{
-			style.lines_width = "2px";
-			style.lines_color = "white";
-			style.bg_color = "#222425";
+			// style here
+			style = style_dark;
 		}
 		if (loc.startsWith("/spectator"))
 		{
-			style.lines_width = "1px";
-			style.lines_color = "black";
-			style.bg_color = "bisque";
+			// style here
+			style = style_dark;
 		}
 		if (loc.startsWith("/ranking"))
 		{
-			style.lines_width = "1px";
-			style.lines_color = "black";
-			style.bg_color = "bisque";
+			// style here
 		}
 		if (loc.startsWith("/profile"))
 		{
-			style.lines_width = "1px";
-			style.lines_color = "black";
-			style.bg_color = "bisque";
+			// style here
 		}
 	}
 
@@ -54,7 +76,22 @@
 	<!--
 	<Layouts color={color} />
 	-->
-	<Layouts --lines_width={style.lines_width} --lines_color={style.lines_color} --bg_color={style.bg_color} />
+	<Layouts
+		--lines_width={style.lines_width}
+		--lines_color={style.lines_color}
+		--lines_light_color={style.lines_light_color}
+		--bg_color={style.bg_color}
+
+		--btn_color={style.btn_color}
+		--btn_color_hover={style.btn_color_hover}
+		--btn_color_active={style.btn_color_active}
+		--btn_color_border={style.btn_color_border}
+
+		--btn_light_color={style.btn_light_color}
+		--btn_light_color_hover={style.btn_light_color_hover}
+		--btn_light_color_active={style.btn_light_color_active}
+		--btn_light_color_border={style.btn_color_border}
+	/>
 {/if}
 
 <style></style>
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat_box_css.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat_box_css.svelte
index b337aaf3..395c819e 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat_box_css.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat_box_css.svelte
@@ -40,9 +40,20 @@
 
 	/* gobal variables styles
 
-			--lines_width
-			--lines_color
-			--bg_color
+		--lines_width
+		--lines_color
+		--lines_light_color
+		--bg_color
+
+		--btn_color
+		--btn_color_hover
+		--btn_color_active
+		--btn_color_border
+
+		--btn_light_color
+		--btn_light_color_hover
+		--btn_light_color_active
+		--btn_light_color_border
 	*/
 
 
@@ -108,7 +119,7 @@
 	}
 	.chat_box :global(.__show_if_only_child:only-child) {
 		display: flex;
-		color: rgb(100, 100, 100);
+		color: var(--lines_light_color);
 	}
 
 
@@ -135,7 +146,7 @@
 	.chat_box :global(.__check_change_next:checked ~ .__to_block),
 	.chat_box :global(.__check_change_next:checked ~ .__to_block *) {
 		pointer-events: none;
-		color: rgb(100, 100, 100);
+		color: var(--lines_light_color);
 	}
 	.chat_box :global(.__to_show) {
 		display: none;
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat_layouts.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat_layouts.svelte
index 55ae3216..bb8cbcd2 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat_layouts.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat_layouts.svelte
@@ -19,7 +19,6 @@
 
 	/* global variables
 	*/
-	export let color;
 	let room = "";
 	let admin = false;
 	let layouts = ["home", "home"];
@@ -28,8 +27,6 @@
 	*/
 	function set_layouts($layout)
 	{
-		//console.log("layouts:", layouts);
-		//console.log("layout:", $layout);
 		if ($layout.length === 0)
 			layout.set(layouts[0]);
 		else if ($layout === "close")
@@ -40,13 +37,12 @@
 			layouts = [$layout, "home"];
 		else
 			layouts = [$layout, layouts[0]];
-		//console.log("- layouts:", layouts);
 	}
 	$: set_layouts($layout);
 
 </script>
 
-<ChatBox color={color}>
+<ChatBox>
 
 	{#if $layout === "home"}
 		<HomeLayout />
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Element_button.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Element_button.svelte
index 594bc0f5..e1d3fc14 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Element_button.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Element_button.svelte
@@ -50,25 +50,26 @@
 		cursor: pointer;
 		outline: none;
 		border: none;
-		background-color: rgb(220, 220, 220);
+		background-color: var(--btn_color);
 	}
-	button p {
+
+	:global(.chat_box) button p {
 		width: 100%;
 		margin: auto;
 		text-align: center;
+		color: var(--lines_light_color);
 	}
 	button:hover {
-		background-color: rgb(200, 200, 200);
+		background-color: var(--btn_color_hover);
 	}
 	button:active {
-		background-color: rgb(190, 190, 190);
+		background-color: var(--btn_color_active);
 	}
 
-
 	/* .list
 	*/
 	.list:not(:hover) {
-		background-color: rgb(240, 240, 240);
+		background-color: var(--btn_light_color);
 	}
 	.list p {
 		text-align: left;
@@ -100,19 +101,19 @@
 	/* .light
 	*/
 	.light {
-		background-color: rgb(233, 233, 233);
+		background-color: var(--btn_light_color);
 	}
 	.light.border {
-		border: 1px solid rgb(204, 204, 204);
+		border: var(--lines_width) solid var(--btn_light_color_border);
 	}
 	.light:hover {
-		background-color: rgb(220, 220, 220);
+		background-color: var(--btn_light_color_hover);
 	}
 	.light.border:hover {
-		border-color: rgb(200, 200, 200);
+		border-color: var(--btn_light_color_border);
 	}
 	.light:active {
-		background-color: rgb(210, 210, 210);
+		background-color: var(--btn_light_color_active);
 	}
 
 
@@ -163,7 +164,6 @@
 		left: 5px;
 		width: 20px;
 		height: 2px;
-		background-color: black;
 		background-color: var(--lines_color);
 	}
 
@@ -200,7 +200,7 @@
 		width: 13px;
 		height: 10px;
 		border-radius: 2px;
-		background-color: rgb(110, 110, 110);
+		background-color: var(--lines_color);
 	}
 	.blocked::after {
 		content: "";
@@ -212,7 +212,7 @@
 		height: 13px;
 		border-radius: 5px;
 		box-sizing: border-box;
-		border: 3px solid rgb(110, 110, 110);
+		border: 3px solid var(--lines_color);
 	}
 
 
@@ -223,7 +223,7 @@
 	}
 	.admin :global(span) {
 		margin-left: auto;
-		color: gray;
+		color: var(--lines_light_color);
 	}