support dark mode

app.py

@@ -8,6 +8,7 @@ from azure.core.credentials import AzureKeyCredential
 url = os.getenv("Azure_Endpoint")
 api_key = AzureKeyCredential(os.getenv("Azure_API_KEY"))
 
+
 # Initialize the ChatCompletionsClient
 client = ChatCompletionsClient(
     endpoint=url,
@@ -76,31 +77,46 @@ def get_azure_response(message, chat_history, temperature, max_tokens, top_p):
 
 # CSS for custom styling
 custom_css = """
+/* Light theme variables */
+:root {
+    --text-primary: #1a5276;
+    --text-secondary: #34495e;
+    --text-tertiary: #7f8c8d;
+    --background-primary: #ffffff;
+    --background-secondary: #f8f9fa;
+    --background-accent: #e8f4f8;
+    --border-color: #e0e0e0;
+}
+
+/* Base styles that work in both light and dark themes */
 .container {
     max-width: 1200px !important;
     margin-left: auto !important;
     margin-right: auto !important;
     padding-top: 0rem !important;
 }
+
 .header {
     text-align: center;
     margin-bottom: 0rem;
 }
+
 .header h1 {
     font-size: 2.5rem !important;
     font-weight: 700 !important;
-    color: #1a5276 !important;
     margin-bottom: 0.5rem !important;
 }
+
 .header p {
     font-size: 1.2rem !important;
-    color: #34495e !important;
 }
+
 .chatbot-container {
     border-radius: 10px !important;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
     overflow: hidden !important;
 }
+
 .emoji-button {
     background: none !important;
     border: none !important;
@@ -109,35 +125,150 @@ custom_css = """
     cursor: pointer !important;
     transition: transform 0.2s !important;
 }
+
 .emoji-button:hover {
     transform: scale(1.2) !important;
 }
+
 .message-input {
     margin-top: 1rem !important;
     display: flex !important;
     align-items: center !important;
 }
+
 .footer {
     margin-top: 2rem;
     text-align: center;
     font-size: 0.9rem;
-    color: #7f8c8d;
 }
+
 .parameters-section {
-    background-color: #f8f9fa !important;
     padding: 1rem !important;
     border-radius: 8px !important;
     margin-bottom: 1rem !important;
+    border: 1px solid var(--border-color) !important;
 }
+
 .examples-section {
-    background-color: #e8f4f8 !important;
     padding: 1rem !important;
     border-radius: 8px !important;
     margin-bottom: 1rem !important;
+    border: 1px solid var(--border-color) !important;
 }
+
 .right-panel {
     padding-left: 1rem !important;
 }
+
+/* Light theme specific styles */
+body:not(.dark) .header h1 {
+    color: var(--text-primary) !important;
+}
+
+body:not(.dark) .header p {
+    color: var(--text-secondary) !important;
+}
+
+body:not(.dark) .footer {
+    color: var(--text-tertiary) !important;
+}
+
+body:not(.dark) .parameters-section {
+    background-color: var(--background-secondary) !important;
+}
+
+body:not(.dark) .examples-section {
+    background-color: var(--background-accent) !important;
+}
+
+body:not(.dark) .chatbot-container {
+    background-color: var(--background-primary) !important;
+}
+
+/* Dark theme specific styles */
+body.dark {
+    --text-primary: #eaeaea !important;
+    --text-secondary: #b0b0b0 !important;
+    --text-tertiary: #909090 !important;
+    --background-primary: #2a2a2a !important;
+    --background-secondary: #333333 !important;
+    --background-accent: #1e3a5f !important;
+    --border-color: #555555 !important;
+}
+
+body.dark .header h1 {
+    color: var(--text-primary) !important;
+}
+
+body.dark .header p {
+    color: var(--text-secondary) !important;
+}
+
+body.dark .footer {
+    color: var(--text-tertiary) !important;
+}
+
+body.dark .parameters-section {
+    background-color: var(--background-secondary) !important;
+}
+
+body.dark .examples-section {
+    background-color: var(--background-accent) !important;
+}
+
+body.dark .chatbot-container {
+    background-color: var(--background-primary) !important;
+}
+
+/* Chat bubbles styling for both themes */
+[data-testid="chatbot"] .message.user {
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+}
+
+[data-testid="chatbot"] .message.bot {
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Chat bubbles in dark mode */
+body.dark [data-testid="chatbot"] .message.user {
+    background-color: #3a3a3a !important;
+    color: #ffffff !important;
+    border: 1px solid #4a4a4a !important;
+}
+
+body.dark [data-testid="chatbot"] .message.bot {
+    background-color: #1e3a5f !important;
+    color: #ffffff !important;
+    border: 1px solid #2c5999 !important;
+}
+
+/* Ensure text inputs are visible in dark mode */
+body.dark input[type="text"],
+body.dark textarea {
+    background-color: #333333 !important;
+    color: #ffffff !important;
+    border-color: #555555 !important;
+}
+
+/* Fix for slider tracks and thumbs in dark mode */
+body.dark input[type="range"]::-webkit-slider-runnable-track {
+    background-color: #555555 !important;
+}
+
+body.dark input[type="range"]::-webkit-slider-thumb {
+    background-color: #1e88e5 !important;
+}
+
+/* Buttons in dark mode */
+body.dark button {
+    border-color: #555555 !important;
+}
+
+/* Labels and descriptions in dark mode */
+body.dark label,
+body.dark .gr-form > div > p {
+    color: var(--text-secondary) !important;
+}
 """
 
 # Create the Gradio interface with a modern, professional design
@@ -298,4 +429,4 @@ with gr.Blocks(css=custom_css, title="Phi-4-mini Playground") as demo:
     regenerate.click(regenerate_response, [chatbot, temp_slider, max_tokens_slider, top_p_slider], [chatbot])
 
 # Launch the app
-demo.launch()  # Set share=True to generate a public URL for testing# Launch the app
+demo.launch(share=True)  # Set share=True to generate a public URL for testing# Launch the app