From 686e5b7a47d8ce9810a5fe527bb94ab9f820dc29 Mon Sep 17 00:00:00 2001
From: Inc <121856799+Inc44@users.noreply.github.com>
Date: Sun, 9 Feb 2025 09:36:06 +0100
Subject: [PATCH] theme blink, default dark

---
 README.md      |  5 ++++-
 app.js         | 19 -------------------
 chat.html      |  5 +++++
 chat.js        |  2 --
 index.html     |  7 ++++++-
 settings.html  |  7 ++++++-
 settings.js    |  6 +++---
 styles.css     | 10 +++++-----
 translate.html |  7 ++++++-
 translate.js   | 10 ++--------
 ui/state.js    |  6 +++---
 11 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/README.md b/README.md
index 773ca8b..3896903 100644
--- a/README.md
+++ b/README.md
@@ -136,14 +136,17 @@ CoFlu is a comprehensive text manipulation, generation, and comparison tool desi
 
 ## TODOs
 
-- Add No BS response prompt extension.
+- Add more SambaNova models, like R1 or Tulu.
+- Add the No BS response prompt extension.
 - Add Ollama local LLMs support to obtain independence.
 - Add image drag-and-drop or paste (Ctrl+V for image data) into the image upload card.
 - Bring audio support for ChatGPT, Gemini, SambaNova, and Qwen.
 - Enable editing of custom prompts. When a custom prompt is selected, a text input field should reappear, similar to when adding a new custom prompt. Additionally, a delete button should be available.
 - Extend document support to other formats, including PDFs, both for input and translation.
+- Fix card text area height mismatch.
 - Replace LaTeX punctuation inside separate text macros.
 - Rewrite and refactor the entire codebase.
+- Rewrite Gemini without Google Generative AI.
 
 ## License
 
diff --git a/app.js b/app.js
index 6cf1a9d..232c2c0 100644
--- a/app.js
+++ b/app.js
@@ -35,7 +35,6 @@ class App
 			printContainer: document.getElementById('printContainer'),
 			streamingToggle: document.getElementById('streamingToggle'),
 			cleanupToggle: document.getElementById('cleanupToggle'),
-			darkToggle: document.getElementById('darkToggle'),
 			wideToggle: document.getElementById('wideToggle'),
 			wpmContainer: document.getElementById('wpm-container'),
 			wpmDisplay: document.getElementById('wpm')
@@ -92,7 +91,6 @@ class App
 			'translationToggle': ['translation_enabled', false],
 			'streamingToggle': ['streaming_enabled', true],
 			'cleanupToggle': ['cleanup_enabled', true],
-			'darkToggle': ['dark_enabled', true],
 			'wideToggle': ['wide_enabled', false]
 		};
 		Object.entries(toggleSettings)
@@ -112,13 +110,7 @@ class App
 		{
 			this.elements.transcribeLanguage.value = StorageService.load('transcribe_language', 'en');
 		}
-		const isDarkMode = StorageService.load('dark_enabled') === true;
 		const isWideMode = StorageService.load('wide_enabled') === true;
