commit: 575b542db2024ae408a431af923fb8edcb1cdd7b
parent: 111c1ced676da55b5ccd8f119e5f069f53e04958
Author: Shpuld Shpludson <shp@cock.li>
Date: Fri, 28 Feb 2020 17:53:41 +0000
Merge branch 'feat/update-pleroma-themes' into 'develop'
update pleroma-dark and pleroma-light
See merge request pleroma/pleroma-fe!1070
Diffstat:
4 files changed, 421 insertions(+), 3 deletions(-)
diff --git a/src/modules/instance.js b/src/modules/instance.js
@@ -1,5 +1,6 @@
import { set } from 'vue'
import { getPreset, applyTheme } from '../services/style_setter/style_setter.js'
+import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
import { instanceDefaultProperties } from './config.js'
const defaultState = {
@@ -159,7 +160,14 @@ const instance = {
// No need to apply theme if there's user theme already
const { customTheme } = rootState.config
if (customTheme) return
- applyTheme(themeData.theme)
+
+ // New theme presets don't have 'theme' property, they use 'source'
+ const themeSource = themeData.source
+ if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
+ applyTheme(themeSource)
+ } else {
+ applyTheme(themeData.theme)
+ }
})
},
fetchEmoji ({ dispatch, state }) {
diff --git a/static/styles.json b/static/styles.json
@@ -1,6 +1,6 @@
{
- "pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
- "pleroma-light": [ "Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
+ "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"],
diff --git a/static/themes/pleroma-dark.json b/static/themes/pleroma-dark.json
@@ -0,0 +1,191 @@
+{
+ "_pleroma_theme_version": 2,
+ "name": "Pleroma Dark",
+ "source": {
+ "themeEngineVersion": 3,
+ "fonts": {},
+ "shadows": {
+ "buttonHover": [
+ {
+ "x": 0,
+ "y": 0,
+ "blur": "1",
+ "spread": "2",
+ "color": "#b9b9ba",
+ "alpha": "0.4",
+ "inset": true
+ },
+ {
+ "x": 0,
+ "y": 1,
+ "blur": 0,
+ "spread": 0,
+ "color": "#FFFFFF",
+ "alpha": 0.2,
+ "inset": true
+ },
+ {
+ "x": 0,
+ "y": -1,
+ "blur": 0,
+ "spread": 0,
+ "color": "#000000",
+ "alpha": 0.2,
+ "inset": true
+ }
+ ],
+ "buttonPressed": [
+ {
+ "x": 0,
+ "y": 0,
+ "blur": 4,
+ "spread": 0,
+ "color": "#000000",
+ "alpha": 1,
+ "inset": true
+ },
+ {
+ "x": 0,
+ "y": 1,
+ "blur": 0,
+ "spread": 0,
+ "color": "#000000",
+ "alpha": 0.2,
+ "inset": true
+ },
+ {
+ "x": 0,
+ "y": -1,
+ "blur": 0,
+ "spread": 0,
+ "color": "#FFFFFF",
+ "alpha": 0.2,
+ "inset": true
+ },
+ {
+ "x": 0,
+ "y": 0,
+ "blur": "2",
+ "spread": 0,
+ "inset": false,
+ "color": "#000000",
+ "alpha": 1
+ }
+ ],
+ "panelHeader": [
+ {
+ "x": 0,
+ "y": "1",
+ "blur": "3",
+ "spread": 0,
+ "inset": false,
+ "color": "#000000",
+ "alpha": "0.4"
+ },
+ {
+ "x": "0",
+ "y": "1",
+ "blur": "0",
+ "spread": 0,
+ "inset": true,
+ "color": "#ffffff",
+ "alpha": "0.2"
+ }
+ ],
+ "panel": [
+ {
+ "x": "0",
+ "y": "0",
+ "blur": "3",
+ "spread": 0,
+ "color": "#000000",
+ "alpha": "0.5"
+ },
+ {
+ "x": "0",
+ "y": "4",
+ "blur": "6",
+ "spread": "3",
+ "inset": false,
+ "color": "#000000",
+ "alpha": "0.3"
+ }
+ ],
+ "button": [
+ {
+ "x": 0,
+ "y": 0,
+ "blur": 2,
+ "spread": 0,
+ "color": "#000000",
+ "alpha": 1
+ },
+ {
+ "x": 0,
+ "y": 1,
+ "blur": 0,
+ "spread": 0,
+ "color": "#FFFFFF",
+ "alpha": 0.2,
+ "inset": true
+ },
+ {
+ "x": 0,
+ "y": -1,
+ "blur": 0,
+ "spread": 0,
+ "color": "#000000",
+ "alpha": 0.2,
+ "inset": true
+ }
+ ],
+ "topBar": [
+ {
+ "x": 0,
+ "y": "1",
+ "blur": 4,
+ "spread": 0,
+ "color": "#000000",
+ "alpha": "0.4"
+ },
+ {
+ "x": 0,
+ "y": "2",
+ "blur": "7",
+ "spread": 0,
+ "inset": false,
+ "color": "#000000",
+ "alpha": "0.3"
+ }
+ ]
+ },
+ "opacity": {
+ "underlay": "0.6"
+ },
+ "colors": {
+ "bg": "#0f161e",
+ "fg": "#151e2b",
+ "text": "#b9b9ba",
+ "underlay": "#090e14",
+ "accent": "#e2b188",
+ "cBlue": "#81beea",
+ "cRed": "#d31014",
+ "cGreen": "#5dc94a",
+ "cOrange": "#ffc459",
+ "border": "--fg,3",
+ "topBarText": "--text,-9.75",
+ "topBarLink": "--topBarText",
+ "btnToggled": "--accent,-24.2",
+ "alertErrorText": "--text,21.2",
+ "badgeNotification": "#e15932",
+ "badgeNotificationText": "#ffffff"
+ },
+ "radii": {
+ "btn": "3",
+ "input": "3",
+ "panel": "3",
+ "avatar": "3",
+ "attachment": "3"
+ }
+ }
+}
diff --git a/static/themes/pleroma-light.json b/static/themes/pleroma-light.json
@@ -0,0 +1,219 @@
+{
+ "_pleroma_theme_version": 2,
+ "name": "Pleroma Light",
+ "source": {
+ "themeEngineVersion": 3,
+ "fonts": {},
+ "shadows": {
+ "button": [
+ {
+ "x": 0,
+ "y": 0,
+ "blur": 2,
+ "spread": 0,
+ "color": "#000000",
+ "alpha": "0.2"
+ },
+ {
+ "x": 0,
+ "y": 1,
+ "blur": 0,
+ "spread": 0,
+ "color": "#FFFFFF",
+ "alpha": "0.5",
+ "inset": true
+ },
+ {
+ "x": 0,
+ "y": -1,
+ "blur": 0,
+ "spread": 0,
+ "color": "#000000",
+ "alpha": 0.2,
+ "inset": true
+ }
+ ],
+ "buttonHover": [
+ {
+ "x": 0,
+ "y": 0,
+ "blur": "2",
+ "spread": 0,
+ "color": "#000000",
+ "alpha": "0.2"
+ },
+ {
+ "x": 0,
+ "y": "0",
+ "blur": "1",
+ "spread": "2",
+ "color": "#ffc39f",
+ "alpha": "1",
+ "inset": true
+ },
+ {
+ "x": 0,
+ "y": -1,
+ "blur": 0,
+ "spread": 0,
+ "color": "#000000",
+ "alpha": 0.2,
+ "inset": true
+ }
+ ],
+ "input": [
+ {
+ "x": 0,
+ "y": 1,
+ "blur": 0,
+ "spread": 0,
+ "color": "#000000",
+ "alpha": 0.2,
+ "inset": true
+ },
+ {
+ "x": 0,
+ "y": -1,
+ "blur": 0,
+ "spread": 0,
+ "color": "#FFFFFF",
+ "alpha": 0.2,
+ "inset": true
+ },
+ {
+ "x": 0,
+ "y": 0,
+ "blur": "2",
+ "inset": true,
+ "spread": 0,
+ "color": "#000000",
+ "alpha": "0.15"
+ }
+ ],
+ "panel": [
+ {
+ "x": "0",
+ "y": 1,
+ "blur": "3",
+ "spread": 0,
+ "color": "#000000",
+ "alpha": "0.5"
+ },
+ {
+ "x": "0",
+ "y": "3",
+ "blur": "6",
+ "spread": "1",
+ "inset": false,
+ "color": "#000000",
+ "alpha": "0.2"
+ }
+ ],
+ "panelHeader": [
+ {
+ "x": 0,
+ "y": "1",
+ "blur": 0,
+ "spread": 0,
+ "inset": true,
+ "color": "#ffffff",
+ "alpha": "0.5"
+ },
+ {
+ "x": 0,
+ "y": "1",
+ "blur": "3",
+ "spread": 0,
+ "inset": false,
+ "color": "#000000",
+ "alpha": "0.3"
+ }
+ ],
+ "buttonPressed": [
+ {
+ "x": 0,
+ "y": 0,
+ "blur": 4,
+ "spread": 0,
+ "color": "#000000",
+ "alpha": "0.2"
+ },
+ {
+ "x": 0,
+ "y": 1,
+ "blur": "1",
+ "spread": "2",
+ "color": "#000000",
+ "alpha": "0.3",
+ "inset": true
+ },
+ {
+ "x": 0,
+ "y": -1,
+ "blur": 0,
+ "spread": 0,
+ "color": "#FFFFFF",
+ "alpha": 0.2,
+ "inset": true
+ }
+ ],
+ "popup": [
+ {
+ "x": "1",
+ "y": "2",
+ "blur": "2",
+ "spread": 0,
+ "color": "#000000",
+ "alpha": "0.2"
+ },
+ {
+ "x": "1",
+ "y": "3",
+ "blur": "7",
+ "spread": "0",
+ "inset": false,
+ "color": "#000000",
+ "alpha": "0.2"
+ }
+ ],
+ "avatarStatus": [
+ {
+ "x": 0,
+ "y": "1",
+ "blur": "4",
+ "spread": "0",
+ "inset": false,
+ "color": "#000000",
+ "alpha": "0.2"
+ }
+ ]
+ },
+ "opacity": {
+ "underlay": "0.4"
+ },
+ "colors": {
+ "bg": "#f2f6f9",
+ "fg": "#d6dfed",
+ "text": "#304055",
+ "underlay": "#5d6086",
+ "accent": "#f55b1b",
+ "cBlue": "#0095ff",
+ "cRed": "#d31014",
+ "cGreen": "#0fa00f",
+ "cOrange": "#ffa500",
+ "border": "#d8e6f9",
+ "topBarText": "#304055",
+ "topBarLink": "--topBarText",
+ "btnToggled": "--accent,-24.2",
+ "input": "#dee3ed",
+ "badgeNotification": "#e83802"
+ },
+ "radii": {
+ "btn": "3",
+ "input": "3",
+ "panel": "3",
+ "avatar": "3",
+ "attachment": "3"
+ }
+ }
+}
