Dark/light/system theme option
This commit is contained in:
Dayowe
parent
4eda60df2a
commit
38ea3669cf
@ -3,9 +3,16 @@
|
||||
* Embeddable JavaScript widget for calculating dog's daily calorie requirements
|
||||
* by Canine Nutrition and Wellness - https://caninenutritionandwellness.com
|
||||
*
|
||||
* Usage:
|
||||
* Basic Usage:
|
||||
* <script src="https://yourdomain.com/dog-calculator-widget.js"></script>
|
||||
* <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() {
|
||||
@ -399,108 +406,215 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark theme - manual override */
|
||||
.dog-calc-widget.dog-calc-theme-dark {
|
||||
color: #f5f3f7;
|
||||
}
|
||||
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-section,
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-collapsible {
|
||||
background: #24202d;
|
||||
border-color: #433c4f;
|
||||
}
|
||||
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-collapsible-header {
|
||||
background: #312b3b;
|
||||
border-color: #433c4f;
|
||||
}
|
||||
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-collapsible-header:hover {
|
||||
background: #3a3446;
|
||||
}
|
||||
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-section h2,
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-collapsible-header h3,
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-form-group label,
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-result-label {
|
||||
color: #f5f3f7;
|
||||
}
|
||||
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-form-group select,
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-form-group input[type="number"],
|
||||
.dog-calc-widget.dog-calc-theme-dark .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-dark .dog-calc-form-group select option {
|
||||
background-color: #312b3b;
|
||||
color: #f5f3f7;
|
||||
}
|
||||
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-form-group select:focus,
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-form-group input[type="number"]:focus,
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-form-group input[type="text"]:focus {
|
||||
background-color: #312b3b;
|
||||
border-color: #f19a5f;
|
||||
}
|
||||
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-form-group input[readonly] {
|
||||
background-color: #433c4f;
|
||||
color: #b8b0c2;
|
||||
}
|
||||
|
||||
.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%);
|
||||
border-color: rgba(241, 154, 95, 0.3);
|
||||
}
|
||||
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-result-value {
|
||||
color: #f5f3f7;
|
||||
background: rgba(241, 154, 95, 0.2);
|
||||
}
|
||||
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-footer {
|
||||
background: #24202d;
|
||||
border-color: #433c4f;
|
||||
}
|
||||
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-unit-label {
|
||||
color: #b8b0c2;
|
||||
}
|
||||
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-unit-label.active {
|
||||
color: #f5f3f7;
|
||||
}
|
||||
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-slider {
|
||||
background-color: #433c4f;
|
||||
}
|
||||
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-action-buttons {
|
||||
background: #312b3b;
|
||||
border-color: #433c4f;
|
||||
}
|
||||
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-btn {
|
||||
background: #433c4f;
|
||||
border-color: #433c4f;
|
||||
color: #f5f3f7;
|
||||
}
|
||||
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-btn:hover {
|
||||
background: #524a5f;
|
||||
border-color: #524a5f;
|
||||
}
|
||||
|
||||
.dog-calc-widget.dog-calc-theme-dark .dog-calc-btn-share:hover {
|
||||
border-color: #9f5999;
|
||||
color: #f19a5f;
|
||||
}
|
||||
|
||||
.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-widget.dog-calc-theme-system {
|
||||
color: #f5f3f7;
|
||||
}
|
||||
|
||||
.dog-calc-section,
|
||||
.dog-calc-collapsible {
|
||||
.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-collapsible-header {
|
||||
.dog-calc-widget.dog-calc-theme-system .dog-calc-collapsible-header {
|
||||
background: #312b3b;
|
||||
border-color: #433c4f;
|
||||
}
|
||||
|
||||
.dog-calc-collapsible-header:hover {
|
||||
.dog-calc-widget.dog-calc-theme-system .dog-calc-collapsible-header:hover {
|
||||
background: #3a3446;
|
||||
}
|
||||
|
||||
.dog-calc-section h2,
|
||||
.dog-calc-collapsible-header h3,
|
||||
.dog-calc-form-group label,
|
||||
.dog-calc-result-label {
|
||||
.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-form-group select,
|
||||
.dog-calc-form-group input[type="number"],
|
||||
.dog-calc-form-group input[type="text"] {
|
||||
.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-form-group select option {
|
||||
.dog-calc-widget.dog-calc-theme-system .dog-calc-form-group select option {
|
||||
background-color: #312b3b;
|
||||
color: #f5f3f7;
|
||||
}
|
||||
|
||||
.dog-calc-form-group select:focus,
|
||||
.dog-calc-form-group input[type="number"]:focus,
|
||||
.dog-calc-form-group input[type="text"]:focus {
|
||||
.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-form-group input[readonly] {
|
||||
.dog-calc-widget.dog-calc-theme-system .dog-calc-form-group input[readonly] {
|
||||
background-color: #433c4f;
|
||||
color: #b8b0c2;
|
||||
}
|
||||
|
||||
.dog-calc-results {
|
||||
.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-result-value {
|
||||
.dog-calc-widget.dog-calc-theme-system .dog-calc-result-value {
|
||||
color: #f5f3f7;
|
||||
background: rgba(241, 154, 95, 0.2);
|
||||
}
|
||||
|
||||
.dog-calc-footer {
|
||||
.dog-calc-widget.dog-calc-theme-system .dog-calc-footer {
|
||||
background: #24202d;
|
||||
border-color: #433c4f;
|
||||
}
|
||||
|
||||
.dog-calc-unit-label {
|
||||
color: #b8b0c2;
|
||||
}
|
||||
|
||||
.dog-calc-unit-label.active {
|
||||
color: #f5f3f7;
|
||||
}
|
||||
|
||||
.dog-calc-slider {
|
||||
background-color: #433c4f;
|
||||
}
|
||||
|
||||
.dog-calc-action-buttons {
|
||||
.dog-calc-widget.dog-calc-theme-system .dog-calc-action-buttons {
|
||||
background: #312b3b;
|
||||
border-color: #433c4f;
|
||||
}
|
||||
|
||||
.dog-calc-btn {
|
||||
.dog-calc-widget.dog-calc-theme-system .dog-calc-btn {
|
||||
background: #433c4f;
|
||||
border-color: #433c4f;
|
||||
color: #f5f3f7;
|
||||
}
|
||||
|
||||
.dog-calc-btn:hover {
|
||||
.dog-calc-widget.dog-calc-theme-system .dog-calc-btn:hover {
|
||||
background: #524a5f;
|
||||
border-color: #524a5f;
|
||||
}
|
||||
|
||||
.dog-calc-btn-share:hover {
|
||||
.dog-calc-widget.dog-calc-theme-system .dog-calc-btn-share:hover {
|
||||
border-color: #9f5999;
|
||||
color: #f19a5f;
|
||||
}
|
||||
|
||||
.dog-calc-btn-embed:hover {
|
||||
.dog-calc-widget.dog-calc-theme-system .dog-calc-btn-embed:hover {
|
||||
border-color: #7fa464;
|
||||
color: #7fa464;
|
||||
}
|
||||
@ -622,16 +736,18 @@
|
||||
|
||||
// Calculator class
|
||||
class DogCalorieCalculatorWidget {
|
||||
constructor(container) {
|
||||
constructor(container, options = {}) {
|
||||
this.container = container;
|
||||
this.currentMER = 0;
|
||||
this.isImperial = false;
|
||||
this.theme = options.theme || 'system'; // 'light', 'dark', 'system'
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.injectStyles();
|
||||
this.injectHTML();
|
||||
this.applyTheme();
|
||||
this.bindEvents();
|
||||
this.updateUnitLabels();
|
||||
}
|
||||
@ -649,6 +765,17 @@
|
||||
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() {
|
||||
const weightInput = this.container.querySelector('#weight');
|
||||
const dogTypeSelect = this.container.querySelector('#dogType');
|
||||
@ -956,7 +1083,8 @@
|
||||
const containers = document.querySelectorAll('#dog-calorie-calculator, .dog-calorie-calculator');
|
||||
containers.forEach(container => {
|
||||
if (!container.dataset.initialized) {
|
||||
new DogCalorieCalculatorWidget(container);
|
||||
const theme = container.dataset.theme || 'system';
|
||||
new DogCalorieCalculatorWidget(container, { theme });
|
||||
container.dataset.initialized = 'true';
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user