Update app.py

app.py

@@ -71,12 +71,43 @@ examples=[
     ["tell me about your day", "Messmer, the Impaler", "Messmer, son of Queen Marika the Eternal, was born with a dark serpent inside him, called the Abyssal Serpent, contained by Marika through a seal in place of one of his eyes. Constantly accompanied by winged snakes, Messmer and Commander Gaius acted as 'older brothers' to General Radahn. Before the Shattering, Marika tasked Messmer with purging the tower-dwelling people of the Land of Shadow. Even after being abandoned by Marika, he continued this purge with zeal. Among his army, Black Knight Commander Andreas and Black Knight Captain Huw, initially considered brothers-in-arms, eventually rebelled upon discovering his serpentine nature.","Marika",256 ],
     ["tell me about your day","Ada Wong","Ada Wong's early life is shrouded in mystery, with unconfirmed details about her ethnicity, nationality, and birth. She has mentioned a possibly fabricated story of being born around 1974 in Saigon, Vietnam, to a wealthy family that fled to the United States post-Vietnam War. As a young adult, she engaged in criminal activities and was eventually recruited by Albert Wesker for a bioweapons corporation known as 'the Organization.' Around 1997, she infiltrated the Umbrella Corporation's Arklay Laboratory, forming a relationship with Dr. John Clemens to gather information. During the 1998 t-Virus outbreak, Wong managed to escape undetected despite being present at the facility.","Leon",64]    
 ]
-css = """
-#warning {background-color: #FFCCCB}
-.feedback textarea {font-size: 24px !important}
+
+custom_css = """
+/* Dark mode styles */
+body, .panel, .panel input, .panel select, .panel textarea, .panel button {
+    background-color: #2e2e2e;
+    color: #e0e0e0;
+}
+.panel {
+    border: 1px solid #555;
+}
+.panel input, .panel select, .panel textarea, .panel button {
+    border: 1px solid #555;
+    background-color: #3e3e3e;
+    color: #e0e0e0;
+}
+.panel input:focus, .panel select:focus, .panel textarea:focus, .panel button:focus {
+    border-color: #777;
+}
+.chat-message {
+    background-color: #444;
+    color: #e0e0e0;
+}
+.chat-message.user {
+    background-color: #333;
+}
+.chat-message.bot {
+    background-color: #444;
+}
+.chatbot .chat-message {
+    border: 1px solid #555;
+}
+.chatbot .chat-message p {
+    color: #e0e0e0;
+}
 """
 
-iface = gr.ChatInterface( css=css,
+iface = gr.ChatInterface(css=custom_css,
     fn=generate,
     chatbot=gr.Chatbot(show_label=False, show_share_button=False, show_copy_button=True, likeable=True, layout="panel"),
     additional_inputs=additional_inputs,