selectedPost and selectedMenu support

src/components/emoji_input/emoji_input.vue

@@ -157,11 +157,11 @@
 
       &.highlighted {
         background-color: $fallback--fg;
-        background-color: var(--lightBg, $fallback--fg);
+        background-color: var(--selectedMenu, $fallback--fg);
-        color: var(--lightBgText, $fallback--text);
+        color: var(--selectedMenuText, $fallback--text);
-        --faint: var(--lightBgFaintText, $fallback--faint);
+        --faint: var(--selectedMenuFaintText, $fallback--faint);
-        --faintLink: var(--lightBgFaintLink, $fallback--faint);
+        --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-        --icon: var(--lightBgIcon, $fallback--icon);
+        --icon: var(--selectedMenuIcon, $fallback--icon);
       }
     }
   }

src/components/nav_panel/nav_panel.vue

@@ -100,23 +100,23 @@
 
   &:hover {
     background-color: $fallback--lightBg;
-    background-color: var(--lightBg, $fallback--lightBg);
+    background-color: var(--selectedMenu, $fallback--lightBg);
     color: $fallback--link;
-    color: var(--lightBgText, $fallback--link);
+    color: var(--selectedMenuText, $fallback--link);
-    --faint: var(--lightBgFaintText, $fallback--faint);
+    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--lightBgFaintLink, $fallback--faint);
+    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --icon: var(--lightBgIcon, $fallback--icon);
+    --icon: var(--selectedMenuIcon, $fallback--icon);
   }
 
   &.router-link-active {
     font-weight: bolder;
     background-color: $fallback--lightBg;
-    background-color: var(--lightBg, $fallback--lightBg);
+    background-color: var(--selectedMenu, $fallback--lightBg);
     color: $fallback--text;
-    color: var(--lightBgText, $fallback--text);
+    color: var(--selectedMenuText, $fallback--text);
-    --faint: var(--lightBgFaintText, $fallback--faint);
+    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--lightBgFaintLink, $fallback--faint);
+    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --icon: var(--lightBgIcon, $fallback--icon);
+    --icon: var(--selectedMenuIcon, $fallback--icon);
 
     &:hover {
       text-decoration: underline;

src/components/selectable_list/selectable_list.vue

@@ -68,11 +68,11 @@
 
   &-item-selected-inner {
     background-color: $fallback--lightBg;
-    background-color: var(--lightBg, $fallback--lightBg);
+    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: var(--lightBgText, $fallback--text);
+    color: var(--selectedMenuText, $fallback--text);
-    --faint: var(--lightBgFaintText, $fallback--faint);
+    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--lightBgFaintLink, $fallback--faint);
+    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --icon: var(--lightBgIcon, $fallback--icon);
+    --icon: var(--selectedMenuIcon, $fallback--icon);
   }
 
   &-header {

src/components/side_drawer/side_drawer.vue

@@ -289,12 +289,12 @@
 
     &:hover {
       background-color: $fallback--lightBg;
-      background-color: var(--lightBg, $fallback--lightBg);
+      background-color: var(--selectedMenu, $fallback--lightBg);
       color: $fallback--text;
-      color: var(--lightBgText, $fallback--text);
+      color: var(--selectedMenuText, $fallback--text);
-      --faint: var(--lightBgFaintText, $fallback--faint);
+      --faint: var(--selectedMenuFaintText, $fallback--faint);
-      --faintLink: var(--lightBgFaintLink, $fallback--faint);
+      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-      --icon: var(--lightBgIcon, $fallback--icon);
+      --icon: var(--selectedMenuIcon, $fallback--icon);
     }
   }
 }

src/components/status/status.vue

