Tab colors

src/dashboardWebView/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './MessageHandlers';
 export * from './darkenColor';
 export * from './getRelPath';
+export * from './opacityColor';
 export * from './preserveColor';
 export * from './updateCssVariables';

src/dashboardWebView/utils/opacityColor.ts

@@ -0,0 +1,19 @@
+export const opacityColor = (color: string | undefined, opacity: number) => {
+  if (color) {
+    if (color.startsWith('#')) {
+      return `${color}${Math.round(opacity * 255)
+        .toString(16)
+        .padStart(2, '0')}`;
+    } else if (color.startsWith('rgba')) {
+      const splits = color.split(',');
+      splits.pop();
+      return `${splits.join(', ')}, ${opacity})`;
+    } else if (color.startsWith('rgb')) {
+      return `${color.replace('rgb', 'rgba').replace(')', `, ${opacity})`)}`;
+    } else {
+      return color;
+    }
+  }
+
+  return color;
+};

src/dashboardWebView/utils/updateCssVariables.ts

@@ -1,5 +1,4 @@
-import { darkenColor } from './darkenColor';
-import { preserveColor } from './preserveColor';
+import { darkenColor, opacityColor, preserveColor } from '.';
 
 export const updateCssVariables = (isDarkTheme: boolean = true) => {
   const styles = getComputedStyle(document.documentElement);
@@ -52,6 +51,17 @@ export const updateCssVariables = (isDarkTheme: boolean = true) => {
     'var(--vscode-list-activeSelectionForeground)'
   );
 
+  // Navigation
+  const tabActiveForeground = styles.getPropertyValue('--vscode-tab-activeForeground');
+  document.documentElement.style.setProperty(
+    '--frontmatter-nav-active',
+    preserveColor(tabActiveForeground) || 'var(--vscode-tab-activeForeground)'
+  );
+  document.documentElement.style.setProperty(
+    '--frontmatter-nav-inactive',
+    opacityColor(tabActiveForeground, 0.6) || 'var(--vscode-tab-inactiveForeground)'
+  );
+
   // Borders
   const borderColor = styles.getPropertyValue('--vscode-panel-border');
   document.documentElement.style.setProperty('--frontmatter-border', 'var(--vscode-panel-border)');