theme blink, default dark

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
 

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)

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>

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);
 	}
 }

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">

settings.html

@@ -10,14 +10,19 @@
 							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>
 		<script src="services/storage.service.js"></script>
 		<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>

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()
 	{

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 {

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>

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);

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)