diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index ddd501f2..076bb995 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -172,8 +172,8 @@ const AppearanceTab = {
const result = this.mergedConfig.styleCustomData
.filter(x => x.component.startsWith('@palette'))
.map(x => {
+ const { variant, directives } = x
const {
- variant,
bg,
fg,
text,
@@ -184,10 +184,10 @@ const AppearanceTab = {
cGreen,
cOrange,
wallpaper
- } = x
+ } = directives
const result = {
- name: `${meta.name}: ${variant}`,
+ name: `${meta.directives.name || this.$t('settings.style.themes3.palette.imported')}: ${variant}`,
bg,
fg,
text,
@@ -240,12 +240,12 @@ const AppearanceTab = {
return themeVersion
},
isCustomThemeUsed () {
- const { theme } = this.mergedConfig
- return theme === 'custom'
+ const { customTheme, customThemeSource } = this.mergedConfig
+ return customTheme != null || customThemeSource != null
},
isCustomStyleUsed (name) {
- const { style } = this.mergedConfig
- return style === 'custom'
+ const { styleCustomData } = this.mergedConfig
+ return styleCustomData != null
},
...SharedComputedObject()
},
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 6ec84eb2..32e0a37f 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -102,7 +102,7 @@
@click="() => setPaletteCustom(p)"
>
{
const tabSwitcher = getCurrentInstance().parent.ctx
- console.log('TABSW', tabSwitcher)
return tabSwitcher ? tabSwitcher.isActive('style') : false
})
@@ -109,10 +108,12 @@ export default {
const metaRule = computed(() => ({
component: '@meta',
- name: exports.name.value,
- author: exports.author.value,
- license: exports.license.value,
- website: exports.website.value
+ directives: {
+ name: exports.name.value,
+ author: exports.author.value,
+ license: exports.license.value,
+ website: exports.website.value
+ }
}))
// ## Palette stuff
@@ -190,9 +191,9 @@ export default {
return {
component: '@palette',
variant: name,
- ...Object
+ directives: Object
.entries(rest)
- .filter(([k, v]) => v)
+ .filter(([k, v]) => v && k)
.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
}
})
@@ -203,6 +204,7 @@ export default {
return palettes.map(({ name, ...palette }) => {
const entries = Object
.entries(palette)
+ .filter(([k, v]) => v && k)
.map(([slot, data]) => ` ${slot}: ${data};`)
.join('\n')
@@ -561,7 +563,9 @@ export default {
const virtualDirectivesOut = computed(() => {
return [
'Root {',
- ...virtualDirectives.value.map(vd => ` --${vd.name}: ${vd.valType} | ${vd.value};`),
+ ...virtualDirectives.value
+ .filter(vd => vd.name && vd.valType && vd.value)
+ .map(vd => ` --${vd.name}: ${vd.valType} | ${vd.value};`),
'}'
].join('\n')
})
diff --git a/src/i18n/en.json b/src/i18n/en.json
index e77e5637..a34e5cf9 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -750,6 +750,7 @@
"more_settings": "More settings",
"style": {
"custom_theme_used": "(Custom theme)",
+ "custom_style_used": "(Custom style)",
"stock_theme_used": "(Stock theme)",
"themes2_outdated": "Editor for Themes V2 is being phased out and will eventually be replaced with a new one that takes advantage of new Themes V3 engine. It should still work but experience might be degraded and inconsistent.",
"appearance_tab_note": "Changes on this tab do not affect the theme used, so exported theme will be different from what seen in the UI",
@@ -775,7 +776,8 @@
"v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes",
"bundled": "Bundled palettes",
"style": "Palettes provided by selected style",
- "user": "Custom palette"
+ "user": "Custom palette",
+ "imported": "Imported"
},
"editor": {
"title": "Style",
diff --git a/static/styles/Redmond DX.json b/static/styles/Redmond DX.json
new file mode 100644
index 00000000..39018aa7
--- /dev/null
+++ b/static/styles/Redmond DX.json
@@ -0,0 +1,127 @@
+@meta {
+ name: Redmond DX;
+ author: HJ;
+ license: WTFPL;
+ website: ebin.club;
+}
+
+@palette.Modern {
+ bg: #D3CFC7;
+ fg: #092369;
+ text: #000000;
+ link: #0000FF;
+ accent: #A5C9F0;
+ cRed: #FF3000;
+ cBlue: #009EFF;
+ cGreen: #309E00;
+ cOrange: #FFCE00;
+}
+
+@palette.Classic {
+ bg: #BFBFBF;
+ fg: #000180;
+ text: #000000;
+ link: #0000FF;
+ accent: #A5C9F0;
+ cRed: #FF0000;
+ cBlue: #2E2ECE;
+ cGreen: #007E00;
+ cOrange: #CE8F5F;
+}
+
+@palette.Vapor {
+ bg: #F0ADCD;
+ fg: #a177ee;
+ text: #602040;
+ link: #086866;
+ accent: #9DF7C8;
+ cRed: #ff0088;
+ cBlue: #20c8e9;
+ cGreen: #0fd27d;
+ cOrange: #ECE646;
+}
+
+Root {
+ --gradientColor: color | $brightness(--fg, 20);
+ --inputColor: color | #FFFFFF;
+ --bevelLight: color | $brightness(--bg 50);
+ --bevelDark: color | $brightness(--bg -20);
+ --bevelExtraDark: color | #404040;
+ --buttonDefaultBevel: shadow | $borderSide(--bevelExtraDark bottom-right 1 1), $borderSide(--bevelLight top-left 1 1), $borderSide(--bevelDark bottom-right 1 2);
+ --buttonPressedBevel: shadow | inset 0 0 0 1 #000000 / 1 #Outer , inset 0 0 0 2 --bevelExtraDark / 1 #inner;
+ --defaultInputBevel: shadow | $borderSide(--bevelLight bottom-right 1), $borderSide(--bevelDark top-left 1 1), $borderSide(--bg bottom-right 1 2), $borderSide(--bevelExtraDark top-left 1 2);
+}
+
+Button:toggled {
+ background: --bg;
+ shadow: --buttonPressedBevel
+}
+
+Button:focused {
+ shadow: --buttonDefaultBevel, 0 0 0 1 #000000 / 1
+}
+
+Button:pressed {
+ shadow: --buttonPressedBevel
+}
+
+Button:hover {
+ shadow: --buttonDefaultBevel;
+ background: --bg
+}
+
+Button {
+ shadow: --buttonDefaultBevel;
+ background: --bg;
+ roundness: 0
+}
+
+Button:pressed:hover {
+ shadow: --buttonPressedBevel
+}
+
+Input {
+ background: $mod(--bg -80);
+ shadow: --defaultInputBevel;
+ roundness: 0
+}
+
+Panel {
+ shadow: --buttonDefaultBevel;
+ roundness: 0
+}
+
+PanelHeader {
+ shadow: inset -1100 0 1000 -1000 --gradientColor / 1 #Gradient ;
+ background: --fg
+}
+
+Tab:hover {
+ background: --bg;
+ shadow: --buttonDefaultBevel
+}
+
+Tab:active {
+ background: --bg
+}
+
+Tab:active:hover {
+ background: --bg
+}
+
+Tab:active:hover:disabled {
+ background: --bg
+}
+
+Tab:hover:disabled {
+ background: --bg
+}
+
+Tab:disabled {
+ background: --bg
+}
+
+Tab {
+ background: --bg;
+ shadow: --buttonDefaultBevel
+}
diff --git a/static/styles/index.json b/static/styles/index.json
new file mode 100644
index 00000000..2f1a3e8e
--- /dev/null
+++ b/static/styles/index.json
@@ -0,0 +1,3 @@
+{
+ "Redmond DX": "/static/styles/Redmond DX.json"
+}