Rethink use of text accent color in browse toolbar

bkis · web-flow · commit 31d55700505c · 2026-01-20T15:49:20.000+01:00
diff --git a/Tekst-API/openapi.json b/Tekst-API/openapi.json
@@ -14750,12 +14750,6 @@
             "description": "Show location aliases in browse view",
             "default": true
           },
-          "browseBarUsesTextColor": {
-            "type": "boolean",
-            "title": "Browsebarusestextcolor",
-            "description": "Use current working text's accent color for browse toolbar",
-            "default": false
-          },
           "uiColor": {
             "type": "string",
             "format": "color",
@@ -15038,19 +15032,6 @@
             "description": "Show location aliases in browse view",
             "optionalNullable": false
           },
-          "browseBarUsesTextColor": {
-            "anyOf": [
-              {
-                "type": "boolean"
-              },
-              {
-                "type": "null"
-              }
-            ],
-            "title": "Browsebarusestextcolor",
-            "description": "Use current working text's accent color for browse toolbar",
-            "optionalNullable": false
-          },
           "uiColor": {
             "anyOf": [
               {
diff --git a/Tekst-API/tekst/models/platform.py b/Tekst-API/tekst/models/platform.py
@@ -200,13 +200,6 @@ class PlatformState(ModelBase, ModelFactoryMixin):
         ),
     ] = True
 
-    browse_bar_uses_text_color: Annotated[
-        bool,
-        Field(
-            description="Use current working text's accent color for browse toolbar",
-        ),
-    ] = False
-
     ui_color: Annotated[
         Color,
         ColorSerializer,
diff --git a/Tekst-Web/i18n/ui/deDE.yml b/Tekst-Web/i18n/ui/deDE.yml
@@ -363,7 +363,6 @@ models:
     showResourceCategoryHeadings: Zeige Überschriften für Kategorien
     prioritizeBrowseLevelResources: Platziere Ressourcen der aktuellen Ebene vor anderen (innerhalb ihrer Kategorien)
     showLocationAliases: Zeige Belegstellen-Aliase
-    browseBarUsesTextColor: Färbe Toolbar der Lese-Ansicht in der Farbe des aktuellen Arbeitstextes
     denyResourceTypes: Erstellung dieser Ressourcentypen nur Administratoren erlauben
     fonts: Benutzer*innendefinierte Schritarten
     uiFont: UI-Schriftart
diff --git a/Tekst-Web/i18n/ui/enUS.yml b/Tekst-Web/i18n/ui/enUS.yml
@@ -359,7 +359,6 @@ models:
     showResourceCategoryHeadings: Show category headings
     prioritizeBrowseLevelResources: Place resources of current browse level before others (inside their category)
     showLocationAliases: Show location aliases
-    browseBarUsesTextColor: Use current working text's accent color for browse toolbar
     denyResourceTypes: Allow creation of these resource types for administrators only
     fonts: Custom Fonts
     uiFont: User Interface Font
diff --git a/Tekst-Web/src/api/schema.d.ts b/Tekst-Web/src/api/schema.d.ts
@@ -4780,12 +4780,6 @@ export interface components {
        * @default true
        */
       showLocationAliases: boolean;
-      /**
-       * Browsebarusestextcolor
-       * @description Use current working text's accent color for browse toolbar
-       * @default false
-       */
-      browseBarUsesTextColor: boolean;
       /**
        * Uicolor
        * Format: color
@@ -4905,11 +4899,6 @@ export interface components {
        * @description Show location aliases in browse view
        */
       showLocationAliases?: boolean;
-      /**
-       * Browsebarusestextcolor
-       * @description Use current working text's accent color for browse toolbar
-       */
-      browseBarUsesTextColor?: boolean;
       /**
        * Uicolor
        * @description Primary color used in for client UI
diff --git a/Tekst-Web/src/components/browse/BookmarksWidget.vue b/Tekst-Web/src/components/browse/BookmarksWidget.vue
@@ -15,6 +15,7 @@ import { useRouter } from 'vue-router';
 
 defineProps<{
   buttonSize?: 'small' | 'medium' | 'large';
+  color?: string;
 }>();
 
 const browse = useBrowseStore();
@@ -87,7 +88,7 @@ async function handleWidgetClick() {
 <template>
   <n-button
     quaternary
-    color="var(--base-color)"
+    :color="color"
     :size="buttonSize"
     :focusable="false"
     :title="$t('browse.bookmarks.bookmarks')"
diff --git a/Tekst-Web/src/components/browse/BrowseLocationControls.vue b/Tekst-Web/src/components/browse/BrowseLocationControls.vue
@@ -14,6 +14,7 @@ import { ref } from 'vue';
 withDefaults(
   defineProps<{
     buttonSize?: 'small' | 'medium' | 'large';
+    color?: string;
   }>(),
   {
     buttonSize: 'large',
@@ -54,7 +55,7 @@ whenever(ArrowRight, () => {
   <n-flex justify="space-between" align="center" :wrap="false">
     <n-button
       quaternary
-      color="var(--base-color)"
+      :color="color"
       :focusable="false"
       :title="$t('browse.toolbar.tipPreviousLocation')"
       :size="buttonSize"
@@ -70,7 +71,7 @@ whenever(ArrowRight, () => {
     <n-badge value="!" :show="!browse.isOnDefaultLevel && !browse.loadingLocationData">
       <n-button
         quaternary
-        color="var(--base-color)"
+        :color="color"
         :title="
           $t('browse.toolbar.tipSelectLocation') +
           (!browse.isOnDefaultLevel ? ' (' + $t('browse.toolbar.tipNotOnDefaultLevel') + ')' : '')
@@ -86,11 +87,11 @@ whenever(ArrowRight, () => {
       </n-button>
     </n-badge>
 
-    <bookmarks-widget v-if="!!auth.user" :button-size="buttonSize" />
+    <bookmarks-widget v-if="!!auth.user" :button-size="buttonSize" :color="color" />
 
     <n-button
       quaternary
-      color="var(--base-color)"
+      :color="color"
       :focusable="false"
       :title="$t('browse.toolbar.tipNextLocation')"
       :size="buttonSize"
diff --git a/Tekst-Web/src/components/browse/BrowseSearchResultsToolbar.vue b/Tekst-Web/src/components/browse/BrowseSearchResultsToolbar.vue
@@ -8,7 +8,7 @@ import {
   SkipNextIcon,
   SkipPreviousIcon,
 } from '@/icons';
-import { useBrowseStore, useSearchStore, useStateStore, useThemeStore } from '@/stores';
+import { useBrowseStore, useSearchStore, useThemeStore } from '@/stores';
 import { NBadge, NButton, NFlex, NIcon } from 'naive-ui';
 import { computed, onMounted } from 'vue';
 
@@ -22,17 +22,10 @@ withDefaults(
   }
 );
 
-const state = useStateStore();
 const browse = useBrowseStore();
 const search = useSearchStore();
 const theme = useThemeStore();
 
-const bgColor = computed(() =>
-  !!state.pf?.state.browseBarUsesTextColor
-    ? theme.getTextColors().fade4
-    : 'var(--primary-color-fade4)'
-);
-
 const resultNo = computed(
   () =>
     search.settingsGeneral.pgn.pgs * (search.settingsGeneral.pgn.pg - 1) +
@@ -44,6 +37,8 @@ const viewingSearchResult = computed(
   () => search.browseCurrHit?.id === browse.locationPathHead?.id
 );
 
+const toolbarTxtColor = computed(() => (theme.dark ? '#fff' : '#333'));
+
 async function skip(direction: 'previous' | 'next') {
   await search.browseSkipTo(direction);
   if (search.browseHitResourcesActive) {
@@ -83,12 +78,13 @@ onMounted(() => {
       align="center"
       :wrap="false"
       class="bsr-toolbar"
-      :style="{ backgroundColor: bgColor }"
+      :style="{ backgroundColor: theme.dark ? '#444' : '#c5c5c5' }"
     >
       <n-flex :wrap="false">
         <!-- skip to previous search result -->
         <n-button
           quaternary
+          :color="toolbarTxtColor"
           :size="buttonSize"
           :title="$t('search.results.browsePrev')"
           :focusable="false"
@@ -103,6 +99,7 @@ onMounted(() => {
         <!-- go to search results -->
         <n-button
           quaternary
+          :color="toolbarTxtColor"
           :size="buttonSize"
           :title="$t('search.results.heading')"
           :focusable="false"
@@ -117,6 +114,7 @@ onMounted(() => {
         <!-- skip to next search result -->
         <n-button
           quaternary
+          :color="toolbarTxtColor"
           :size="buttonSize"
           :title="$t('search.results.browseNext')"
           :focusable="false"
@@ -137,6 +135,7 @@ onMounted(() => {
         align="center"
         :wrap="false"
         class="bsr-toolbar-middle text-small"
+        :style="{ color: toolbarTxtColor }"
       >
         <n-flex
           v-if="!search.loading"
@@ -167,6 +166,7 @@ onMounted(() => {
           <n-button
             :quaternary="!search.browseHitResourcesActive"
             :tertiary="search.browseHitResourcesActive"
+            :color="toolbarTxtColor"
             :size="buttonSize"
             :title="$t('search.results.browseHitResourcesActive')"
             :focusable="false"
@@ -181,6 +181,7 @@ onMounted(() => {
         <!-- stop browsing search results -->
         <n-button
           quaternary
+          :color="toolbarTxtColor"
           :size="buttonSize"
           :title="$t('search.results.browseStop')"
           :focusable="false"
@@ -202,7 +203,7 @@ onMounted(() => {
 }
 
 .bsr-toolbar {
-  padding: var(--gap-sm);
+  padding: var(--gap-sm) var(--gap-md);
   border-bottom-left-radius: var(--border-radius);
   border-bottom-right-radius: var(--border-radius);
 }
diff --git a/Tekst-Web/src/components/browse/BrowseToolbar.vue b/Tekst-Web/src/components/browse/BrowseToolbar.vue
@@ -12,10 +12,11 @@ const browse = useBrowseStore();
 const search = useSearchStore();
 const theme = useThemeStore();
 
-const bgColor = computed(() =>
-  !!state.pf?.state.browseBarUsesTextColor ? theme.getTextColors().base : 'var(--primary-color)'
-);
 const affixRef = ref();
+const affixed = ref(false);
+
+const toolbarTxtColor = computed(() => (theme.dark ? '#fff' : '#333'));
+
 const resourcesCount = computed(
   () => browse.resourcesCategorized.map((c) => c.resources).flat().length
 );
@@ -34,7 +35,10 @@ onMounted(() => {
   nextTick(() => {
     if (affixRef.value) {
       new IntersectionObserver(
-        ([e]) => e.target.classList.toggle('affixed', e.intersectionRatio < 1),
+        ([e]) => {
+          affixed.value = e.intersectionRatio < 1;
+          e.target.classList.toggle('affixed', affixed.value);
+        },
         { threshold: [1] }
       ).observe(affixRef.value);
     }
@@ -57,22 +61,35 @@ const buttonSize = computed(() => (state.smallScreen ? 'small' : 'large'));
       justify="space-between"
       align="center"
       class="browse-toolbar"
-      :style="{ backgroundColor: bgColor }"
+      :style="{ backgroundColor: theme.dark ? '#555' : '#d5d5d5' }"
     >
-      <browse-location-controls :button-size="buttonSize" data-tour-key="browseNav" />
-
-      <div v-if="!state.smallScreen" class="browse-toolbar-middle browse-location-label text-small">
+      <browse-location-controls
+        :button-size="buttonSize"
+        :color="toolbarTxtColor"
+        data-tour-key="browseNav"
+      />
+
+      <div
+        v-if="!state.smallScreen"
+        class="browse-toolbar-middle browse-location-label"
+        :style="{ color: toolbarTxtColor }"
+        :title="affixed ? state.text?.title : undefined"
+      >
         <n-flex justify="center" align="center" :wrap="false">
-          <b style="text-align: center">{{ state.text?.title || '???' }}</b>
+          <div
+            class="text-color-indicator"
+            :style="{ backgroundColor: theme.getTextColors().base }"
+          ></div>
+          <span v-if="!affixed">{{ state.text?.title || '???' }}</span>
+          <span v-else><location-label /></span>
         </n-flex>
-        <div><location-label /></div>
       </div>
 
       <div class="browse-toolbar-end">
         <n-badge dot :offset="[-2, 5]" :show="browse.focusView">
           <n-button
             quaternary
-            color="var(--base-color)"
+            :color="toolbarTxtColor"
             :style="{
               backgroundColor: browse.focusView ? 'var(--base-color-translucent)' : undefined,
             }"
@@ -96,7 +113,7 @@ const buttonSize = computed(() => (state.smallScreen ? 'small' : 'large'));
         >
           <n-button
             quaternary
-            color="var(--base-color)"
+            :color="toolbarTxtColor"
             :size="buttonSize"
             :title="$t('browse.toolbar.tipOpenResourceList')"
             :focusable="false"
@@ -178,9 +195,10 @@ const buttonSize = computed(() => (state.smallScreen ? 'small' : 'large'));
   max-width: var(--max-app-width);
 }
 
-.browse-toolbar .browse-location-label {
-  visibility: hidden;
-  color: var(--base-color);
+.browse-toolbar .browse-location-label .text-color-indicator {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
 }
 
 .browse-toolbar-container.affixed .browse-location-label {
diff --git a/Tekst-Web/src/components/navigation/TextSelect.vue b/Tekst-Web/src/components/navigation/TextSelect.vue
diff --git a/Tekst-Web/src/components/navigation/TextSelectOption.vue b/Tekst-Web/src/components/navigation/TextSelectOption.vue
diff --git a/Tekst-Web/src/views/ContentsView.vue b/Tekst-Web/src/views/ContentsView.vue
diff --git a/Tekst-Web/src/views/admin/AdminSystemSettingsView.vue b/Tekst-Web/src/views/admin/AdminSystemSettingsView.vue
