Page MenuHomePhorge
Files F85824951

No OneTemporary
Actions

Authored By
Unknown
Size
24 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 235ccfbb27..3f6195723a 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -1,94 +1,52 @@
import StyleSwitcher from '../style_switcher/style_switcher.vue'
import { filter, trim } from 'lodash'
const settings = {
data () {
return {
hideAttachmentsLocal: this.$store.state.config.hideAttachments,
hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
hideNsfwLocal: this.$store.state.config.hideNsfw,
muteWordsString: this.$store.state.config.muteWords.join('\n'),
autoLoadLocal: this.$store.state.config.autoLoad,
streamingLocal: this.$store.state.config.streaming,
hoverPreviewLocal: this.$store.state.config.hoverPreview,
- bgColorLocal: '',
- fgColorLocal: '',
- textColorLocal: '',
- linkColorLocal: ''
}
},
components: {
StyleSwitcher
},
computed: {
user () {
return this.$store.state.users.currentUser
}
},
- mounted() {
- const rgbstr2hex = (rgb) => {
- if (rgb[0] === '#')
- return rgb
- rgb = rgb.match(/\d+/g)
- return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
- }
- this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors['base00'])
- this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors['base02'])
- this.textColorLocal = rgbstr2hex(this.$store.state.config.colors['base05'])
- this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors['base08'])
- },
- methods: {
- setCustomTheme () {
- if (!this.bgColorLocal && !this.fgColorLocal && !this.linkColorLocal) {
- // reset to picked themes
- }
- const rgb = (hex) => {
- const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
- return result ? {
- r: parseInt(result[1], 16),
- g: parseInt(result[2], 16),
- b: parseInt(result[3], 16)
- } : null
- }
- const bgRgb = rgb(this.bgColorLocal)
- const fgRgb = rgb(this.fgColorLocal)
- const textRgb = rgb(this.textColorLocal)
- const linkRgb = rgb(this.linkColorLocal)
- if (bgRgb && fgRgb && linkRgb) {
- console.log('all colors ok')
- this.$store.dispatch('setOption', { name: 'customTheme', value: {
- fg: fgRgb,
- bg: bgRgb,
- text: textRgb,
- link: linkRgb
- }})
- }
- }
- },
+
+
watch: {
hideAttachmentsLocal (value) {
this.$store.dispatch('setOption', { name: 'hideAttachments', value })
},
hideAttachmentsInConvLocal (value) {
this.$store.dispatch('setOption', { name: 'hideAttachmentsInConv', value })
},
hideNsfwLocal (value) {
this.$store.dispatch('setOption', { name: 'hideNsfw', value })
},
autoLoadLocal (value) {
this.$store.dispatch('setOption', { name: 'autoLoad', value })
},
streamingLocal (value) {
this.$store.dispatch('setOption', { name: 'streaming', value })
},
hoverPreviewLocal (value) {
this.$store.dispatch('setOption', { name: 'hoverPreview', value })
},
muteWordsString (value) {
value = filter(value.split('\n'), (word) => trim(word).length > 0)
this.$store.dispatch('setOption', { name: 'muteWords', value })
}
}
}
export default settings
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 8d9c33607e..8fdd09deb6 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -1,139 +1,81 @@
<template>
<div class="settings panel panel-default base00-background">
<div class="panel-heading base02-background base04">
{{$t('settings.settings')}}
</div>
<div class="panel-body">
<div class="setting-item">
<h2>{{$t('settings.theme')}}</h2>
<style-switcher></style-switcher>
</div>
- <div class="setting-item">
- <h3>Custom theme</h3>
- <p>Enter hex color codes (#aabbcc) into the text fields.</p>
- <div class="color-container">
- <div class="color-item">
- <label for="bgcolor" class="base04">Background</label>
- <input id="bgcolor" class="theme-color-in" type="text" v-model="bgColorLocal">
- </div>
- <div class="color-item">
- <label for="fgcolor" class="base04">Foreground</label>
- <input id="fgcolor" class="theme-color-in" type="text" v-model="fgColorLocal">
- </div>
- <div class="color-item">
- <label for="textcolor" class="base04">Text</label>
- <input id="textcolor" class="theme-color-in" type="text" v-model="textColorLocal">
- </div>
- <div class="color-item">
- <label for="linkcolor" class="base04">Links</label>
- <input id="linkcolor" class="theme-color-in" type="text" v-model="linkColorLocal">
- </div>
- </div>
- <div>
- <div class="panel">
- <div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div>
- <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
- <h4>Content</h4>
- <br>
- A bunch of more content and
- <a :style="{ 'color': linkColorLocal }">a nice lil' link</a>
- <br>
- <button class="btn" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Button</button>
- </div>
- </div>
- </div>
- <button class="btn base02-background base04" @click="setCustomTheme">Submit</button>
- </div>
<div class="setting-item">
<h2>{{$t('settings.filtering')}}</h2>
<p>{{$t('settings.filtering_explanation')}}</p>
<textarea id="muteWords" v-model="muteWordsString"></textarea>
</div>
<div class="setting-item">
<h2>{{$t('settings.attachments')}}</h2>
<ul class="setting-list">
<li>
<input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
<label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label>
</li>
<li>
<input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal">
<label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label>
</li>
<li>
<input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
<label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
</li>
<li>
<input type="checkbox" id="autoLoad" v-model="autoLoadLocal">
<label for="autoLoad">{{$t('settings.autoload')}}</label>
</li>
<li>
<input type="checkbox" id="streaming" v-model="streamingLocal">
<label for="streaming">{{$t('settings.streaming')}}</label>
</li>
<li>
<input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
<label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
</li>
</ul>
</div>
</div>
</div>
</template>
<script src="./settings.js">
</script>
<style lang="scss">
.setting-item {
margin: 1em 1em 1.4em;
textarea {
width: 100%;
height: 100px;
}
.old-avatar {
width: 128px;
border-radius: 5px;
}
.new-avatar {
object-fit: cover;
width: 128px;
height: 128px;
border-radius: 5px;
}
.btn {
margin-top: 1em;
min-height: 28px;
width: 10em;
}
}
.setting-list {
list-style-type: none;
}
-
- .color-container {
- display: flex;
- }
-
- .color-item {
- max-width: 7em;
- display:flex;
- flex-wrap:wrap;
- }
-
- .theme-color-in {
- max-width: 6em;
- border-radius: 2px;
- border: 0;
- padding: 5px;
- margin: 5px 0 5px 0;
- }
-
- .theme-preview-content {
- padding: 20px;
- }
</style>
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index d265572dd6..8b769494d5 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -1,19 +1,76 @@
+import { map, compose } from 'lodash'
+
export default {
data () {
return {
availableStyles: [],
- selected: this.$store.state.config.theme
+ selected: this.$store.state.config.theme,
+ bgColorLocal: '',
+ fgColorLocal: '',
+ textColorLocal: '',
+ linkColorLocal: ''
}
},
created () {
const self = this
- window.fetch('/static/css/themes.json')
+
+ window.fetch('/static/styles.json')
.then((data) => data.json())
- .then((themes) => { self.availableStyles = themes })
+ .then((themes) => {
+ console.log(themes)
+ self.availableStyles = themes
+ })
+ },
+ mounted() {
+ const rgbstr2hex = (rgb) => {
+ if (rgb[0] === '#')
+ return rgb
+ rgb = rgb.match(/\d+/g)
+ return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
+ }
+ this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors['base00'])
+ this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors['base02'])
+ console.log(this.$store.state.config.colors['base02'])
+ console.log(this.fgColorLocal)
+ this.textColorLocal = rgbstr2hex(this.$store.state.config.colors['base05'])
+ this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors['base08'])
+ },
+ methods: {
+ setCustomTheme () {
+ if (!this.bgColorLocal && !this.fgColorLocal && !this.linkColorLocal) {
+ // reset to picked themes
+ }
+ const rgb = (hex) => {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return result ? {
+ r: parseInt(result[1], 16),
+ g: parseInt(result[2], 16),
+ b: parseInt(result[3], 16)
+ } : null
+ }
+ const bgRgb = rgb(this.bgColorLocal)
+ const fgRgb = rgb(this.fgColorLocal)
+ const textRgb = rgb(this.textColorLocal)
+ const linkRgb = rgb(this.linkColorLocal)
+ if (bgRgb && fgRgb && linkRgb) {
+ console.log('all colors ok')
+ this.$store.dispatch('setOption', { name: 'customTheme', value: {
+ fg: fgRgb,
+ bg: bgRgb,
+ text: textRgb,
+ link: linkRgb
+ }})
+ }
+ }
},
watch: {
selected () {
- this.$store.dispatch('setOption', { name: 'theme', value: this.selected })
+ console.log(this.selected)
+ this.bgColorLocal = this.selected[1]
+ this.fgColorLocal = this.selected[2]
+ this.textColorLocal = this.selected[3]
+ this.linkColorLocal = this.selected[4]
+ //this.$store.dispatch('setOption', { name: 'theme', value: this.selected })
}
}
}
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index bfd8cf8648..074b38301a 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -1,13 +1,71 @@
<template>
- <select v-model="selected" class="style-switcher">
- <option v-for="style in availableStyles" >{{style}}</option>
- </select>
+ <div>
+ <select v-model="selected" class="style-switcher">
+ <option v-for="style in availableStyles" :value="style">{{style[0]}}</option>
+ </select>
+ <h3>Custom theme</h3>
+ <p>Enter hex color codes (#aabbcc) into the text fields.</p>
+ <div class="color-container">
+ <div class="color-item">
+ <label for="bgcolor" class="base04">Background</label>
+ <input id="bgcolor" class="theme-color-in" type="text" v-model="bgColorLocal">
+ </div>
+ <div class="color-item">
+ <label for="fgcolor" class="base04">Foreground</label>
+ <input id="fgcolor" class="theme-color-in" type="text" v-model="fgColorLocal">
+ </div>
+ <div class="color-item">
+ <label for="textcolor" class="base04">Text</label>
+ <input id="textcolor" class="theme-color-in" type="text" v-model="textColorLocal">
+ </div>
+ <div class="color-item">
+ <label for="linkcolor" class="base04">Links</label>
+ <input id="linkcolor" class="theme-color-in" type="text" v-model="linkColorLocal">
+ </div>
+ </div>
+ <div>
+ <div class="panel">
+ <div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div>
+ <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
+ <h4>Content</h4>
+ <br>
+ A bunch of more content and
+ <a :style="{ 'color': linkColorLocal }">a nice lil' link</a>
+ <br>
+ <button class="btn" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Button</button>
+ </div>
+ </div>
+ </div>
+ <button class="btn base02-background base04" @click="setCustomTheme">Submit</button>
+ </div>
</template>
<script src="./style_switcher.js"></script>
<style lang="scss">
.style-switcher {
margin-right: 1em;
}
+
+ .color-container {
+ display: flex;
+ }
+
+ .color-item {
+ max-width: 7em;
+ display:flex;
+ flex-wrap:wrap;
+ }
+
+ .theme-color-in {
+ max-width: 6em;
+ border-radius: 2px;
+ border: 0;
+ padding: 5px;
+ margin: 5px 0 5px 0;
+ }
+
+ .theme-preview-content {
+ padding: 20px;
+ }
</style>
diff --git a/src/modules/config.js b/src/modules/config.js
index 1811faa82f..9a62905e47 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -1,44 +1,43 @@
import { set } from 'vue'
import StyleSetter from '../services/style_setter/style_setter.js'
const defaultState = {
name: 'Pleroma FE',
colors: {},
hideAttachments: false,
hideAttachmentsInConv: false,
hideNsfw: true,
autoLoad: true,
streaming: false,
hoverPreview: true,
muteWords: []
}
const config = {
state: defaultState,
mutations: {
setOption (state, { name, value }) {
set(state, name, value)
}
},
actions: {
setPageTitle ({state}, option = '') {
document.title = `${option} ${state.name}`
},
setOption ({ commit, dispatch }, { name, value }) {
commit('setOption', {name, value})
switch (name) {
case 'name':
dispatch('setPageTitle')
break
case 'theme':
- const fullPath = `/static/css/${value}`
- StyleSetter.setStyle(fullPath, null, commit)
+ StyleSetter.setPreset(value, commit)
break
case 'customTheme':
- StyleSetter.setStyle(null, value, commit)
+ StyleSetter.setColors(value, commit)
}
}
}
}
export default config
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 1633c43378..bbb2c5108b 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,109 +1,145 @@
import { times, map } from 'lodash'
-const setStyle = (href, col, commit) => {
+// While this is not used anymore right now, I left it in if we want to do custom
+// styles that aren't just colors, so user can pick from a few different distinct
+// styles as well as set their own colors in the future.
+
+const setStyle = (href, commit) => {
/***
What's going on here?
I want to make it easy for admins to style this application. To have
a good set of default themes, I chose the system from base16
(https://chriskempson.github.io/base16/) to style all elements. They
all have the base00..0F classes. So the only thing an admin needs to
do to style Pleroma is to change these colors in that one css file.
Some default things (body text color, link color) need to be set dy-
namically, so this is done here by waiting for the stylesheet to be
loaded and then creating an element with the respective classes.
It is a bit weird, but should make life for admins somewhat easier.
***/
const head = document.head
const body = document.body
body.style.display = 'none'
const cssEl = document.createElement('link')
cssEl.setAttribute('rel', 'stylesheet')
cssEl.setAttribute('href', href)
head.appendChild(cssEl)
const setDynamic = () => {
const baseEl = document.createElement('div')
body.appendChild(baseEl)
let colors = {}
times(16, (n) => {
const name = `base0${n.toString(16).toUpperCase()}`
baseEl.setAttribute('class', name)
const color = window.getComputedStyle(baseEl).getPropertyValue('color')
colors[name] = color
})
commit('setOption', { name: 'colors', value: colors })
body.removeChild(baseEl)
const styleEl = document.createElement('style')
head.appendChild(styleEl)
const styleSheet = styleEl.sheet
styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max')
styleSheet.insertRule(`body { color: ${colors['base05']}`, 'index-max')
styleSheet.insertRule(`.base05-border { border-color: ${colors['base05']}`, 'index-max')
styleSheet.insertRule(`.base03-border { border-color: ${colors['base03']}`, 'index-max')
body.style.display = 'initial'
}
- const rgb2hex = (r, g, b) => {
- [r, g, b] = map([r, g, b], (val) => {
- val = val < 0 ? 0 : val
- val = val > 255 ? 255 : val
- return val
- })
- return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
- }
+ cssEl.addEventListener('load', setDynamic)
+}
- const setColors = () => {
- const styleEl = document.createElement('style')
- head.appendChild(styleEl)
- const styleSheet = styleEl.sheet
+const rgb2hex = (r, g, b) => {
+ [r, g, b] = map([r, g, b], (val) => {
+ val = Math.ceil(val)
+ val = val < 0 ? 0 : val
+ val = val > 255 ? 255 : val
+ return val
+ })
+ return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
+}
- const isDark = (col.text.r + col.text.g + col.text.b) > (col.bg.r + col.bg.g + col.bg.b)
- let colors = {}
+const setColors = (col, commit) => {
+ const head = document.head
+ const body = document.body
+ body.style.display = 'none'
- let mod = 10
- if (isDark) {
- mod = mod * -1
- }
- colors['base00'] = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background
- colors['base01'] = rgb2hex(col.bg.r - mod, col.bg.g - mod, col.bg.b - mod) // hilighted bg
- colors['base02'] = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons
- colors['base03'] = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod) // borders
- colors['base04'] = rgb2hex(col.text.r + mod, col.text.g + mod, col.text.b + mod) // faint text
- colors['base05'] = rgb2hex(col.text.r, col.text.g, col.text.b) // text
- colors['base06'] = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text
- colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
- colors['base08'] = rgb2hex(col.link.r, col.link.g, col.link.b) // links
-
- times(9, (n) => {
- const color = colors[`base0${n}`]
- styleSheet.insertRule(`.base0${n} { color: ${color}`, 'index-max')
- styleSheet.insertRule(`.base0${n}-background { background-color: ${color}`, 'index-max')
- })
+ const styleEl = document.createElement('style')
+ head.appendChild(styleEl)
+ const styleSheet = styleEl.sheet
- commit('setOption', { name: 'colors', value: colors })
+ const isDark = (col.text.r + col.text.g + col.text.b) > (col.bg.r + col.bg.g + col.bg.b)
+ let colors = {}
- styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max')
- styleSheet.insertRule(`body { color: ${colors['base05']}`, 'index-max')
- styleSheet.insertRule(`.base05-border { border-color: ${colors['base05']}`, 'index-max')
- styleSheet.insertRule(`.base03-border { border-color: ${colors['base03']}`, 'index-max')
- console.log(styleSheet)
- body.style.display = 'initial'
- }
- if (col) {
- setColors()
- } else {
- cssEl.addEventListener('load', setDynamic)
+ let mod = 10
+ if (isDark) {
+ mod = mod * -1
}
+ colors['base00'] = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background
+ colors['base01'] = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
+ colors['base02'] = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons
+ colors['base03'] = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod) // borders
+ colors['base04'] = rgb2hex(col.text.r + mod * 2, col.text.g + mod * 2, col.text.b + mod * 2) // faint text
+ colors['base05'] = rgb2hex(col.text.r, col.text.g, col.text.b) // text
+ colors['base06'] = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text
+ colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
+ colors['base08'] = rgb2hex(col.link.r, col.link.g, col.link.b) // links
+
+ times(9, (n) => {
+ const color = colors[`base0${8 - n}`]
+ styleSheet.insertRule(`.base0${8 - n} { color: ${color}`, 'index-max')
+ styleSheet.insertRule(`.base0${8 - n}-background { background-color: ${color}`, 'index-max')
+ })
+
+ commit('setOption', { name: 'colors', value: colors })
+
+ styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max')
+ styleSheet.insertRule(`body { color: ${colors['base05']}`, 'index-max')
+ styleSheet.insertRule(`.base05-border { border-color: ${colors['base05']}`, 'index-max')
+ styleSheet.insertRule(`.base03-border { border-color: ${colors['base03']}`, 'index-max')
+ body.style.display = 'initial'
+}
+
+const hex2rgb = (hex) => {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+ return result ? {
+ r: parseInt(result[1], 16),
+ g: parseInt(result[2], 16),
+ b: parseInt(result[3], 16)
+ } : null
+}
+
+const setPreset = (val, commit) => {
+ window.fetch('/static/styles.json')
+ .then((data) => data.json())
+ .then((themes) => {
+ const theme = themes[val] ? themes[val] : themes[0]
+ const bgRgb = hex2rgb(theme[1])
+ const fgRgb = hex2rgb(theme[2])
+ const textRgb = hex2rgb(theme[3])
+ const linkRgb = hex2rgb(theme[4])
+ const col = {
+ bg: bgRgb,
+ fg: fgRgb,
+ text: textRgb,
+ link: linkRgb
+ }
+ console.log(col)
+ setColors(col, commit)
+ })
}
const StyleSetter = {
- setStyle
+ setStyle,
+ setPreset,
+ setColors
}
export default StyleSetter
diff --git a/static/config.json b/static/config.json
index 195ee04690..8b596992c8 100644
--- a/static/config.json
+++ b/static/config.json
@@ -1,7 +1,7 @@
{
"name": "Pleroma FE",
- "theme": "base16-pleroma-dark.css",
+ "theme": "pleroma-dark",
"background": "/static/bg.jpg",
"logo": "/static/logo.png",
"registrationOpen": false
}
diff --git a/static/css/base16-pleroma-dark.css b/static/css/base16-pleroma-dark.css
index 8190d2a78e..e1d46f9270 100644
--- a/static/css/base16-pleroma-dark.css
+++ b/static/css/base16-pleroma-dark.css
@@ -1,33 +1,33 @@
.base00-background { background-color: #161c20; }
.base01-background { background-color: #282e32; }
.base02-background { background-color: #343a3f; }
.base03-background { background-color: #4e5256; }
.base04-background { background-color: #ababab; }
.base05-background { background-color: #b9b9b9; }
.base06-background { background-color: #d0d0d0; }
.base07-background { background-color: #e7e7e7; }
.base08-background { background-color: #baaa9c; }
.base09-background { background-color: #999999; }
.base0A-background { background-color: #a0a0a0; }
.base0B-background { background-color: #8e8e8e; }
.base0C-background { background-color: #868686; }
.base0D-background { background-color: #686868; }
.base0E-background { background-color: #747474; }
.base0F-background { background-color: #5e5e5e; }
.base00 { color: #161c20; }
.base01 { color: #282e32; }
-.base02 { color: #36393e; }
+.base02 { color: #343a3f; }
.base03 { color: #4e5256; }
.base04 { color: #ababab; }
.base05 { color: #b9b9b9; }
.base06 { color: #d0d0d0; }
.base07 { color: #e7e7e7; }
.base08 { color: #baaa9c; }
.base09 { color: #999999; }
.base0A { color: #a0a0a0; }
.base0B { color: #8e8e8e; }
.base0C { color: #868686; }
.base0D { color: #686868; }
.base0E { color: #747474; }
.base0F { color: #5e5e5e; }
diff --git a/static/styles.json b/static/styles.json
new file mode 100644
index 0000000000..229cde39c0
--- /dev/null
+++ b/static/styles.json
@@ -0,0 +1,4 @@
+{
+ "pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070" ],
+ "pleroma-light": [ "Pleroma Light", "#f2f4f6", "#d0d6db", "#304055", "#e46f0f" ]
+}

File Metadata

Mime Type
text/x-diff
Expires
Thu, Oct 29, 8:51 PM (1 d, 18 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1798642
Default Alt Text
(24 KB)

Event Timeline