feat: Füge dunkles Theme und Theme-Switcher hinzu

CHANGELOG.md

@@ -219,3 +219,9 @@ und dieses Projekt adhäriert zu [Semantic Versioning](https://semver.org/lang/d
 
 ## [1.2.18] - 2024-03-19
 # ... 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 

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
 

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['VERSION'] = '1.2.20'
-app.config['DATABASE'] = 'data/customers.db'
+app.config['DATABASE'] = os.path.join(app.instance_path, 'customers.db')
 app.config['DATABASE_TIMEOUT'] = 20
 app.config['DATABASE_POOL_SIZE'] = 5
 

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

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') }}">
+                            <button class="dropdown-item theme-toggle" id="themeToggle">
-                                <i class="bi bi-house"></i> Home
+                                <i class="bi bi-moon-stars"></i> Theme wechseln
-                            </a>
+                            </button>
                         </li>
-                        <li>
+                    </div>
-                            <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 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>