ui: fixed secondary button contrast

tabby-core/src/services/themes.service.ts

@@ -106,13 +106,13 @@ export class ThemesService {
 
             const themeColors = {
                 primary: theme.colors[accentIndex],
-                secondary: theme.colors[8],
+                secondary: less(theme.background, 0.5).string(),
                 tertiary: theme.colors[8],
                 warning: theme.colors[3],
                 danger: theme.colors[1],
                 success: theme.colors[2],
                 info: theme.colors[4],
-                dark: more(theme.background, 0.5).string(),
+                dark: more(theme.background, 0.75).string(),
                 light: more(theme.foreground, 0.5).string(),
                 link: theme.colors[8], // for .btn-link
             }
@@ -129,7 +129,11 @@ export class ThemesService {
                 vars[`--theme-${key}-less-2`] = less(color, 0.75).string()
                 vars[`--theme-${key}-fg`] = more(color, 3).string()
 
+                vars[`--theme-${key}-active-bg`] = less(color, 1).string()
+                vars[`--theme-${key}-active-fg`] = more(color, 1).string()
+
                 contrastPairs.push([`--theme-${key}`, `--theme-${key}-fg`])
+                contrastPairs.push([`--theme-${key}-active-bg`, `--theme-${key}-active-fg`])
             }
 
             const switchBackground = less(theme.colors[accentIndex], 0.25).string()

tabby-core/src/theme.new.scss

@@ -108,8 +108,8 @@ body {
 }
 
 .nav {
-    --bs-nav-link-color: var(--bs-body-color);
-    --bs-nav-link-hover-color: var(--theme-fg-less-2);
+    --bs-nav-link-color: var(--theme-fg);
+    --bs-nav-link-hover-color: var(--theme-fg-less);
     --bs-nav-link-disabled-color: var(--bs-gray);
 }
 
@@ -194,14 +194,14 @@ tab-body {
         --bs-btn-hover-bg: var(--theme-#{$color}-less);
 
         --bs-btn-active-border-color: var(--theme-#{$color});
-        --bs-btn-active-bg: var(--theme-#{$color}-more);
+        --bs-btn-active-bg: var(--theme-#{$color}-active-bg);
 
         --bs-btn-focus-shadow-rgb: 130, 138, 145;
         --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 
         --bs-btn-color: var(--theme-#{$color}-fg);
         --bs-btn-hover-color: var(--theme-#{$color}-fg);
-        --bs-btn-active-color: var(--theme-#{$color}-fg);
+        --bs-btn-active-color: var(--theme-#{$color}-active-fg);
         --bs-btn-disabled-color: var(--theme-#{$color}-fg);
     }