diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 64de28bc..98fa91e8 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -5,7 +5,7 @@ import {
relativeLuminance
} from 'src/services/color_convert/color_convert.js'
import {
- getThemes
+ getThemeResources
} from 'src/services/style_setter/style_setter.js'
import {
newImporter,
@@ -125,25 +125,9 @@ export default {
created () {
const self = this
- getThemes()
- .then((promises) => {
- return Promise.all(
- Object.entries(promises)
- .map(([k, v]) => v.then(res => [k, res]))
- )
- })
- .then(themes => themes.reduce((acc, [k, v]) => {
- if (v) {
- return {
- ...acc,
- [k]: v
- }
- } else {
- return acc
- }
- }, {}))
+ getThemeResources('/static/styles.json')
.then((themesComplete) => {
- self.availableStyles = themesComplete
+ self.availableStyles = Object.values(themesComplete)
})
},
mounted () {
@@ -412,9 +396,6 @@ export default {
forceUseSource = false
) {
this.dismissWarning()
- if (!source && !theme) {
- throw new Error('Can\'t load theme: empty')
- }
const version = (origin === 'localStorage' && !theme.colors)
? 'l1'
: fileVersion
@@ -494,14 +475,7 @@ export default {
customTheme: theme,
customThemeSource: source
} = this.$store.getters.mergedConfig
- if (!theme && !source) {
- // Anon user or never touched themes
- this.loadTheme(
- this.$store.state.instance.themeData,
- 'defaults',
- confirmLoadSource
- )
- } else {
+ if (theme || source) {
this.loadTheme(
{
theme,
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 2c20e292..0da8d4f0 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -748,11 +748,31 @@
"more_settings": "More settings",
"style": {
"custom_theme_used": "(Custom theme)",
+ "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",
"update_preview": "Update preview",
"themes3": {
"define": "Override",
+ "palette": {
+ "label": "Palette",
+ "import": "Import",
+ "export": "Export",
+ "dark": "Dark mode",
+ "light": "Light mode",
+ "bg": "Panel background",
+ "fg": "Buttons etc.",
+ "text": "Text",
+ "link": "Links",
+ "accent": "Accent color",
+ "cRed": "Red color",
+ "cBlue": "Blue color",
+ "cGreen": "Green color",
+ "cOrange": "Orange color",
+ "extra1": "Extra 1",
+ "extra2": "Extra 2",
+ "extra3": "Extra 3"
+ },
"editor": {
"title": "Style",
"new_style": "New",
@@ -778,23 +798,6 @@
"preserve": "Keep color",
"no-auto": "Disabled"
},
- "palette": {
- "label": "Palette",
- "dark": "Dark mode",
- "light": "Light mode",
- "bg": "Panel background",
- "fg": "Buttons etc.",
- "text": "Text",
- "link": "Links",
- "accent": "Accent color",
- "cRed": "Red color",
- "cBlue": "Blue color",
- "cGreen": "Green color",
- "cOrange": "Orange color",
- "extra1": "Extra 1",
- "extra2": "Extra 2",
- "extra3": "Extra 3"
- },
"components": {
"normal": {
"state": "Normal",
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 57bfe0c6..f52b677c 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -212,6 +212,11 @@ const interfaceMod = {
setLastTimeline ({ commit }, value) {
commit('setLastTimeline', value)
},
+ setPalette ({ dispatch, commit }, { paletteData }) {
+ console.log('PAL', paletteData)
+ commit('setOption', { name: 'userPalette', value: paletteData })
+ dispatch('setTheme', { themeName: null, recompile: true })
+ },
setTheme ({ commit, rootState }, { themeName, themeData, recompile, saveData } = {}) {
const {
theme: instanceThemeName
@@ -221,21 +226,52 @@ const interfaceMod = {
theme: userThemeName,
customTheme: userThemeSnapshot,
customThemeSource: userThemeSource,
+ userPalette,
forceThemeRecompilation,
themeDebug,
theme3hacks
} = rootState.config
+ const userPaletteIss = (() => {
+ if (!userPalette) return null
+ const result = {
+ component: 'Root',
+ directives: {}
+ }
+
+ Object
+ .entries(userPalette)
+ .filter(([k]) => k !== 'name')
+ .forEach(([k, v]) => {
+ let issRootDirectiveName
+ switch (k) {
+ case 'background':
+ issRootDirectiveName = 'bg'
+ break
+ case 'foreground':
+ issRootDirectiveName = 'fg'
+ break
+ default:
+ issRootDirectiveName = k
+ }
+ result.directives['--' + issRootDirectiveName] = 'color | ' + v
+ })
+ return result
+ })()
const actualThemeName = userThemeName || instanceThemeName
const forceRecompile = forceThemeRecompilation || recompile
let promise = null
+ console.log('TEST', actualThemeName, themeData)
+
if (themeData) {
promise = Promise.resolve(normalizeThemeData(themeData))
} else if (themeName) {
promise = getPreset(themeName).then(themeData => normalizeThemeData(themeData))
+ } else if (themeName === null) {
+ promise = Promise.resolve(null)
} else if (userThemeSource || userThemeSnapshot) {
promise = Promise.resolve(normalizeThemeData({
_pleroma_theme_version: 2,
@@ -264,13 +300,14 @@ const interfaceMod = {
promise
.then(realThemeData => {
- const theme2ruleset = convertTheme2To3(realThemeData)
+ const theme2ruleset = realThemeData ? convertTheme2To3(realThemeData) : null
if (saveData) {
commit('setOption', { name: 'theme', value: themeName || actualThemeName })
commit('setOption', { name: 'customTheme', value: realThemeData })
commit('setOption', { name: 'customThemeSource', value: realThemeData })
}
+
const hacks = []
Object.entries(theme3hacks).forEach(([key, value]) => {
@@ -336,9 +373,15 @@ const interfaceMod = {
})
const ruleset = [
- ...theme2ruleset,
...hacks
]
+ if (!theme2ruleset && userPaletteIss) {
+ ruleset.unshift(userPaletteIss)
+ }
+
+ if (theme2ruleset) {
+ ruleset.unshift(...theme2ruleset)
+ }
applyTheme(
ruleset,
@@ -355,6 +398,7 @@ const interfaceMod = {
export default interfaceMod
export const normalizeThemeData = (input) => {
+ console.log(input)
if (Array.isArray(input)) {
const themeData = { colors: {} }
themeData.colors.bg = input[1]
@@ -365,7 +409,7 @@ export const normalizeThemeData = (input) => {
themeData.colors.cGreen = input[6]
themeData.colors.cBlue = input[7]
themeData.colors.cOrange = input[8]
- return generatePreset(themeData).theme
+ return generatePreset(themeData).source || generatePreset(themeData).theme
}
let themeData, themeSource
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index e54a95bf..e75366ea 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -256,13 +256,13 @@ export const applyConfig = (input) => {
body.classList.remove('hidden')
}
-export const getThemes = () => {
+export const getThemeResources = (url) => {
const cache = 'no-store'
- return window.fetch('/static/styles.json', { cache })
+ return window.fetch(url, { cache })
.then((data) => data.json())
- .then((themes) => {
- return Object.entries(themes).map(([k, v]) => {
+ .then((resources) => {
+ return Object.entries(resources).map(([k, v]) => {
let promise = null
if (typeof v === 'object') {
promise = Promise.resolve(v)
@@ -284,10 +284,26 @@ export const getThemes = () => {
return acc
}, {})
})
+ .then((promises) => {
+ return Promise.all(
+ Object.entries(promises)
+ .map(([k, v]) => v.then(res => [k, res]))
+ )
+ })
+ .then(themes => themes.reduce((acc, [k, v]) => {
+ if (v) {
+ return {
+ ...acc,
+ [k]: v
+ }
+ } else {
+ return acc
+ }
+ }, {}))
}
export const getPreset = (val) => {
- return getThemes()
+ return getThemeResources('/static/styles.json')
.then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
.then((theme) => {
const isV1 = Array.isArray(theme)
diff --git a/static/palettes/index.json b/static/palettes/index.json
new file mode 100644
index 00000000..354be96a
--- /dev/null
+++ b/static/palettes/index.json
@@ -0,0 +1,32 @@
+{
+ "pleroma-light": [ "Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
+ "pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
+ "classic-dark": {
+ "name": "Classic Dark",
+ "background": "#161c20",
+ "foreground": "#282e32",
+ "text": "#b9b9b9",
+ "link": "#baaa9c",
+ "cRed": "#d31014",
+ "cBlue": "#0fa00f",
+ "cGreen": "#0095ff",
+ "cOrange": "#ffa500"
+ },
+ "pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"],
+ "tomorrow-night": {
+ "name": "Tomorrow Night",
+ "background": "#1d1f21",
+ "foreground": "#373b41",
+ "link": "#81a2be",
+ "text": "#c5c8c6",
+ "cRed": "#cc6666",
+ "cBlue": "#8abeb7",
+ "cGreen": "#b5bd68",
+ "cOrange": "#de935f",
+ "_cYellow": "#f0c674",
+ "_cPurple": "#b294bb"
+ },
+ "bird": [ "Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8", "#e0245e", "#17bf63", "#1b95e0", "#fab81e"],
+ "ir-black": [ "Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60", "#FF6C60", "#A8FF60", "#96CBFE", "#FFFFB6" ],
+ "monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672", "#F92672", "#a6e22e", "#66d9ef", "#f4bf75" ]
+}
diff --git a/static/styles.json b/static/styles.json
index 23f57c65..2f836a47 100644
--- a/static/styles.json
+++ b/static/styles.json
@@ -1,12 +1,6 @@
{
"pleroma-dark": "/static/themes/pleroma-dark.json",
"pleroma-light": "/static/themes/pleroma-light.json",
- "pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"],
- "classic-dark": [ "Classic Dark", "#161c20", "#282e32", "#b9b9b9", "#baaa9c", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
- "bird": [ "Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8", "#e0245e", "#17bf63", "#1b95e0", "#fab81e"],
- "ir-black": [ "Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60", "#FF6C60", "#A8FF60", "#96CBFE", "#FFFFB6" ],
- "monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672", "#F92672", "#a6e22e", "#66d9ef", "#f4bf75" ],
-
"redmond-xx": "/static/themes/redmond-xx.json",
"redmond-xx-se": "/static/themes/redmond-xx-se.json",
"redmond-xxi": "/static/themes/redmond-xxi.json",