Update app.py

app.py

@@ -67,24 +67,23 @@ STYLE = """
 	position: absolute;
 	top: 0;
 	right: 50%;
-	border-top: 1px solid #ccc;
+	border-top: 1px solid var(--body-text-color);
 	width: 51%;
 	height: 10px;
 }
 .tree li::after {
 	right: auto;
 	left: 50%;
-	border-left: 1px solid #ccc;
+	border-left: 1px solid var(--body-text-color);
 }
 .tree li:only-child::after, .tree li:only-child::before {
 	display: none;
 }
-
 .tree li:first-child::before, .tree li:last-child::after {
 	border: 0 none;
 }
 .tree li:last-child::before {
-	border-right: 1px solid #ccc;
+	border-right: 1px solid var(--body-text-color);
 	border-radius: 0 5px 0 0;
 	-webkit-border-radius: 0 5px 0 0;
 	-moz-border-radius: 0 5px 0 0;
@@ -99,12 +98,12 @@ STYLE = """
 	position: absolute;
 	top: 0;
 	left: 50%;
-	border-left: 1px solid #ccc;
+	border-left: 1px solid var(--body-text-color);
 	width: 0;
 	height: 20px;
 }
 .tree li a {
-	border: 1px solid #ccc;
+	border: 1px solid var(--body-text-color);
 	padding: 5px;
 	display: inline-grid;
 	border-radius: 5px;
@@ -113,7 +112,6 @@ STYLE = """
 	transition: .5s;
 }
 .tree li a span {
-	color: #666;
 	padding: 5px;
 	font-size: 12px;
 	text-transform: uppercase;
@@ -123,7 +121,6 @@ STYLE = """
 /*Hover-Section*/
 .tree li a:hover, .tree li a:hover+ul li a {
 	background: #ffedd5;
-	color: #000;
 }
 .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before {
 	border-color: #7c2d12;
@@ -329,7 +326,7 @@ def get_beam_search_html(input_text, number_steps, number_beams):
 
 with gr.Blocks(
     theme=gr.themes.Soft(
-        text_size="lg", font=["monospace"], primary_hue=gr.themes.colors.orange
+        text_size="lg", font=["monospace"], primary_hue=gr.themes.colors.yellow
     ),
     css=STYLE,
 ) as demo: