🎨 Add theme support
- Move root (var) style properties to `/assets/css/themes.scss` - Improve mobile navigation - Create section component for the collapsable sections. - Create logo component, so color can be changed. - Add settings page - Add option to select theme color - Add option to select theme background - Add option to enable/disable multi-colored frames. - Add settings to VueX Store - Persist VueX store in LocalStorage.
This commit is contained in:
3
store/index.js
Normal file
3
store/index.js
Normal file
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
|
||||
}
|
||||
51
store/postwoman.js
Normal file
51
store/postwoman.js
Normal file
@@ -0,0 +1,51 @@
|
||||
export const SETTINGS_KEYS = [
|
||||
/**
|
||||
* The CSS class that should be applied to the root element.
|
||||
* Essentially, the name of the background theme.
|
||||
*/
|
||||
"THEME_CLASS",
|
||||
|
||||
/**
|
||||
* The hex color code for the currently active theme.
|
||||
*/
|
||||
"THEME_COLOR",
|
||||
|
||||
/**
|
||||
* Whether or not THEME_COLOR is considered 'vibrant'.
|
||||
*
|
||||
* For readability reasons, if the THEME_COLOR is vibrant,
|
||||
* any text placed on the theme color will have its color
|
||||
* inverted from white to black.
|
||||
*/
|
||||
"THEME_COLOR_VIBRANT",
|
||||
|
||||
/**
|
||||
* Normally, section frames are multicolored in the UI
|
||||
* to emphasise the different sections.
|
||||
* This setting allows that to be turned off.
|
||||
*/
|
||||
"DISABLE_FRAME_COLORS"
|
||||
];
|
||||
|
||||
export const state = () => ({
|
||||
settings: {}
|
||||
});
|
||||
|
||||
export const mutations = {
|
||||
|
||||
applySetting (state, setting) {
|
||||
if(setting == null || !(setting instanceof Array) || setting.length !== 2)
|
||||
throw new Error("You must provide a setting (array in the form [key, value])");
|
||||
|
||||
let key = setting[0];
|
||||
let value = setting[1];
|
||||
// Do not just remove this check.
|
||||
// Add your settings key to the SETTINGS_KEYS array at the
|
||||
// top of the file.
|
||||
// This is to ensure that application settings remain documented.
|
||||
if(!SETTINGS_KEYS.includes(key)) throw new Error("The settings key does not include the key " + key);
|
||||
|
||||
state.settings[key] = value;
|
||||
}
|
||||
|
||||
};
|
||||
Reference in New Issue
Block a user