-
+
+
+
@@ -11,6 +12,7 @@
diff --git a/src/components/Settings/ThemeSelector.vue b/src/components/Settings/ThemeSelector.vue
index fa7a8e41..7172c703 100644
--- a/src/components/Settings/ThemeSelector.vue
+++ b/src/components/Settings/ThemeSelector.vue
@@ -20,6 +20,7 @@ export default {
props: {
themes: Object,
confTheme: String,
+ userThemes: Array,
},
watch: {
selectedTheme(newTheme) { this.updateTheme(newTheme); },
@@ -29,7 +30,7 @@ export default {
selectedTheme: this.getInitialTheme(),
themeHelper: new ThemeHelper(),
loading: true,
- builtInThemes: Defaults.builtInThemes,
+ builtInThemes: Defaults.builtInThemes.concat(this.userThemes),
};
},
computed: {
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index 19a6d1cc..93b9695b 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -1,13 +1,15 @@
:root {
/* Basic*/
- --background: #0b1021;
- --background-darker: #05070e;
- --primary: #5cabca;
+ --primary: #5cabca; // Main accent color
+ --background: #0b1021; // Page background
+ --background-darker: #05070e; // Used for navigation bar, footer and fills
/* Modified Colors */
--item-group-background: #0b1021cc;
--medium-grey: #5e6474;
+ --item-background: #607d8b33;
+ --item-background-hover: #607d8b4d;
/* Semi-Transparent Black*/
--transparent-70: #000000b3;
@@ -16,21 +18,24 @@
/* Other Variables */
--outline-color: none;
- --curve-factor: 5px;
- --curve-factor-navbar: 16px;
- --dimming-factor: 0.8;
+ --curve-factor: 5px; // Border radius for most components
+ --curve-factor-navbar: 16px; // Border radius for header
+ --dimming-factor: 0.8; // Opacity for semi-transparent components
/* Settings for specific components */
- --item-group-padding: 5px;
+ --item-group-padding: 5px; // Determines width of item-group outline
--item-shadow: 1px 1px 2px #130f23;
- --item-group-shadow: var(--item-shadow);
--item-hover-shadow: 1px 2px 4px #373737;
--item-icon-transform: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
--item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
+ --item-group-shadow: var(--item-shadow);
- --item-background: #607d8b33;
- --item-background-hover: #607d8b4d;
- --settings-text-color: var(--primary);
+ /* Specific components, using variables allows them to be overridden individually */
+ --item-text-color: var(--primary);
+ --item-group-outer-background: var(--primary);
+ --item-group-heading-text-color: var(--item-group-background);
+ --item-group-heading-text-color-hover: var(--background);
--settings-background: var(--background);
+ --settings-text-color: var(--primary);
--search-container-background: var(--background-darker);
}
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index e41bbfa3..e5ea5c35 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -1,26 +1,3 @@
-html[data-theme='nord'] {
- --primary: #D8DEE9;
- --background: #3B4252;
- --background-darker: #2E3440;
- --item-background: #434C5E;
- --item-background-hover: #4C566A;
- .collapsable:nth-child(1n) { background: #BF616A; }
- .collapsable:nth-child(2n) { background: #D08770; }
- .collapsable:nth-child(3n) { background: #EBCB8B; }
- .collapsable:nth-child(4n) { background: #A3BE8C; }
-}
-
-html[data-theme='nord-frost'] {
- --primary: #D8DEE9;
- --background: #3B4252;
- --background-darker: #2E3440;
- --item-background: #434C5E;
- --item-background-hover: #4C566A;
- .collapsable:nth-child(1n) { background: #8FBCBB; }
- .collapsable:nth-child(2n) { background: #88C0D0; }
- .collapsable:nth-child(3n) { background: #81A1C1; }
- .collapsable:nth-child(4n) { background: #5E81AC; }
-}
html[data-theme='callisto'] {
--background: #141b33;
@@ -117,6 +94,30 @@ html[data-theme='high-contrast-dark'] {
--curve-factor: 0px;
}
+html[data-theme='nord'] {
+ --primary: #D8DEE9;
+ --background: #3B4252;
+ --background-darker: #2E3440;
+ --item-background: #434C5E;
+ --item-background-hover: #4C566A;
+ .collapsable:nth-child(1n) { background: #BF616A; }
+ .collapsable:nth-child(2n) { background: #D08770; }
+ .collapsable:nth-child(3n) { background: #EBCB8B; }
+ .collapsable:nth-child(4n) { background: #A3BE8C; }
+}
+
+html[data-theme='nord-frost'] {
+ --primary: #D8DEE9;
+ --background: #3B4252;
+ --background-darker: #2E3440;
+ --item-background: #434C5E;
+ --item-background-hover: #4C566A;
+ .collapsable:nth-child(1n) { background: #8FBCBB; }
+ .collapsable:nth-child(2n) { background: #88C0D0; }
+ .collapsable:nth-child(3n) { background: #81A1C1; }
+ .collapsable:nth-child(4n) { background: #5E81AC; }
+}
+
html[data-theme='material'] {
--primary: #29B6F6;
--settings-text-color: #01579b;
@@ -135,4 +136,30 @@ html[data-theme='material'] {
--item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
--item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65);
--item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
+}
+
+html[data-theme='colorful'] {
+ --primary: #e8eae1;
+ --background: #0b1021;
+ --item-background: #05070e;
+ --item-background-hover: #0b1021;
+ --item-group-background: transparent;
+ --item-group-outer-background: #05070e;
+ --item-group-heading-text-color: #e8eae1;
+ --item-group-heading-text-color-hover: #fff;
+ .item:nth-child(1n) { color: #eb5cad; border: 1px solid #eb5cad; }
+ .item:nth-child(2n) { color: #985ceb; border: 1px solid #985ceb; }
+ .item:nth-child(3n) { color: #5c90eb; border: 1px solid #5c90eb; }
+ .item:nth-child(4n) { color: #5cdfeb; border: 1px solid #5cdfeb; }
+ .item:nth-child(5n) { color: #5ceb8d; border: 1px solid #5ceb8d; }
+ .item:nth-child(6n) { color: #afeb5c; border: 1px solid #afeb5c; }
+ .item:nth-child(7n) { color: #ebb75c; border: 1px solid #ebb75c; }
+ .item:nth-child(8n) { color: #eb615c; border: 1px solid #eb615c; }
+ .item:hover, .item:focus {
+ opacity: 0.85;
+ outline: none;
+ background: currentColor;
+ span { color: #05070e; }
+ svg path { fill: #05070e; }
+ }
}
\ No newline at end of file
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index fe8eab4b..243baad6 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -1,5 +1,7 @@
module.exports = {
- defaultTheme: 'Default',
+ iconSize: 'medium',
+ layout: 'auto',
+ defaultTheme: 'default',
builtInThemes: [
'nord',
'nord-frost',
@@ -13,7 +15,15 @@ module.exports = {
'bee',
'raspberry-jam',
'tiger',
+ 'colorful',
'high-contrast-light',
'high-contrast-dark',
],
+ visibleComponents: {
+ pageTitle: true,
+ navigation: true,
+ searchBar: true,
+ settings: true,
+ footer: true,
+ },
};
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 73c72855..017190c1 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -33,6 +33,7 @@
import SettingsContainer from '@/components/Settings/SettingsContainer.vue';
import ItemGroup from '@/components/LinkItems/ItemGroup.vue';
+import Defaults from '@/utils/defaults';
export default {
name: 'home',
@@ -51,14 +52,14 @@ export default {
}),
computed: {
layoutOrientation: {
- get: () => localStorage.layoutOrientation || 'default',
+ get: () => localStorage.layoutOrientation || Defaults.layout,
set: function setLayout(layout) {
localStorage.setItem('layoutOrientation', layout);
this.layout = layout;
},
},
iconSize: {
- get: () => localStorage.iconSize || 'medium',
+ get: () => localStorage.iconSize || Defaults.iconSize,
set: function setIconSize(iconSize) {
localStorage.setItem('iconSize', iconSize);
this.itemSizeBound = iconSize;