-		document.body.dataset.bsTheme = isDarkMode ? 'dark' : 'light';
-		if (this.elements.darkToggle)
-		{
-			this.elements.darkToggle.checked = isDarkMode;
-		}
 		const contentElement = document.getElementById('content');
 		if (contentElement)
 		{
@@ -179,15 +171,6 @@ class App
 		this.setupPromptHandlers();
 		this.setupMarkdownHandler();
 		this.setupTranscribeHandler();
-		if (this.elements.darkToggle)
-		{
-			this.elements.darkToggle.addEventListener('change', (e) =>
-			{
-				const isDark = e.target.checked;
-				UIState.updateTheme(isDark);
-				StorageService.save('dark_enabled', isDark);
-			});
-		}
 		if (this.elements.wideToggle)
 		{
 			this.elements.wideToggle.addEventListener('change', (e) =>
@@ -363,8 +346,6 @@ class App
 				UIState.updateVideoUploadVisibility(currentModelDetails);
 			}
 		}
-		const isDarkMode = StorageService.load('dark_enabled') === true;
-		UIState.updateTheme(isDarkMode);
 		const isWideMode = StorageService.load('wide_enabled') === true;
 		UIState.updateLayout(isWideMode);
 		if (this.elements.customPromptContainer && this.elements.promptSelect)
diff --git a/chat.html b/chat.html
index 0e5e30a..3a2e41c 100644
--- a/chat.html
+++ b/chat.html
@@ -10,6 +10,11 @@
 							xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
 							<text y='25rem' font-size='480'>📝</text>
 						</svg>">
+		<script>
+			const storedDarkMode = localStorage.getItem('dark_enabled');
+			const isDarkMode = storedDarkMode === 'true' || (storedDarkMode === null && true);
+			document.documentElement.setAttribute('data-bs-theme', isDarkMode ? 'dark' : 'light');
+		</script>
 		<link href="styles.css" rel="stylesheet">
 		<script src="config.js"></script>
 		<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js"></script>
diff --git a/chat.js b/chat.js
index e0213cf..35d5c60 100644
--- a/chat.js
+++ b/chat.js
@@ -3,9 +3,7 @@ class ChatApp
 {
 	init()
 	{
-		const isDarkMode = StorageService.load('dark_enabled') === true;
 		const isWideMode = StorageService.load('wide_enabled') === true;
-		UIState.updateTheme(isDarkMode);
 		UIState.updateLayout(isWideMode);
 	}
 }
diff --git a/index.html b/index.html
index 6befbc2..a7ae471 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,11 @@
 							xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
 							<text y='25rem' font-size='480'>📝</text>
 						</svg>">
+		<script>
+			const storedDarkMode = localStorage.getItem('dark_enabled');
+			const isDarkMode = storedDarkMode === 'true' || (storedDarkMode === null && true);
+			document.documentElement.setAttribute('data-bs-theme', isDarkMode ? 'dark' : 'light');
+		</script>
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css">
 		<link href="styles.css" rel="stylesheet">
 		<script src="config.js"></script>
@@ -29,7 +34,7 @@
 		<script src="ui/state.js"></script>
 		<script src="app.js"></script>
 	</head>
-	<body data-bs-theme="dark">
+	<body>
 		<div id="printContainer"></div>
 		<div class="container" id="content">
 			<nav class="navbar">
diff --git a/settings.html b/settings.html
index fd2224b..29bd287 100644
--- a/settings.html
+++ b/settings.html
@@ -10,6 +10,11 @@
 							xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
 							<text y='25rem' font-size='480'>📝</text>
 						</svg>">
+		<script>
+			const storedDarkMode = localStorage.getItem('dark_enabled');
+			const isDarkMode = storedDarkMode === 'true' || (storedDarkMode === null && true);
+			document.documentElement.setAttribute('data-bs-theme', isDarkMode ? 'dark' : 'light');
+		</script>
 		<link href="styles.css" rel="stylesheet">
 		<script src="config.js"></script>
 		<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js"></script>
@@ -17,7 +22,7 @@
 		<script src="ui/state.js"></script>
 		<script src="settings.js"></script>
 	</head>
-	<body data-bs-theme="dark">
+	<body>
 		<div class="container" id="content">
 			<nav class="navbar">
 				<a id="homePage" href="index.html">📝 CoFlu</a>
diff --git a/settings.js b/settings.js
index 3045d15..990c7b4 100644
--- a/settings.js
+++ b/settings.js
@@ -210,9 +210,9 @@ class SettingsApp
 	}
 	handleDarkToggleChange()
 	{
-		const isDark = this.elements.darkToggle.checked;
-		UIState.updateTheme(isDark);
-		StorageService.save('dark_enabled', isDark);
+		const isDarkMode = this.elements.darkToggle.checked;
+		UIState.updateTheme(isDarkMode);
+		StorageService.save('dark_enabled', isDarkMode);
 	}
 	handleWideToggleChange()
 	{
diff --git a/styles.css b/styles.css
index 75bfe32..0ac3ef4 100644
--- a/styles.css
+++ b/styles.css
@@ -1,19 +1,19 @@
 @import url("https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css");
-body[data-bs-theme="light"] {
+html[data-bs-theme="light"] body {
 background-color: rgb(199, 195, 189);
 color: black;
 }
-body[data-bs-theme="dark"] {
+html[data-bs-theme="dark"] body {
 background-color: rgb(56, 60, 66);
 color: white;
 }
-body[data-bs-theme="dark"] .diff-deletion {
+html[data-bs-theme="dark"] body .diff-deletion {
 background-color: rgb(94, 15, 8);
 }
-body[data-bs-theme="dark"] .diff-insertion {
+html[data-bs-theme="dark"] body .diff-insertion {
 background-color: rgb(15, 87, 46);
 }
-body[data-bs-theme="light"] #homePage {
+html[data-bs-theme="light"] body #homePage {
 color: rgb(30, 35, 40);
 }
 .container {
diff --git a/translate.html b/translate.html
index 4ba73c0..87c07e8 100644
--- a/translate.html
+++ b/translate.html
@@ -10,6 +10,11 @@
 							xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
 							<text y='25rem' font-size='480'>📝</text>
 						</svg>">
+		<script>
+			const storedDarkMode = localStorage.getItem('dark_enabled');
+			const isDarkMode = storedDarkMode === 'true' || (storedDarkMode === null && true);
+			document.documentElement.setAttribute('data-bs-theme', isDarkMode ? 'dark' : 'light');
+		</script>
 		<link href="styles.css" rel="stylesheet">
 		<script src="https://cdn.jsdelivr.net/npm/jszip/dist/jszip.min.js"></script>
 		<script src="config.js"></script>
@@ -20,7 +25,7 @@
 		<script src="ui/state.js"></script>
 		<script src="translate.js"></script>
 	</head>
-	<body data-bs-theme="dark">
+	<body>
 		<div class="container" id="content">
 			<nav class="navbar">
 				<a id="homePage" href="index.html">📝 CoFlu</a>
diff --git a/translate.js b/translate.js
index 0264528..db2677d 100644
--- a/translate.js
+++ b/translate.js
@@ -32,7 +32,8 @@ class TranslateApp
 	{
 		this.loadSettings();
 		this.setupEventListeners();
-		this.updateThemeAndLayout();
+		const isWideMode = StorageService.load('wide_enabled') === true;
+		UIState.updateLayout(isWideMode);
 	}
 	loadSettings()
 	{
@@ -76,13 +77,6 @@ class TranslateApp
 			this.startTranslation();
 		}
 	}
-	updateThemeAndLayout()
-	{
-		const isDarkMode = StorageService.load('dark_enabled') === true;
-		const isWideMode = StorageService.load('wide_enabled') === true;
-		UIState.updateTheme(isDarkMode);
-		UIState.updateLayout(isWideMode);
-	}
 	updateProgress(current, total)
 	{
 		const percentage = Math.round((current / total) * 100);
diff --git a/ui/state.js b/ui/state.js
index e6e3d88..62379b5 100644
--- a/ui/state.js
+++ b/ui/state.js
@@ -18,13 +18,13 @@ const UIState = {
 		elements.translateBtn.textContent = isTranslating ? 'Stop Translation' : 'Start Translation';
 		elements.translateBtn.dataset.translating = isTranslating;
 	},
-	updateTheme(isDark)
+	updateTheme(isDarkMode)
 	{
-		document.body.dataset.bsTheme = isDark ? 'dark' : 'light';
+		document.documentElement.setAttribute('data-bs-theme', isDarkMode ? 'dark' : 'light');
 		const darkToggle = document.getElementById('darkToggle');
 		if (darkToggle)
 		{
-			darkToggle.checked = isDark;
+			darkToggle.checked = isDarkMode;
 		}
 	},
 	updateLayout(isWide)