diff --git a/packages/repco-docs-website/app/components/DarkModeToggle.tsx b/packages/repco-docs-website/app/components/DarkModeToggle.tsx
new file mode 100644
index 00000000..1b85fd18
--- /dev/null
+++ b/packages/repco-docs-website/app/components/DarkModeToggle.tsx
@@ -0,0 +1,53 @@
+//thx Kent
+import clsx from 'clsx'
+import { MoonIcon, SunIcon } from '~/components/Icons'
+import { Theme, Themed, useTheme } from '~/lib/theme-provider'
+
+const iconTransformOrigin = { transformOrigin: '50% 100px' }
+export function DarkModeToggle({
+ variant = 'icon',
+}: {
+ variant?: 'icon' | 'labelled'
+}) {
+ const [, setTheme] = useTheme()
+ return (
+
+ )
+}
diff --git a/packages/repco-docs-website/app/components/Icons.tsx b/packages/repco-docs-website/app/components/Icons.tsx
new file mode 100644
index 00000000..705c2b0b
--- /dev/null
+++ b/packages/repco-docs-website/app/components/Icons.tsx
@@ -0,0 +1,1306 @@
+import clsx from "clsx";
+
+export function AppleIcon() {
+ return (
+
+ );
+}
+
+const arrowRotationMap = {
+ up: "rotate-180",
+ right: "-rotate-90",
+ down: "rotate-0",
+ left: "rotate-90",
+ "top-right": "-rotate-135",
+};
+
+export function ArrowIcon({
+ direction,
+ size = 32,
+ className,
+}: {
+ direction: "up" | "right" | "down" | "left" | "top-right";
+ size?: number;
+ className?: string;
+}) {
+ return (
+
+ );
+}
+
+export function AwardIcon({ size = 24 }: { size?: number } = {}) {
+ return (
+
+ );
+}
+
+export function BadgeIcon({ size = 24 }: { size?: number } = {}) {
+ return (
+
+ );
+}
+
+export function BehanceIcon({
+ size = 24,
+ title = "Behance",
+}: {
+ size?: number;
+ title?: string;
+}) {
+ return (
+
+ );
+}
+
+export function BookIcon({ size = 24 }: { size?: number } = {}) {
+ return (
+
+ );
+}
+
+export function BriefcaseIcon({ size = 24 }: { size?: number } = {}) {
+ return (
+
+ );
+}
+
+export function CheckCircledIcon({
+ size = 36,
+ className,
+}: {
+ size?: number;
+ className?: string;
+}) {
+ return (
+
+ );
+}
+
+export function CheckIcon() {
+ return (
+
+ );
+}
+
+export function ChevronDownIcon({
+ className,
+ title,
+}: {
+ className?: string;
+ title?: string;
+}) {
+ return (
+
+ );
+}
+
+export function ChevronLeftIcon() {
+ return (
+
+ );
+}
+
+export function ChevronRightIcon() {
+ return (
+
+ );
+}
+
+export function ChevronUpIcon({
+ className,
+ title,
+}: {
+ className?: string;
+ title?: string;
+}) {
+ return (
+
+ );
+}
+
+export function ClipboardIcon() {
+ return (
+
+ );
+}
+
+export function CodeIcon({ size = 24 }: { size?: number } = {}) {
+ return (
+
+ );
+}
+
+export function CodepenIcon({
+ size = 24,
+ title = "Codepen",
+}: {
+ size?: number;
+ title?: string;
+}) {
+ return (
+
+ );
+}
+
+export function CopyIcon() {
+ return (
+
+ );
+}
+
+export function DiscordLogo() {
+ return (
+
+ );
+}
+
+export function DollarIcon({ size = 24 }: { size?: number } = {}) {
+ return (
+
+ );
+}
+
+export function DribbbleIcon({
+ size = 24,
+ title = "Dribbble",
+}: {
+ size?: number;
+ title?: string;
+}) {
+ return (
+
+ );
+}
+
+export function EmojiHappyIcon({ size = 24 }: { size?: number } = {}) {
+ return (
+
+ );
+}
+
+export function EyeIcon({ size = 24 }: { size?: number }) {
+ return (
+
+ );
+}
+
+export function FastForwardIcon({ size = 24 }: { size?: number } = {}) {
+ return (
+
+ );
+}
+
+export function GithubIcon({
+ size = 24,
+ title = "GitHub",
+}: {
+ size?: number;
+ title?: string;
+}) {
+ return (
+
+ );
+}
+
+export function GlobeIcon({
+ size = 24,
+ title = "Globe",
+}: {
+ size?: number;
+ title?: string;
+}) {
+ return (
+
+ );
+}
+
+export function GoogleIcon() {
+ return (
+
+ );
+}
+
+export function HeartIcon({ size = 24 }: { size?: number } = {}) {
+ return (
+
+ );
+}
+
+export function InstagramIcon({
+ size = 24,
+ title = "Instagram",
+}: {
+ size?: number;
+ title?: string;
+}) {
+ return (
+
+ );
+}
+
+export function LaptopIcon({ size = 24 }: { size?: number } = {}) {
+ return (
+
+ );
+}
+
+export function LinkedInIcon({
+ size = 24,
+ title = "LinkedIn",
+}: {
+ size?: number;
+ title?: string;
+}) {
+ return (
+
+ );
+}
+
+export function LogoutIcon() {
+ return (
+
+ );
+}
+
+export function MailIcon({ size = 24 }: { size?: number }) {
+ return (
+
+ );
+}
+
+export function MenuIcon() {
+ return (
+
+ );
+}
+
+export function MessageIcon({ size = 24 }: { size?: number } = {}) {
+ return (
+
+ );
+}
+
+export function MicrophoneIcon({ size = 24 }: { size?: number }) {
+ return (
+
+ );
+}
+
+export function MinIcon() {
+ return (
+
+ );
+}
+
+export function MoonIcon() {
+ return (
+
+ );
+}
+
+export function MugIcon({ size = 24 }: { size?: number } = {}) {
+ return (
+
+ );
+}
+
+export function PartyIcon({ size = 24 }: { size?: number }) {
+ return (
+
+ );
+}
+
+export function PauseIcon({ size = 24 }: { size?: number }) {
+ return (
+
+ );
+}
+
+export function PlayIcon() {
+ return (
+
+ );
+}
+
+export function PlusIcon() {
+ return (
+
+ );
+}
+
+export function RocketIcon({ size = 24 }: { size?: number } = {}) {
+ return (
+
+ );
+}
+
+export function RssIcon({
+ size = 24,
+ title = "RSS",
+ className,
+}: {
+ size?: number;
+ title?: string;
+ className?: string;
+}) {
+ return (
+
+ );
+}
+
+export function SearchIcon() {
+ return (
+
+ );
+}
+
+export function SpinnerIcon({
+ size = 24,
+ ...svgProps
+}: { size?: number } & React.SVGProps) {
+ return (
+
+ );
+}
+
+export function SpotifyIcon() {
+ return (
+
+ );
+}
+
+export function SquareIcon({ size = 24 }: { size?: number }) {
+ return (
+
+ );
+}
+
+export function SunIcon() {
+ return (
+
+ );
+}
+
+export function TriangleIcon({ size = 24 }: { size?: number }) {
+ return (
+
+ );
+}
+
+export function TrophyIcon({ size = 24 }: { size?: number } = {}) {
+ return (
+
+ );
+}
+
+export function TwitchIcon({
+ size = 24,
+ title = "Twitch",
+}: {
+ size?: number;
+ title?: string;
+}) {
+ return (
+
+ );
+}
+
+export function TwitterIcon({
+ size = 24,
+ title = "Twitter",
+}: {
+ size?: number;
+ title?: string;
+}) {
+ return (
+
+ );
+}
+
+export function UsersIcon({ size = 24 }: { size?: number } = {}) {
+ return (
+
+ );
+}
+
+export function YoutubeIcon({
+ size = 24,
+ title = "YouTube",
+}: {
+ size?: number;
+ title?: string;
+}) {
+ return (
+
+ );
+}
diff --git a/packages/repco-docs-website/app/components/layout.tsx b/packages/repco-docs-website/app/components/layout.tsx
index 5bd05ae7..d52d98c1 100644
--- a/packages/repco-docs-website/app/components/layout.tsx
+++ b/packages/repco-docs-website/app/components/layout.tsx
@@ -1,6 +1,7 @@
import { NavLink, useLocation, useParams } from '@remix-run/react'
import { PropsWithChildren, useEffect, useMemo, useState } from 'react'
import { Entry, EntryNode, intoFolders } from '~/lib/util'
+import { DarkModeToggle } from './DarkModeToggle'
import { SearchForm } from './search'
type NavProps = { index: Entry[] }
@@ -18,6 +19,7 @@ export function Layout(props: LayoutProps) {
{slug}
+
@@ -49,9 +51,12 @@ function Nav(props: NavProps) {
>
{isVisible ? 'Hide menu' : 'Show menu'}
+