diff options
| author | elioat <{ID}+{username}@users.noreply.github.com> | 2025-01-03 09:08:19 -0500 |
|---|---|---|
| committer | elioat <{ID}+{username}@users.noreply.github.com> | 2025-01-03 09:08:19 -0500 |
| commit | f178bfbe124e2a2905ed50bf0f4ca72b91e8f332 (patch) | |
| tree | 6dea312029a964da8f91c9ba557a0b574fd1f3ad /html/matt-chat | |
| parent | c7cf5a85b5b0127c1a29a885e8d38a02e67f2ace (diff) | |
| download | tour-f178bfbe124e2a2905ed50bf0f4ca72b91e8f332.tar.gz | |
*
Diffstat (limited to 'html/matt-chat')
| -rw-r--r-- | html/matt-chat/index.html | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/html/matt-chat/index.html b/html/matt-chat/index.html index 12265cc..8f84363 100644 --- a/html/matt-chat/index.html +++ b/html/matt-chat/index.html @@ -92,6 +92,42 @@ max-height: 300px; /* Reduce max height for mobile */ } } + + body.dark-mode { + background-color: #333; + color: #f7f7f7; + } + + #chat-container.dark-mode { + background-color: #444; + border: 1px solid #555; + } + + #user-input.dark-mode { + background-color: #555; + color: #f7f7f7; + border: 1px solid #666; + } + + #send-button.dark-mode { + background-color: #007BFF; + color: white; + } + + .message.dark-mode { + background-color: #555; + color: #f7f7f7; + } + + .user-message.dark-mode { + background-color: #007BFF; + color: white; + } + + .bot-message.dark-mode { + background-color: #666; + color: #f7f7f7; + } </style> </head> <body> @@ -138,6 +174,13 @@ if (!userMessage) return; + // Check for dark mode toggle command + if (userMessage.toLowerCase() === '/darkmode') { + toggleDarkMode(); + userInput.value = ""; // Clear input after command + return; + } + addMessage(userMessage, "user"); conversationHistory.push({ role: "user", content: userMessage }); // Add user message to history userInput.value = ""; @@ -252,6 +295,37 @@ sendMessage(); } }); + + // Function to toggle dark mode + function toggleDarkMode() { + const body = document.body; + const chatContainer = document.getElementById("chat-container"); + const userInput = document.getElementById("user-input"); + const sendButton = document.getElementById("send-button"); + + body.classList.toggle("dark-mode"); + chatContainer.classList.toggle("dark-mode"); + userInput.classList.toggle("dark-mode"); + sendButton.classList.toggle("dark-mode"); + + // Update message classes + const messages = document.querySelectorAll(".message"); + messages.forEach(message => { + message.classList.toggle("dark-mode"); + }); + + // Save preference to local storage + const isDarkMode = body.classList.contains("dark-mode"); + localStorage.setItem("darkMode", isDarkMode); + } + + // Load dark mode preference from local storage on page load + document.addEventListener("DOMContentLoaded", () => { + const darkModePreference = localStorage.getItem("darkMode"); + if (darkModePreference === "true") { + toggleDarkMode(); // Activate dark mode if preference is set + } + }); </script> </body> </html> |