Basic no-wallpaper support

src/App.js

@@ -54,13 +54,16 @@ export default {
       return this.currentUser.background_image || this.$store.state.instance.background
     },
     bgStyle () {
-      return {
-        'background-image': `url(${this.background})`
-      }
-    },
-    bgAppStyle () {
-      return {
-        '--body-background-image': `url(${this.background})`
+      if (
+        this.currentUser.background_image ||
+          (
+            this.$store.state.instance.background &&
+              !this.$store.getters.mergedConfig.hideInstanceWallpaper
+          )
+      ) {
+        return {
+          '--body-background-image': `url(${this.background})`
+        }
       }
     },
     chat () { return this.$store.state.chat.channel.state === 'joined' },

src/App.scss

@@ -14,7 +14,9 @@
   right: -20px;
   background-size: cover;
   background-repeat: no-repeat;
-  background-position: 0 50%;
+  background-color: var(--wallpaper);
+  background-image: var(--body-background-image);
+  background-position: 50% 50px;
 }
 
 i[class^='icon-'] {

src/App.vue

@@ -1,12 +1,11 @@
 <template>
   <div
     id="app"
-    :style="bgAppStyle"
+    :style="bgStyle"
   >
     <div
       id="app_bg_wrapper"
       class="app-bg-wrapper"
-      :style="bgStyle"
     />
     <MobileNav v-if="isMobileLayout" />
     <DesktopNav v-else />

src/components/desktop_nav/desktop_nav.scss

@@ -5,6 +5,10 @@
   width: 100%;
   position: fixed;
 
+  a {
+    color: var(--topBarLink, $fallback--link);
+  }
+
   .inner-nav {
     display: grid;
     grid-template-rows: 50px;

src/components/settings_modal/tabs/general_tab.js

@@ -34,6 +34,10 @@ const GeneralTab = {
       return this.$store.state.instance.postFormats || []
     },
     instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
+    instanceWallpaperUsed () {
+      return this.$store.state.instance.background &&
+        !this.$store.state.users.currentUser.background_image
+    },
     ...SharedComputedObject()
   }
 }

src/components/settings_modal/tabs/general_tab.vue

@@ -11,6 +11,11 @@
             {{ $t('settings.hide_isp') }}
           </Checkbox>
         </li>
+        <li v-if="instanceWallpaperUsed">
+          <Checkbox v-model="hideInstanceWallpaper">
+            {{ $t('settings.hide_wallpaper') }}
+          </Checkbox>
+        </li>
       </ul>
     </div>
     <div class="setting-item">

src/components/settings_modal/tabs/theme_tab/theme_tab.scss

@@ -165,7 +165,8 @@
     border-color: var(--border, $fallback--border);
     margin: 1em 0;
     padding: 1em;
-    background: var(--body-background-image);
+    background-color: var(--wallpaper);
+    background-image: var(--body-background-image);
     background-size: cover;
     background-position: 50% 50%;
 

src/i18n/en.json

@@ -328,6 +328,7 @@
     "hide_muted_posts": "Hide posts of muted users",
     "max_thumbnails": "Maximum amount of thumbnails per post",
     "hide_isp": "Hide instance-specific panel",
+    "hide_wallpaper": "Hide instance wallpaper",
     "preload_images": "Preload images",
     "use_one_click_nsfw": "Open NSFW attachments with just one click",
     "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",

src/modules/config.js

@@ -20,6 +20,7 @@ export const defaultState = {
   customTheme: undefined,
   customThemeSource: undefined,
   hideISP: false,
+  hideInstanceWallpaper: false,
   // bad name: actually hides posts of muted USERS
   hideMutedPosts: undefined, // instance default
   collapseMessageWithSubject: undefined, // instance default

src/services/theme_data/pleromafe.js

@@ -84,6 +84,10 @@ export const SLOT_INHERITANCE = {
     opacity: 'bg',
     priority: 1
   },
+  wallpaper: {
+    depends: ['bg'],
+    color: (mod, bg) => brightness(-2 * mod, bg).rgb
+  },
   fg: {
     depends: [],
     priority: 1

static/themes/redmond-xx-se.json

@@ -267,6 +267,7 @@
     },
     "colors": {
       "bg": "#c0c0c0",
+      "wallpaper": "#008080",
       "text": "#000000",
       "link": "#0000ff",
       "accent": "#000080",

static/themes/redmond-xx.json

@@ -258,6 +258,7 @@
     },
     "colors": {
       "bg": "#c0c0c0",
+      "wallpaper": "#008080",
       "text": "#000000",
       "link": "#0000ff",
       "accent": "#000080",

static/themes/redmond-xxi.json

@@ -240,6 +240,7 @@
     },
     "colors": {
       "bg": "#d6d6ce",
+      "wallpaper": "#396ba5",
       "text": "#000000",
       "link": "#0000ff",
       "accent": "#0a246a",