aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/emoji_input/emoji_input.vue10
-rw-r--r--src/components/nav_panel/nav_panel.vue20
-rw-r--r--src/components/selectable_list/selectable_list.vue10
-rw-r--r--src/components/side_drawer/side_drawer.vue10
-rw-r--r--src/components/status/status.vue10
-rw-r--r--src/components/style_switcher/style_switcher.vue46
-rw-r--r--src/services/theme_data/theme_data.service.js52
7 files changed, 128 insertions, 30 deletions
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index dcf51ff9..46ed6f25 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -157,11 +157,11 @@
&.highlighted {
background-color: $fallback--fg;
- background-color: var(--lightBg, $fallback--fg);
- color: var(--lightBgText, $fallback--text);
- --faint: var(--lightBgFaintText, $fallback--faint);
- --faintLink: var(--lightBgFaintLink, $fallback--faint);
- --icon: var(--lightBgIcon, $fallback--icon);
+ background-color: var(--selectedMenu, $fallback--fg);
+ color: var(--selectedMenuText, $fallback--text);
+ --faint: var(--selectedMenuFaintText, $fallback--faint);
+ --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+ --icon: var(--selectedMenuIcon, $fallback--icon);
}
}
}
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 0886bf8c..afc611ea 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/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);
- --faint: var(--lightBgFaintText, $fallback--faint);
- --faintLink: var(--lightBgFaintLink, $fallback--faint);
- --icon: var(--lightBgIcon, $fallback--icon);
+ color: var(--selectedMenuText, $fallback--link);
+ --faint: var(--selectedMenuFaintText, $fallback--faint);
+ --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+ --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);
- --faint: var(--lightBgFaintText, $fallback--faint);
- --faintLink: var(--lightBgFaintLink, $fallback--faint);
- --icon: var(--lightBgIcon, $fallback--icon);
+ color: var(--selectedMenuText, $fallback--text);
+ --faint: var(--selectedMenuFaintText, $fallback--faint);
+ --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+ --icon: var(--selectedMenuIcon, $fallback--icon);
&:hover {
text-decoration: underline;
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 416c9b6a..2d1e44a3 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -68,11 +68,11 @@
&-item-selected-inner {
background-color: $fallback--lightBg;
- background-color: var(--lightBg, $fallback--lightBg);
- color: var(--lightBgText, $fallback--text);
- --faint: var(--lightBgFaintText, $fallback--faint);
- --faintLink: var(--lightBgFaintLink, $fallback--faint);
- --icon: var(--lightBgIcon, $fallback--icon);
+ background-color: var(--selectedMenu, $fallback--lightBg);
+ color: var(--selectedMenuText, $fallback--text);
+ --faint: var(--selectedMenuFaintText, $fallback--faint);
+ --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+ --icon: var(--selectedMenuIcon, $fallback--icon);
}
&-header {
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 6d75221f..3188fd59 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/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);
- --faint: var(--lightBgFaintText, $fallback--faint);
- --faintLink: var(--lightBgFaintLink, $fallback--faint);
- --icon: var(--lightBgIcon, $fallback--icon);
+ color: var(--selectedMenuText, $fallback--text);
+ --faint: var(--selectedMenuFaintText, $fallback--faint);
+ --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+ --icon: var(--selectedMenuIcon, $fallback--icon);
}
}
}
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 72e9b25a..38d091ed 100644
--- a/src/components/status/status.vue
+++ b/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);
- --faint: var(--lightBgFaintText, $fallback--faint);
- --faintLink: var(--lightBgFaintLink, $fallback--faint);
- --icon: var(--lightBgIcon, $fallback--icon);
+ color: var(--selectedPostText, $fallback--text);
+ --faint: var(--selectedPostFaintText, $fallback--faint);
+ --faintLink: var(--selectedPostFaintLink, $fallback--faint);
+ --icon: var(--selectedPostIcon, $fallback--icon);
}
.timeline & {
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index f2fdfea2..613abd1f 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/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
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 221c3b48..dd5f8fd0 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/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
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 09:51:25 +0000