@@ -445,12 +445,12 @@ $status-margin: 0.75em;
 
   &_focused {
     background-color: $fallback--lightBg;
-    background-color: var(--lightBg, $fallback--lightBg);
+    background-color: var(--selectedPost, $fallback--lightBg);
     color: $fallback--text;
-    color: var(--lightBgText, $fallback--text);
+    color: var(--selectedPostText, $fallback--text);
-    --faint: var(--lightBgFaintText, $fallback--faint);
+    --faint: var(--selectedPostFaintText, $fallback--faint);
-    --faintLink: var(--lightBgFaintLink, $fallback--faint);
+    --faintLink: var(--selectedPostFaintLink, $fallback--faint);
-    --icon: var(--lightBgIcon, $fallback--icon);
+    --icon: var(--selectedPostIcon, $fallback--icon);
   }
 
   .timeline & {

src/components/style_switcher/style_switcher.vue

@@ -465,6 +465,52 @@
             />
             <ContrastRatio :contrast="previewContrast.lightBgLink" />
           </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4>
+            <ColorInput
+              v-model="selectedPostColorLocal"
+              name="selectedPost"
+              :label="$t('settings.background')"
+              :fallback="previewTheme.colors.selectedPost"
+            />
+            <ColorInput
+              v-model="selectedPostTextColorLocal"
+              name="selectedPostText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.selectedPostText"
+            />
+            <ContrastRatio :contrast="previewContrast.selectedPostText" />
+            <ColorInput
+              v-model="selectedPostLinkColorLocal"
+              name="selectedPostLink"
+              :label="$t('settings.links')"
+              :fallback="previewTheme.colors.selectedPostLink"
+            />
+            <ContrastRatio :contrast="previewContrast.selectedPostLink" />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.selectedMenu') }}</h4>
+            <ColorInput
+              v-model="selectedMenuColorLocal"
+              name="selectedMenu"
+              :label="$t('settings.background')"
+              :fallback="previewTheme.colors.selectedMenu"
+            />
+            <ColorInput
+              v-model="selectedMenuTextColorLocal"
+              name="selectedMenuText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.selectedMenuText"
+            />
+            <ContrastRatio :contrast="previewContrast.selectedMenuText" />
+            <ColorInput
+              v-model="selectedMenuLinkColorLocal"
+              name="selectedMenuLink"
+              :label="$t('settings.links')"
+              :fallback="previewTheme.colors.selectedMenuLink"
+            />
+            <ContrastRatio :contrast="previewContrast.selectedMenuLink" />
+          </div>
         </div>
 
         <div

src/services/theme_data/theme_data.service.js

@@ -98,6 +98,58 @@ export const SLOT_INHERITANCE = {
     color: (mod, bg, text) => mixrgb(bg, text)
   },
 
+  selectedPost: '--lightBg',
+  selectedPostFaintText: {
+    depends: ['lightBgFaintText'],
+    layer: 'lightBg',
+    textColor: true
+  },
+  selectedPostFaintLink: {
+    depends: ['lightBgFaintLink'],
+    layer: 'lightBg',
+    textColor: 'preserve'
+  },
+  selectedPostText: {
+    depends: ['lightBgText'],
+    layer: 'lightBg',
+    textColor: true
+  },
+  selectedPostLink: {
+    depends: ['lightBgLink'],
+    layer: 'lightBg',
+    textColor: 'preserve'
+  },
+  selectedPostIcon: {
+    depends: ['selectedPost', 'selectedPostText'],
+    color: (mod, bg, text) => mixrgb(bg, text)
+  },
+
+  selectedMenu: '--lightBg',
+  selectedMenuFaintText: {
+    depends: ['lightBgFaintText'],
+    layer: 'lightBg',
+    textColor: true
+  },
+  selectedMenuFaintLink: {
+    depends: ['lightBgFaintLink'],
+    layer: 'lightBg',
+    textColor: 'preserve'
+  },
+  selectedMenuText: {
+    depends: ['lightBgText'],
+    layer: 'lightBg',
+    textColor: true
+  },
+  selectedMenuLink: {
+    depends: ['lightBgLink'],
+    layer: 'lightBg',
+    textColor: 'preserve'
+  },
+  selectedMenuIcon: {
+    depends: ['selectedMenu', 'selectedMenuText'],
+    color: (mod, bg, text) => mixrgb(bg, text)
+  },
+
   lightText: {
     depends: ['text'],
     color: (mod, text) => brightness(20 * mod, text).rgb