diff --git a/packages/website/src/components/CodeListing.tsx b/packages/website/src/components/CodeListing.tsx
index 6ba880d4e..e620ebac1 100644
--- a/packages/website/src/components/CodeListing.tsx
+++ b/packages/website/src/components/CodeListing.tsx
@@ -17,10 +17,12 @@ export enum CodeListingSeparatorType {
 const useStyles = createStyles((theme) => ({
 	outer: {
 		display: 'flex',
+		alignItems: 'center',
 		gap: 16,
 
 		[theme.fn.smallerThan('sm')]: {
 			flexDirection: 'column',
+			alignItems: 'unset',
 		},
 	},
 }));
diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx
index cf3d0fd4a..9d475a08c 100644
--- a/packages/website/src/components/DocContainer.tsx
+++ b/packages/website/src/components/DocContainer.tsx
@@ -1,4 +1,16 @@
-import { Group, Stack, Title, Text, Box, MediaQuery, Aside, ScrollArea, Skeleton, Divider } from '@mantine/core';
+import {
+	Group,
+	Stack,
+	Title,
+	Text,
+	Box,
+	MediaQuery,
+	Aside,
+	ScrollArea,
+	Skeleton,
+	Divider,
+	useMantineColorScheme,
+} from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { useRouter } from 'next/router';
 import { Fragment, type PropsWithChildren } from 'react';
@@ -12,7 +24,7 @@ import {
 	VscSymbolParameter,
 } from 'react-icons/vsc';
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { vscDarkPlus, ghcolors } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { HyperlinkedText } from './HyperlinkedText';
 import { Section } from './Section';
 import { TableOfContentItems } from './TableOfContentItems';
@@ -63,6 +75,7 @@ export function DocContainer({
 }: DocContainerProps) {
 	const router = useRouter();
 	const matches = useMediaQuery('(max-width: 768px)');
+	const { colorScheme } = useMantineColorScheme();
 
 	return (
 		<Group>
@@ -88,7 +101,7 @@ export function DocContainer({
 						<SyntaxHighlighter
 							wrapLongLines
 							language="typescript"
-							style={vscDarkPlus}
+							style={colorScheme === 'dark' ? vscDarkPlus : ghcolors}
 							codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
 						>
 							{excerpt}
diff --git a/packages/website/src/components/MethodItem.tsx b/packages/website/src/components/MethodItem.tsx
index a56156620..32a26df37 100644
--- a/packages/website/src/components/MethodItem.tsx
+++ b/packages/website/src/components/MethodItem.tsx
@@ -11,10 +11,12 @@ import { Visibility } from '~/DocModel/Visibility';
 const useStyles = createStyles((theme) => ({
 	outer: {
 		display: 'flex',
+		alignItems: 'center',
 		gap: 16,
 
 		[theme.fn.smallerThan('sm')]: {
 			flexDirection: 'column',
+			alignItems: 'unset',
 		},
 	},
 }));
diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx
index c30b36993..39360f982 100644
--- a/packages/website/src/components/SidebarLayout.tsx
+++ b/packages/website/src/components/SidebarLayout.tsx
@@ -107,7 +107,7 @@ const useStyles = createStyles(
 			paddingLeft: 324,
 
 			[theme.fn.smallerThan('lg')]: {
-				paddingRight: 24,
+				paddingRight: 54,
 			},
 
 			[theme.fn.smallerThan('md')]: {
@@ -115,6 +115,7 @@ const useStyles = createStyles(
 			},
 
 			[theme.fn.smallerThan('sm')]: {
+				paddingRight: 24,
 				height: 300,
 			},
 		},
@@ -328,7 +329,7 @@ export function SidebarLayout({
 				<Box sx={(theme) => ({ height: 200, [theme.fn.smallerThan('sm')]: { height: 300 } })}></Box>
 				<Box
 					component="footer"
-					sx={{ paddingRight: data?.member?.kind !== 'Class' && data?.member?.kind !== 'Interface' ? 24 : 324 }}
+					sx={{ paddingRight: data?.member?.kind !== 'Class' && data?.member?.kind !== 'Interface' ? 54 : 324 }}
 					className={classes.footer}
 					pt={50}
 				>
diff --git a/packages/website/src/components/tsdoc/TSDoc.tsx b/packages/website/src/components/tsdoc/TSDoc.tsx
index 4cc9926f8..97415d4e2 100644
--- a/packages/website/src/components/tsdoc/TSDoc.tsx
+++ b/packages/website/src/components/tsdoc/TSDoc.tsx
@@ -1,9 +1,9 @@
-import { Anchor, Box, Code, Text } from '@mantine/core';
+import { Anchor, Box, Code, Text, useMantineColorScheme } from '@mantine/core';
 import { DocNodeKind, StandardTags } from '@microsoft/tsdoc';
 import Link from 'next/link';
 import { Fragment, type ReactNode } from 'react';
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { vscDarkPlus, ghcolors } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { BlockComment } from './BlockComment';
 import type { DocBlockJSON } from '~/DocModel/comment/CommentBlock';
 import type { AnyDocNodeJSON } from '~/DocModel/comment/CommentNode';
@@ -14,6 +14,8 @@ import type { DocPlainTextJSON } from '~/DocModel/comment/PlainTextCommentNode';
 import type { DocCommentJSON } from '~/DocModel/comment/RootComment';
 
 export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
+	const { colorScheme } = useMantineColorScheme();
+
 	let numberOfExamples = 0;
 	let exampleIndex = 0;
 
@@ -74,7 +76,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 						wrapLines
 						wrapLongLines
 						language={language}
-						style={vscDarkPlus}
+						style={colorScheme === 'dark' ? vscDarkPlus : ghcolors}
 						codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
 					>
 						{code}
diff --git a/packages/website/src/pages/index.tsx b/packages/website/src/pages/index.tsx
index f66e51764..5676322aa 100644
--- a/packages/website/src/pages/index.tsx
+++ b/packages/website/src/pages/index.tsx
@@ -1,9 +1,9 @@
-import { createStyles, Container, Title, Button, Group, Text, Center, Box } from '@mantine/core';
+import { createStyles, Container, Title, Button, Group, Text, Center, Box, useMantineColorScheme } from '@mantine/core';
 import Image from 'next/future/image';
 import Link from 'next/link';
 import { FiExternalLink } from 'react-icons/fi';
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { vscDarkPlus, ghcolors } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 const useStyles = createStyles((theme) => ({
 	outer: {
@@ -60,6 +60,7 @@ const useStyles = createStyles((theme) => ({
 
 export default function IndexRoute() {
 	const { classes } = useStyles();
+	const { colorScheme } = useMantineColorScheme();
 
 	return (
 		<Container className={classes.outer} size="lg">
@@ -91,7 +92,7 @@ export default function IndexRoute() {
 					<SyntaxHighlighter
 						wrapLongLines
 						language="typescript"
-						style={vscDarkPlus}
+						style={colorScheme === 'dark' ? vscDarkPlus : ghcolors}
 						codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
 					>
 						{`import { Client, GatewayIntentBits } from 'discord.js';