update styling for toc

Author: LadyBluenotes

app.config.ts

@@ -51,7 +51,9 @@ function docsData() {
 
 const theme = defineTheme({
 	componentsPath: import.meta.resolve("./src/solidbase-theme"),
+	extends: defaultTheme,
 });
+
 export default defineConfig(
 	createWithSolidBase(theme)(
 		{
@@ -148,6 +150,7 @@ export default defineConfig(
 
 import { readFile } from "node:fs/promises";
 import { codeToHtml } from "shiki";
+import defaultTheme from "@kobalte/solidbase/default-theme";
 
 function heroCodeSnippet() {
 	const virtualModuleId = "solid:hero-code-snippet";

src/ui/layout/table-of-contents.tsx

@@ -65,7 +65,7 @@ export const TableOfContents = () => {
 							href="#_top"
 							classList={{
 								"dark:text-slate-300": currentSection() !== undefined,
-								"text-blue-800 dark:text-blue-300 font-bold hover:text-slate-700 dark:hover:text-slate-200":
+								"text-blue-800 dark:text-blue-300 hover:text-slate-700 dark:hover:text-slate-200 hover:underline underline-offset-2":
 									currentSection() === undefined,
 							}}
 							class="no-underline hover:text-slate-800"
@@ -81,32 +81,32 @@ export const TableOfContents = () => {
 								<a
 									href={section().href}
 									classList={{
-										"dark:text-slate-300": currentSection() !== section().href,
-										"text-blue-800 dark:text-blue-200 hover:text-slate-700 dark:hover:text-slate-200 font-bold":
+										"dark:text-slate-400": currentSection() !== section().href,
+										"text-blue-800 dark:text-blue-200 hover:text-slate-700 dark:hover:text-slate-200 ":
 											currentSection() === section().href,
 									}}
-									class="no-underline hover:text-slate-700 dark:hover:text-blue-300"
+									class="no-underline underline-offset-2 hover:text-slate-700 hover:underline dark:hover:text-blue-300"
 								>
 									{section().title}
 								</a>
 							</span>
 							<Show when={section().children.length !== 0}>
 								<ol
 									role="list"
-									class="list-none space-y-2 pl-2.5 font-bold text-slate-500 hover:text-slate-700 active:font-bold active:text-blue-600 dark:text-slate-300 dark:hover:text-blue-200"
+									class="list-none space-y-2 pl-2.5 text-slate-500 hover:text-slate-700 active:text-blue-600 dark:text-slate-300 dark:hover:text-blue-200"
 								>
 									<Index each={section().children}>
 										{(subSection) => (
 											<li>
 												<a
 													href={subSection().href}
 													classList={{
-														"dark:text-slate-300":
+														"dark:text-slate-400":
 															currentSection() !== subSection().href,
-														"text-blue-800 dark:text-blue-200 hover:text-slate-700 dark:hover:text-slate-200 font-bold":
+														"text-blue-800 dark:text-blue-200 hover:text-slate-700 dark:hover:text-slate-200":
 															currentSection() === subSection().href,
 													}}
-													class="no-underline hover:text-blue-700 dark:hover:text-blue-300"
+													class="no-underline underline-offset-2 hover:text-blue-700 hover:underline dark:hover:text-blue-300"
 												>
 													{subSection().title}
 												</a>