dayowe/sundog-calculator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dark/light/system theme option

Browse Source
This commit is contained in:
Dayowe 2025-06-08 22:00:13 +02:00
parent 4eda60df2a
commit 38ea3669cf
1 changed files with 168 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
dog-food-calculator-widget.js
View File

@ -3,9 +3,16 @@
* Embeddable JavaScript widget for calculating dog's daily calorie requirements * Embeddable JavaScript widget for calculating dog's daily calorie requirements
* by Canine Nutrition and Wellness - https://caninenutritionandwellness.com * by Canine Nutrition and Wellness - https://caninenutritionandwellness.com
* *
* Usage: * Basic Usage:
* <script src="https://yourdomain.com/dog-calculator-widget.js"></script> * <script src="https://yourdomain.com/dog-calculator-widget.js"></script>
* <div id="dog-calorie-calculator"></div> * <div id="dog-calorie-calculator"></div>
*
* Advanced Usage with theme option:
* <script src="https://yourdomain.com/dog-calculator-widget.js"></script>
* <div id="dog-calorie-calculator" data-theme="dark"></div>
*
* Or with JavaScript:
* new DogCalorieCalculatorWidget(container, { theme: 'light' }); // 'light', 'dark', 'system'
*/ */
(function() { (function() {
@ -399,108 +406,215 @@
} }
} }
@media (prefers-color-scheme: dark) { /* Dark theme - manual override */
.dog-calc-widget { .dog-calc-widget.dog-calc-theme-dark {
color: #f5f3f7; color: #f5f3f7;
} }
.dog-calc-section, .dog-calc-widget.dog-calc-theme-dark .dog-calc-section,
.dog-calc-collapsible { .dog-calc-widget.dog-calc-theme-dark .dog-calc-collapsible {
background: #24202d; background: #24202d;
border-color: #433c4f; border-color: #433c4f;
} }
.dog-calc-collapsible-header { .dog-calc-widget.dog-calc-theme-dark .dog-calc-collapsible-header {
background: #312b3b; background: #312b3b;
border-color: #433c4f; border-color: #433c4f;
} }
.dog-calc-collapsible-header:hover { .dog-calc-widget.dog-calc-theme-dark .dog-calc-collapsible-header:hover {
background: #3a3446; background: #3a3446;
} }
.dog-calc-section h2, .dog-calc-widget.dog-calc-theme-dark .dog-calc-section h2,
.dog-calc-collapsible-header h3, .dog-calc-widget.dog-calc-theme-dark .dog-calc-collapsible-header h3,
.dog-calc-form-group label, .dog-calc-widget.dog-calc-theme-dark .dog-calc-form-group label,
.dog-calc-result-label { .dog-calc-widget.dog-calc-theme-dark .dog-calc-result-label {
color: #f5f3f7; color: #f5f3f7;
} }
.dog-calc-form-group select, .dog-calc-widget.dog-calc-theme-dark .dog-calc-form-group select,
.dog-calc-form-group input[type="number"], .dog-calc-widget.dog-calc-theme-dark .dog-calc-form-group input[type="number"],
.dog-calc-form-group input[type="text"] { .dog-calc-widget.dog-calc-theme-dark .dog-calc-form-group input[type="text"] {
background-color: #312b3b; background-color: #312b3b;
border-color: #433c4f; border-color: #433c4f;
color: #f5f3f7; color: #f5f3f7;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
} }
.dog-calc-form-group select option { .dog-calc-widget.dog-calc-theme-dark .dog-calc-form-group select option {
background-color: #312b3b; background-color: #312b3b;
color: #f5f3f7; color: #f5f3f7;
} }
.dog-calc-form-group select:focus, .dog-calc-widget.dog-calc-theme-dark .dog-calc-form-group select:focus,
.dog-calc-form-group input[type="number"]:focus, .dog-calc-widget.dog-calc-theme-dark .dog-calc-form-group input[type="number"]:focus,
.dog-calc-form-group input[type="text"]:focus { .dog-calc-widget.dog-calc-theme-dark .dog-calc-form-group input[type="text"]:focus {
background-color: #312b3b; background-color: #312b3b;
border-color: #f19a5f; border-color: #f19a5f;
} }
.dog-calc-form-group input[readonly] { .dog-calc-widget.dog-calc-theme-dark .dog-calc-form-group input[readonly] {
background-color: #433c4f; background-color: #433c4f;
color: #b8b0c2; color: #b8b0c2;
} }
.dog-calc-results { .dog-calc-widget.dog-calc-theme-dark .dog-calc-results {
background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%); background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
border-color: rgba(241, 154, 95, 0.3); border-color: rgba(241, 154, 95, 0.3);
} }
.dog-calc-result-value { .dog-calc-widget.dog-calc-theme-dark .dog-calc-result-value {
color: #f5f3f7; color: #f5f3f7;
background: rgba(241, 154, 95, 0.2); background: rgba(241, 154, 95, 0.2);
} }
.dog-calc-footer { .dog-calc-widget.dog-calc-theme-dark .dog-calc-footer {
background: #24202d; background: #24202d;
border-color: #433c4f; border-color: #433c4f;
} }
.dog-calc-unit-label { .dog-calc-widget.dog-calc-theme-dark .dog-calc-unit-label {
color: #b8b0c2; color: #b8b0c2;
} }
.dog-calc-unit-label.active { .dog-calc-widget.dog-calc-theme-dark .dog-calc-unit-label.active {
color: #f5f3f7; color: #f5f3f7;
} }
.dog-calc-slider { .dog-calc-widget.dog-calc-theme-dark .dog-calc-slider {
background-color: #433c4f; background-color: #433c4f;
} }
.dog-calc-action-buttons { .dog-calc-widget.dog-calc-theme-dark .dog-calc-action-buttons {
background: #312b3b; background: #312b3b;
border-color: #433c4f; border-color: #433c4f;
} }
.dog-calc-btn { .dog-calc-widget.dog-calc-theme-dark .dog-calc-btn {
background: #433c4f; background: #433c4f;
border-color: #433c4f; border-color: #433c4f;
color: #f5f3f7; color: #f5f3f7;
} }
.dog-calc-btn:hover { .dog-calc-widget.dog-calc-theme-dark .dog-calc-btn:hover {
background: #524a5f; background: #524a5f;
border-color: #524a5f; border-color: #524a5f;
} }
.dog-calc-btn-share:hover { .dog-calc-widget.dog-calc-theme-dark .dog-calc-btn-share:hover {
border-color: #9f5999; border-color: #9f5999;
color: #f19a5f; color: #f19a5f;
} }
.dog-calc-btn-embed:hover { .dog-calc-widget.dog-calc-theme-dark .dog-calc-btn-embed:hover {
border-color: #7fa464;
color: #7fa464;
}
/* System theme - follows user's OS preference */
@media (prefers-color-scheme: dark) {
.dog-calc-widget.dog-calc-theme-system {
color: #f5f3f7;
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-section,
.dog-calc-widget.dog-calc-theme-system .dog-calc-collapsible {
background: #24202d;
border-color: #433c4f;
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-collapsible-header {
background: #312b3b;
border-color: #433c4f;
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-collapsible-header:hover {
background: #3a3446;
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-section h2,
.dog-calc-widget.dog-calc-theme-system .dog-calc-collapsible-header h3,
.dog-calc-widget.dog-calc-theme-system .dog-calc-form-group label,
.dog-calc-widget.dog-calc-theme-system .dog-calc-result-label {
color: #f5f3f7;
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-unit-label {
color: #b8b0c2;
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-unit-label.active {
color: #f5f3f7;
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-slider {
background-color: #433c4f;
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-form-group select,
.dog-calc-widget.dog-calc-theme-system .dog-calc-form-group input[type="number"],
.dog-calc-widget.dog-calc-theme-system .dog-calc-form-group input[type="text"] {
background-color: #312b3b;
border-color: #433c4f;
color: #f5f3f7;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-form-group select option {
background-color: #312b3b;
color: #f5f3f7;
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-form-group select:focus,
.dog-calc-widget.dog-calc-theme-system .dog-calc-form-group input[type="number"]:focus,
.dog-calc-widget.dog-calc-theme-system .dog-calc-form-group input[type="text"]:focus {
background-color: #312b3b;
border-color: #f19a5f;
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-form-group input[readonly] {
background-color: #433c4f;
color: #b8b0c2;
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-results {
background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
border-color: rgba(241, 154, 95, 0.3);
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-result-value {
color: #f5f3f7;
background: rgba(241, 154, 95, 0.2);
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-footer {
background: #24202d;
border-color: #433c4f;
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-action-buttons {
background: #312b3b;
border-color: #433c4f;
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-btn {
background: #433c4f;
border-color: #433c4f;
color: #f5f3f7;
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-btn:hover {
background: #524a5f;
border-color: #524a5f;
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-btn-share:hover {
border-color: #9f5999;
color: #f19a5f;
}
.dog-calc-widget.dog-calc-theme-system .dog-calc-btn-embed:hover {
border-color: #7fa464; border-color: #7fa464;
color: #7fa464; color: #7fa464;
} }
@ -622,16 +736,18 @@
// Calculator class // Calculator class
class DogCalorieCalculatorWidget { class DogCalorieCalculatorWidget {
constructor(container) { constructor(container, options = {}) {
this.container = container; this.container = container;
this.currentMER = 0; this.currentMER = 0;
this.isImperial = false; this.isImperial = false;
this.theme = options.theme || 'system'; // 'light', 'dark', 'system'
this.init(); this.init();
} }
init() { init() {
this.injectStyles(); this.injectStyles();
this.injectHTML(); this.injectHTML();
this.applyTheme();
this.bindEvents(); this.bindEvents();
this.updateUnitLabels(); this.updateUnitLabels();
} }
@ -649,6 +765,17 @@
this.container.innerHTML = widgetTemplate; this.container.innerHTML = widgetTemplate;
} }
applyTheme() {
const widget = this.container.querySelector('.dog-calc-widget');
if (!widget) return;
// Remove existing theme classes
widget.classList.remove('dog-calc-theme-light', 'dog-calc-theme-dark', 'dog-calc-theme-system');
// Apply new theme class
widget.classList.add(`dog-calc-theme-${this.theme}`);
}
bindEvents() { bindEvents() {
const weightInput = this.container.querySelector('#weight'); const weightInput = this.container.querySelector('#weight');
const dogTypeSelect = this.container.querySelector('#dogType'); const dogTypeSelect = this.container.querySelector('#dogType');
@ -956,7 +1083,8 @@
const containers = document.querySelectorAll('#dog-calorie-calculator, .dog-calorie-calculator'); const containers = document.querySelectorAll('#dog-calorie-calculator, .dog-calorie-calculator');
containers.forEach(container => { containers.forEach(container => {
if (!container.dataset.initialized) { if (!container.dataset.initialized) {
new DogCalorieCalculatorWidget(container); const theme = container.dataset.theme || 'system';
new DogCalorieCalculatorWidget(container, { theme });
container.dataset.initialized = 'true'; container.dataset.initialized = 'true';
} }
}); });