From ecf4c0ee0cb6a48b5b4766f8aedcf888bcda4e13 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Mon, 24 Mar 2025 08:29:56 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20F=C3=BCge=20dunkles=20Theme=20und=20The?=
 =?UTF-8?q?me-Switcher=20hinzu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md         |  8 +++-
 README.md            |  2 +-
 app.py               |  4 +-
 static/css/style.css | 87 ++++++++++++++++++++++++++++++++++++++++++++
 templates/index.html | 52 ++++++++++++++++++--------
 5 files changed, 134 insertions(+), 19 deletions(-)
 create mode 100644 static/css/style.css

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b0f7d59..9758ed9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -218,4 +218,10 @@ und dieses Projekt adhäriert zu [Semantic Versioning](https://semver.org/lang/d
 - Version auf 1.2.19 aktualisiert
 
 ## [1.2.18] - 2024-03-19
-# ... existing code ... 
\ No newline at end of file
+# ... existing code ...
+
+## [v1.2.20] - 2024-03-19
+### Hinzugefügt
+- Dunkles Theme für bessere Lesbarkeit bei schlechten Lichtverhältnissen
+- Theme-Switcher im Hamburger-Menü
+- Automatische Speicherung der Theme-Präferenz 
\ No newline at end of file
diff --git a/README.md b/README.md
index 3c25330..6a0af4f 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ Eine einfache und effiziente Kundensuche für medisoftware Kunden.
 
 ## Version
 
-Aktuelle Version: 1.2.19
+Aktuelle Version: 1.2.20
 
 ## Installation
 
diff --git a/app.py b/app.py
index b3e4c54..72d96b2 100644
--- a/app.py
+++ b/app.py
@@ -15,8 +15,8 @@ import markdown2
 app = Flask(__name__, static_folder='static')
 app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY', 'dev')
 app.config['ALLOWED_IP_RANGES'] = os.getenv('ALLOWED_IP_RANGES', '192.168.0.0/16,10.0.0.0/8').split(',')
-app.config['VERSION'] = '1.2.19'
-app.config['DATABASE'] = 'data/customers.db'
+app.config['VERSION'] = '1.2.20'
+app.config['DATABASE'] = os.path.join(app.instance_path, 'customers.db')
 app.config['DATABASE_TIMEOUT'] = 20
 app.config['DATABASE_POOL_SIZE'] = 5
 
diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..9ecadf5
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,87 @@
+:root {
+    --primary-color: #007bff;
+    --secondary-color: #6c757d;
+    --background-color: #ffffff;
+    --text-color: #212529;
+    --card-bg: #ffffff;
+    --border-color: #dee2e6;
+    --hover-bg: #f8f9fa;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="dark"] {
+    --primary-color: #0d6efd;
+    --secondary-color: #adb5bd;
+    --background-color: #212529;
+    --text-color: #f8f9fa;
+    --card-bg: #343a40;
+    --border-color: #495057;
+    --hover-bg: #495057;
+    --shadow-color: rgba(0, 0, 0, 0.3);
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.card {
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    box-shadow: 0 2px 4px var(--shadow-color);
+}
+
+.table {
+    color: var(--text-color);
+}
+
+.table thead th {
+    background-color: var(--card-bg);
+    border-bottom-color: var(--border-color);
+    color: var(--text-color);
+}
+
+.table td {
+    border-color: var(--border-color);
+}
+
+.table-hover tbody tr:hover {
+    background-color: var(--hover-bg);
+}
+
+.modal-content {
+    background-color: var(--card-bg);
+    color: var(--text-color);
+    border-color: var(--border-color);
+}
+
+.modal-header {
+    border-bottom-color: var(--border-color);
+}
+
+.modal-footer {
+    border-top-color: var(--border-color);
+}
+
+.form-control {
+    background-color: var(--card-bg);
+    border-color: var(--border-color);
+    color: var(--text-color);
+}
+
+.form-control:focus {
+    background-color: var(--card-bg);
+    color: var(--text-color);
+}
+
+.btn-outline-secondary {
+    color: var(--text-color);
+    border-color: var(--border-color);
+}
+
+.btn-outline-secondary:hover {
+    background-color: var(--hover-bg);
+    color: var(--text-color);
+} 
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 8b09ea8..4e28a8d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -38,23 +38,22 @@
                     <button class="btn btn-link text-dark" type="button" id="menuButton" data-bs-toggle="dropdown" aria-expanded="false">
                         <i class="bi bi-list fs-4"></i>
                     </button>
-                    <ul class="dropdown-menu" aria-labelledby="menuButton">
+                    <div class="dropdown-menu">
+                        <a class="dropdown-item" href="{{ url_for('index') }}">
+                            <i class="bi bi-house"></i> Home
+                        </a>
+                        <a class="dropdown-item" href="{{ url_for('upload') }}">
+                            <i class="bi bi-cloud-upload"></i> CSV-Dateien hochladen
+                        </a>
+                        <a class="dropdown-item" href="{{ url_for('readme') }}">
+                            <i class="bi bi-book"></i> README
+                        </a>
                         <li>
-                            <a class="dropdown-item" href="{{ url_for('index') }}">
-                                <i class="bi bi-house"></i> Home
-                            </a>
+                            <button class="dropdown-item theme-toggle" id="themeToggle">
+                                <i class="bi bi-moon-stars"></i> Theme wechseln
+                            </button>
                         </li>
-                        <li>
-                            <a class="dropdown-item" href="{{ url_for('upload') }}">
-                                <i class="bi bi-cloud-upload"></i> CSV-Dateien hochladen
-                            </a>
-                        </li>
-                        <li>
-                            <a class="dropdown-item" href="{{ url_for('readme') }}">
-                                <i class="bi bi-book"></i> README
-                            </a>
-                        </li>
-                    </ul>
+                    </div>
                 </div>
                 <div class="text-center">
                     <a href="https://medisoftware.de" target="_blank" rel="noopener noreferrer">
@@ -156,5 +155,28 @@
 
     <script src="{{ url_for('static', filename='js/main.js') }}"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // Theme Switcher
+        const themeToggle = document.getElementById('themeToggle');
+        const icon = themeToggle.querySelector('i');
+        
+        // Theme aus dem localStorage laden
+        const savedTheme = localStorage.getItem('theme') || 'light';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        updateThemeIcon(savedTheme);
+
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+            
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            updateThemeIcon(newTheme);
+        });
+
+        function updateThemeIcon(theme) {
+            icon.className = theme === 'light' ? 'bi bi-moon-stars' : 'bi bi-sun';
+        }
+    </script>
 </body>
 </html> 
\ No newline at end of file