diff --git a/packages/website/src/components/SidebarItems.tsx b/packages/website/src/components/SidebarItems.tsx
index 379c2f5c4..cb0bb6796 100644
--- a/packages/website/src/components/SidebarItems.tsx
+++ b/packages/website/src/components/SidebarItems.tsx
@@ -81,6 +81,10 @@ const useStyles = createStyles((theme) => ({
'&:hover': {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+
+ '&[data-active]': {
+ color: theme.white,
+ },
},
},
}));
diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx
index 394aafc42..aa4037122 100644
--- a/packages/website/src/components/SidebarLayout.tsx
+++ b/packages/website/src/components/SidebarLayout.tsx
@@ -26,7 +26,7 @@ import Image from 'next/future/image';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { type PropsWithChildren, useState } from 'react';
-import { VscChevronDown, VscPackage, VscVersions } from 'react-icons/vsc';
+import { VscChevronDown, VscGithubInverted, VscPackage, VscVersions } from 'react-icons/vsc';
import { WiDaySunny, WiNightClear } from 'react-icons/wi';
import useSWR from 'swr';
import { SidebarItems } from './SidebarItems';
@@ -110,7 +110,6 @@ export function SidebarLayout({
);
const theme = useMantineTheme();
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
- const dark = colorScheme === 'dark';
const [opened, setOpened] = useState(false);
const [openedLibPicker, setOpenedLibPicker] = useState(false);
@@ -239,14 +238,29 @@ export function SidebarLayout({
{breadcrumbs}
- toggleColorScheme()}
- title="Toggle color scheme"
- >
- {dark ? : }
-
+
+
+
+
+
+
+ toggleColorScheme()}
+ title="Toggle color scheme"
+ radius="xs"
+ >
+ {colorScheme === 'dark' ? : }
+
+
}
@@ -267,6 +281,7 @@ export function SidebarLayout({
({
position: 'fixed',
bottom: 0,