CyberMind-FR
1002c4a53b
Fixed TypeError: Theme.getTheme is not a function error in settings.js
Problem:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- settings.js calls Theme.getTheme() on line 14
- theme.js did not export getTheme() function
- Error: TypeError: Theme.getTheme is not a function
- SecuBox settings page failed to load
Solution:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Added getTheme() function to theme.js module:
- Returns Promise that resolves with theme preference
- Calls API.getTheme() to fetch theme from backend
- Returns 'dark' as fallback if API call fails
- Consistent with other theme module functions
Implementation:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```javascript
/**
* Get theme preference from backend
* @returns {Promise<string>} Theme preference ('dark', 'light', or 'system')
*/
getTheme: function() {
return API.getTheme().then(function(data) {
return data.theme || 'dark';
}).catch(function(err) {
console.error('Failed to load theme preference:', err);
return 'dark';
});
}
```
Module now exports 4 functions:
1. init() - Initialize theme system
2. applyTheme(theme) - Apply theme to page
3. getCurrentTheme() - Get effective theme from DOM
4. getTheme() - Get theme preference from backend (NEW)
Testing:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ Deployed to router
✅ Permissions fixed (644)
✅ Cache cleared
✅ Services restarted
Test URL: https://192.168.8.191/cgi-bin/luci/admin/secubox/settings
Files Modified:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
* luci-app-secubox/htdocs/luci-static/resources/secubox/theme.js (+13 lines)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
77 lines
2.0 KiB
JavaScript
77 lines
2.0 KiB
JavaScript
'use strict';
|
|
'require baseclass';
|
|
'require secubox/api as API';
|
|
|
|
/**
|
|
* SecuBox Theme Manager
|
|
* Manages dark/light/system theme switching across SecuBox and all modules
|
|
* Version: 1.0.0
|
|
*/
|
|
|
|
console.log('🎨 SecuBox Theme Manager v1.0.0 loaded');
|
|
|
|
return baseclass.extend({
|
|
/**
|
|
* Initialize theme system
|
|
* Loads theme preference and applies it to the page
|
|
*/
|
|
init: function() {
|
|
var self = this;
|
|
|
|
return API.getTheme().then(function(data) {
|
|
var themePref = data.theme || 'dark';
|
|
self.applyTheme(themePref);
|
|
|
|
// Listen for system theme changes if preference is 'system'
|
|
if (themePref === 'system' && window.matchMedia) {
|
|
var darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
darkModeQuery.addListener(function() {
|
|
self.applyTheme('system');
|
|
});
|
|
}
|
|
}).catch(function(err) {
|
|
console.error('Failed to load theme preference, using dark theme:', err);
|
|
self.applyTheme('dark');
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Apply theme to the page
|
|
* @param {string} theme - Theme preference: 'dark', 'light', or 'system'
|
|
*/
|
|
applyTheme: function(theme) {
|
|
var effectiveTheme = theme;
|
|
|
|
// If 'system', detect from OS
|
|
if (theme === 'system' && window.matchMedia) {
|
|
effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
}
|
|
|
|
// Apply theme to document root
|
|
document.documentElement.setAttribute('data-theme', effectiveTheme);
|
|
|
|
console.log('🎨 Theme applied:', theme, '(effective:', effectiveTheme + ')');
|
|
},
|
|
|
|
/**
|
|
* Get current effective theme
|
|
* @returns {string} 'dark' or 'light'
|
|
*/
|
|
getCurrentTheme: function() {
|
|
return document.documentElement.getAttribute('data-theme') || 'dark';
|
|
},
|
|
|
|
/**
|
|
* Get theme preference from backend
|
|
* @returns {Promise<string>} Theme preference ('dark', 'light', or 'system')
|
|
*/
|
|
getTheme: function() {
|
|
return API.getTheme().then(function(data) {
|
|
return data.theme || 'dark';
|
|
}).catch(function(err) {
|
|
console.error('Failed to load theme preference:', err);
|
|
return 'dark';
|
|
});
|
|
}
|
|
});
|