Update app.py

app.py

@@ -12,17 +12,65 @@ from bs4 import BeautifulSoup
 
 st.set_page_config(page_title="Affirmations", page_icon=":muscle:", layout="wide")
 
+# st.markdown(
+#     """
+#     <style>
+#     .stApp {
+#         background-color: #e9e5d9;
+#     }
+#     .title {
+#         font-size: 36px;
+#         font-weight: bold;
+#         text-align: center;
+#         margin-bottom: 20px;
+#     }
+#     .image-container {
+#         display: flex;
+#         justify-content: center;
+#         margin-bottom: 20px;
+#     }
+#     .affirmation-box {
+#         background-color: #ffffff;
+#         padding: 20px;
+#         border-radius: 10px;
+#         margin-top: 20px;
+#         text-align: center;
+#         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+#     }
+#     .affirmation-text {
+#         font-family: 'Helvetica', sans-serif;
+#         font-size: 18px;
+#         color: #333333;
+#     }
+#     .stButton button {
+#         background-color: #ff0000;
+#         color: #ffffff;
+#         font-size: 16px;
+#         padding: 10px 20px;
+#         border-radius: 5px;
+#         margin-top: 20px;
+#         width: 100%;
+#     }
+#     </style>
+#     """,
+#     unsafe_allow_html=True
+# )
+
 st.markdown(
     """
     <style>
+    :root {
+        color-scheme: light dark;
+    }
     .stApp {
-        background-color: #e9e5d9;
+        background-color: var(--background);
     }
     .title {
         font-size: 36px;
         font-weight: bold;
         text-align: center;
         margin-bottom: 20px;
+        color: var(--text);
     }
     .image-container {
         display: flex;
@@ -30,35 +78,56 @@ st.markdown(
         margin-bottom: 20px;
     }
     .affirmation-box {
-        background-color: #ffffff;
+        background-color: var(--box-background);
         padding: 20px;
         border-radius: 10px;
         margin-top: 20px;
         text-align: center;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        box-shadow: var(--box-shadow);
     }
     .affirmation-text {
         font-family: 'Helvetica', sans-serif;
         font-size: 18px;
-        color: #333333;
+        color: var(--text);
     }
     .stButton button {
-        background-color: #ff0000;
-        color: #ffffff;
+        background-color: var(--button-background);
+        color: var(--button-text);
         font-size: 16px;
         padding: 10px 20px;
         border-radius: 5px;
         margin-top: 20px;
         width: 100%;
     }
+    @media (prefers-color-scheme: dark) {
+        :root {
+            --background: #333333;
+            --text: #ffffff;
+            --box-background: #424242;
+            --box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
+            --button-background: #0084ff;
+            --button-text: #ffffff;
+        }
+    }
+    @media (prefers-color-scheme: light) {
+        :root {
+            --background: #e9e5d9;
+            --text: #333333;
+            --box-background: #ffffff;
+            --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            --button-background: #ff0000;
+            --button-text: #ffffff;
+        }
+    }
     </style>
     """,
     unsafe_allow_html=True
 )
 
+
 col1, col2 = st.columns(2)
 
-st.title("Taylor Swift's Gym Affirmations")
+st.title("Taylor Swift's Affirmations")
 
 with col2:
     st.image("https://www.rollingstone.com/wp-content/uploads/2023/05/GettyImages-1482443875.jpeg?w=1581&h=1054&crop=1")
@@ -66,7 +135,7 @@ with col2:
 with col1:
     st.image("taylor_1.jpg")
 
-context = st.text_input("Tell taylor about your day for context")
+context = st.text_input("Tell taylor about your day for her context")
 
 groq_api_key = os.getenv('groq_api_token')