Improve toolbar coloring logic

bkis · bkis · commit 6437aa39a091 · 2026-02-09T15:57:54.000+01:00
diff --git a/Tekst-API/demo/state.json b/Tekst-API/demo/state.json
@@ -16,7 +16,7 @@
     "prioritize_browse_level_resources": true,
     "show_location_aliases": true,
     "browse_bar_uses_text_color": false,
-    "ui_color": "#316149",
+    "ui_color": "#2F7561",
     "show_logo_on_loading_screen": true,
     "show_logo_in_header": true,
     "show_tekst_footer_hint": true,
diff --git a/Tekst-API/demo/texts.json b/Tekst-API/demo/texts.json
@@ -24,7 +24,7 @@
     "default_level": 2,
     "loc_delim": " > ",
     "labeled_location": true,
-    "color": "#274891",
+    "color": "#134F86",
     "sort_order": 10,
     "is_active": true,
     "resource_categories": [
@@ -82,7 +82,7 @@
     "default_level": 0,
     "loc_delim": "/",
     "labeled_location": true,
-    "color": "#823c88",
+    "color": "#A2313C",
     "sort_order": 10,
     "is_active": true,
     "resource_categories": [
diff --git a/Tekst-API/openapi.json b/Tekst-API/openapi.json
@@ -4,7 +4,7 @@
     "title": "Tekst-Dev",
     "summary": "An online text research platform",
     "contact": {},
-    "version": "0.48.3a0"
+    "version": "0.48.4a0"
   },
   "servers": [
     {
diff --git a/Tekst-API/pyproject.toml b/Tekst-API/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "tekst"
-version = "0.48.3a0"
+version = "0.48.4a0"
 description = "An online text research platform"
 readme = "README.md"
 authors = [
diff --git a/Tekst-API/uv.lock b/Tekst-API/uv.lock
diff --git a/Tekst-Web/package-lock.json b/Tekst-Web/package-lock.json
diff --git a/Tekst-Web/package.json b/Tekst-Web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tekst",
-  "version": "0.48.3-alpha.0",
+  "version": "0.48.4-alpha.0",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/Tekst-Web/src/api/index.ts b/Tekst-Web/src/api/index.ts
@@ -99,16 +99,7 @@ export function downloadData(blob: Blob, filename: string) {
 
 // export some common platform properties for use throughout codebase
 
-export const colorPresets = [
-  '#274891ff', // indigo
-  '#197c85ff', // teal
-  '#2d7e48ff', // green
-  '#75881eff', // olive
-  '#5e4724ff', // coffee
-  '#862628ff', // dark red
-  '#9b344eff', // raspberry
-  '#823c88ff', // violet
-];
+export const colorPresets = ['#a2313c', '#563175', '#2F7561', '#c06709', '#134f86'];
 
 export const resourceTypes = [
   {
diff --git a/Tekst-Web/src/components/browse/BookmarksWidget.vue b/Tekst-Web/src/components/browse/BookmarksWidget.vue
@@ -7,18 +7,18 @@ import { useMessages } from '@/composables/messages';
 import { usePrompt } from '@/composables/prompt';
 import { $t } from '@/i18n';
 import { AddIcon, BookIcon, BookmarksIcon, DeleteIcon, NoContentIcon, SearchIcon } from '@/icons';
-import { useBrowseStore, useStateStore } from '@/stores';
+import { useBrowseStore, useStateStore, useThemeStore } from '@/stores';
 import { NButton, NEmpty, NFlex, NIcon, NInput, NList, NListItem, NThing } from 'naive-ui';
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 defineProps<{
   buttonSize?: 'small' | 'medium' | 'large';
-  color?: string;
 }>();
 
 const browse = useBrowseStore();
 const state = useStateStore();
+const theme = useThemeStore();
 const { message } = useMessages();
 const { bookmarks, loadBookmarks, createBookmark, deleteBookmark } = useBookmarks();
 const router = useRouter();
@@ -93,11 +93,11 @@ async function handleWidgetClick() {
 <template>
   <n-button
     quaternary
-    :color="color"
     :size="buttonSize"
     :focusable="false"
     :title="$t('browse.bookmarks.bookmarks')"
     :bordered="false"
+    :theme-overrides="theme.toolbarBtnTheme"
     @click.stop.prevent="handleWidgetClick"
   >
     <template #icon>
diff --git a/Tekst-Web/src/components/browse/BrowseLocationControls.vue b/Tekst-Web/src/components/browse/BrowseLocationControls.vue
@@ -5,7 +5,7 @@ import LocationSelectModal from '@/components/modals/LocationSelectModal.vue';
 import { $t } from '@/i18n';
 import { ArrowBackIcon, ArrowForwardIcon, BookIcon } from '@/icons';
 import router from '@/router';
-import { useAuthStore, useBrowseStore } from '@/stores';
+import { useAuthStore, useBrowseStore, useThemeStore } from '@/stores';
 import { isInputFocused, isOverlayOpen } from '@/utils';
 import { useMagicKeys, whenever } from '@vueuse/core';
 import { NBadge, NButton, NFlex, NIcon } from 'naive-ui';
@@ -14,7 +14,6 @@ import { ref } from 'vue';
 withDefaults(
   defineProps<{
     buttonSize?: 'small' | 'medium' | 'large';
-    color?: string;
   }>(),
   {
     buttonSize: 'large',
@@ -23,6 +22,7 @@ withDefaults(
 
 const auth = useAuthStore();
 const browse = useBrowseStore();
+const theme = useThemeStore();
 
 const { ArrowLeft, ArrowRight } = useMagicKeys();
 
@@ -55,12 +55,12 @@ whenever(ArrowRight, () => {
   <n-flex justify="space-between" align="center" :wrap="false">
     <n-button
       quaternary
-      :color="color"
       :focusable="false"
       :title="$t('browse.toolbar.tipPreviousLocation')"
       :size="buttonSize"
       :bordered="false"
       :disabled="!browse.prevLocationId"
+      :theme-overrides="theme.toolbarBtnTheme"
       @click="() => gotoLocation(browse.prevLocationId)"
     >
       <template #icon>
@@ -71,14 +71,14 @@ whenever(ArrowRight, () => {
     <n-badge value="!" :show="!browse.isOnDefaultLevel && !browse.loadingLocationData">
       <n-button
         quaternary
-        :color="color"
         :title="
           $t('browse.toolbar.tipSelectLocation') +
           (!browse.isOnDefaultLevel ? ' (' + $t('browse.toolbar.tipNotOnDefaultLevel') + ')' : '')
         "
         :focusable="false"
         :size="buttonSize"
         :bordered="false"
+        :theme-overrides="theme.toolbarBtnTheme"
         @click="showLocationSelectModal = true"
       >
         <template #icon>
@@ -87,16 +87,16 @@ whenever(ArrowRight, () => {
       </n-button>
     </n-badge>
 
-    <bookmarks-widget v-if="!!auth.user" :button-size="buttonSize" :color="color" />
+    <bookmarks-widget v-if="!!auth.user" :button-size="buttonSize" />
 
     <n-button
       quaternary
-      :color="color"
       :focusable="false"
       :title="$t('browse.toolbar.tipNextLocation')"
       :size="buttonSize"
       :bordered="false"
       :disabled="!browse.nextLocationId"
+      :theme-overrides="theme.toolbarBtnTheme"
       @click="() => gotoLocation(browse.nextLocationId)"
     >
       <template #icon>
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 } from '@/stores';
+import { useBrowseStore, useSearchStore, useThemeStore } from '@/stores';
 import { NBadge, NButton, NFlex, NIcon } from 'naive-ui';
 import { computed, onMounted } from 'vue';
 
@@ -24,6 +24,7 @@ withDefaults(
 
 const browse = useBrowseStore();
 const search = useSearchStore();
+const theme = useThemeStore();
 
 const resultNo = computed(
   () =>
@@ -75,7 +76,7 @@ onMounted(() => {
       align="center"
       :wrap="false"
       class="bsr-toolbar"
-      :style="{ backgroundColor: 'var(--primary-color-fade3)' }"
+      :style="{ backgroundColor: 'var(--primary-color-fade1)' }"
     >
       <n-flex :wrap="false">
         <!-- skip to previous search result -->
@@ -86,6 +87,7 @@ onMounted(() => {
           :focusable="false"
           :disabled="search.loading || resultNo === 1"
           :bordered="false"
+          :theme-overrides="theme.toolbarBtnTheme"
           @click="() => skip('previous')"
         >
           <template #icon>
@@ -100,6 +102,7 @@ onMounted(() => {
           :focusable="false"
           :disabled="search.loading"
           :bordered="false"
+          :theme-overrides="theme.toolbarBtnTheme"
           @click="gotoSearchResults"
         >
           <template #icon>
@@ -114,6 +117,7 @@ onMounted(() => {
           :focusable="false"
           :disabled="search.loading || resultNo === search.results?.totalHits"
           :bordered="false"
+          :theme-overrides="theme.toolbarBtnTheme"
           @click="() => skip('next')"
         >
           <template #icon>
@@ -129,6 +133,7 @@ onMounted(() => {
         align="center"
         :wrap="false"
         class="bsr-toolbar-middle text-small"
+        :style="{ color: theme.toolbarBtnTheme.textColor }"
       >
         <n-flex
           v-if="!search.loading"
@@ -157,12 +162,17 @@ onMounted(() => {
         <!-- keep active resources in sync with relevant resources from current hit? -->
         <n-badge dot :offset="[-2, 5]" :show="search.browseHitResourcesActive">
           <n-button
-            :quaternary="!search.browseHitResourcesActive"
-            :tertiary="search.browseHitResourcesActive"
+            quaternary
+            :style="{
+              backgroundColor: search.browseHitResourcesActive
+                ? theme.toolbarBtnTheme.colorQuaternaryHover
+                : undefined,
+            }"
             :size="buttonSize"
             :title="$t('search.results.browseHitResourcesActive')"
             :focusable="false"
             :bordered="false"
+            :theme-overrides="theme.toolbarBtnTheme"
             @click="() => switchBrowseHitResourcesActive(!search.browseHitResourcesActive)"
           >
             <template #icon>
@@ -177,6 +187,7 @@ onMounted(() => {
           :title="$t('search.results.browseStop')"
           :focusable="false"
           :bordered="false"
+          :theme-overrides="theme.toolbarBtnTheme"
           @click="stopBrowsing"
         >
           <template #icon>
diff --git a/Tekst-Web/src/components/browse/BrowseToolbar.vue b/Tekst-Web/src/components/browse/BrowseToolbar.vue
@@ -15,8 +15,6 @@ const theme = useThemeStore();
 const affixRef = ref();
 const affixed = ref(false);
 
-const toolbarTxtColor = computed(() => (theme.dark ? '#333' : '#fff'));
-
 const resourcesCount = computed(
   () => browse.resourcesCategorized.map((c) => c.resources).flat().length
 );
@@ -61,13 +59,9 @@ const buttonSize = computed(() => (state.vw < 900 ? 'small' : 'large'));
       justify="space-between"
       align="center"
       class="browse-toolbar"
-      :style="{ backgroundColor: 'var(--primary-color-fade1)' }"
+      :style="{ backgroundColor: 'var(--primary-color)' }"
     >
-      <browse-location-controls
-        :button-size="buttonSize"
-        :color="toolbarTxtColor"
-        data-tour-key="browseNav"
-      />
+      <browse-location-controls :button-size="buttonSize" data-tour-key="browseNav" />
 
       <n-flex
         justify="center"
@@ -76,7 +70,7 @@ const buttonSize = computed(() => (state.vw < 900 ? 'small' : 'large'));
         :wrap="false"
         v-if="state.vw > 400"
         class="browse-toolbar-middle browse-location-label"
-        :style="{ color: toolbarTxtColor }"
+        :style="{ color: theme.toolbarBtnTheme.textColor }"
         :title="affixed ? state.text?.title : undefined"
       >
         <!-- <div class="text-color-indicator" :style="{ backgroundColor: theme.getTextColors().base }"></div> -->
@@ -88,15 +82,17 @@ const buttonSize = computed(() => (state.vw < 900 ? 'small' : 'large'));
           <n-button
             id="focus-view-toggle"
             quaternary
-            :color="toolbarTxtColor"
             :style="{
-              backgroundColor: browse.focusView ? '#fff4' : undefined,
+              backgroundColor: browse.focusView
+                ? theme.toolbarBtnTheme.colorQuaternaryHover
+                : undefined,
             }"
             :size="buttonSize"
             :title="$t('browse.toolbar.tipFocusView')"
             :focusable="false"
             :bordered="false"
             data-tour-key="browseFocus"
+            :theme-overrides="theme.toolbarBtnTheme"
             @click="browse.focusView = !browse.focusView"
           >
             <template #icon>
@@ -112,12 +108,12 @@ const buttonSize = computed(() => (state.vw < 900 ? 'small' : 'large'));
         >
           <n-button
             quaternary
-            :color="toolbarTxtColor"
             :size="buttonSize"
             :title="$t('browse.toolbar.tipOpenResourceList')"
             :focusable="false"
             :bordered="false"
             data-tour-key="browseResourceDrawer"
+            :theme-overrides="theme.toolbarBtnTheme"
             @click="browse.showResourceToggleDrawer = true"
           >
             <template #icon>
diff --git a/Tekst-Web/src/stores/theme.ts b/Tekst-Web/src/stores/theme.ts
@@ -9,7 +9,7 @@ import {
   toRgba,
   transparentize,
 } from 'color2k';
-import type { GlobalThemeOverrides } from 'naive-ui';
+import type { ButtonProps, GlobalThemeOverrides } from 'naive-ui';
 import { darkTheme, lightTheme } from 'naive-ui';
 import { defineStore } from 'pinia';
 import { computed, watchEffect } from 'vue';
@@ -151,6 +151,11 @@ export const useThemeStore = defineStore('theme', () => {
     };
   });
 
+  const toolbarBtnTheme = computed<NonNullable<ButtonProps['themeOverrides']>>(() => ({
+    colorQuaternaryHover: dark.value ? '#0002' : '#fff2',
+    textColor: dark.value ? '#333' : '#fff',
+  }));
+
   // set/update global CSS vars for use in CSS contexts
   watchEffect(() => {
     Object.entries({
@@ -192,5 +197,6 @@ export const useThemeStore = defineStore('theme', () => {
     nuiThemeOverrides,
     colors,
     getTextColors,
+    toolbarBtnTheme,
   };
 });
diff --git a/Tekst-Web/src/views/ContentsView.vue b/Tekst-Web/src/views/ContentsView.vue

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`"title": "Tekst-Dev",`
`5`	`5`	`"summary": "An online text research platform",`
`6`	`6`	`"contact": {},`
`7`		`- "version": "0.48.3a0"`
	`7`	`+ "version": "0.48.4a0"`
`8`	`8`	`},`
`9`	`9`	`"servers": [`
`10`	`10`	`{`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "tekst",`
`3`		`- "version": "0.48.3-alpha.0",`
	`3`	`+ "version": "0.48.4-alpha.0",`
`4`	`4`	`"private": true,`
`5`	`5`	`"type": "module",`
`6`	`6`	`"scripts": {`