Chris Wanstrath
0cad100197
/ |/ \ / \ / \ / | $$$$$$$$//$$$$$$ |$$$$$$$ |/$$$$$$ |$$$$$$$$/ $$ |__ $$ | $$ |$$ |__$$ |$$ | _$$/ $$ |__ $$ | $$ | $$ |$$ $$< $$ |/ |$$ | $$$$$/ $$ | $$ |$$$$$$$ |$$ |$$$$ |$$$$$/ $$ | $$ \__$$ |$$ | $$ |$$ \__$$ |$$ |_____ $$ | $$ $$/ $$ | $$ |$$ $$/ $$ | $$/ $$$$$$/ $$/ $$/ $$$$$$/ $$$$$$$$/
142 lines
4.7 KiB
TypeScript
142 lines
4.7 KiB
TypeScript
import "hono/jsx"
|
|
import { raw } from "hono/html"
|
|
import { Styles } from "forge"
|
|
import {
|
|
DarkModeToggle,
|
|
PageTitle,
|
|
HomeLink,
|
|
NavLink,
|
|
NavList,
|
|
NavItem,
|
|
Body,
|
|
} from "../src/layout"
|
|
|
|
type LayoutProps = {
|
|
title: string
|
|
children: any
|
|
showHomeLink?: boolean
|
|
}
|
|
|
|
export const Layout = ({ title, children, showHomeLink = true }: LayoutProps) => {
|
|
return (
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>{title} - Howl UI</title>
|
|
<Styles />
|
|
<style>
|
|
{raw(`
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Dark mode color box adjustments */
|
|
[data-theme="dark"] div[style*="#fecaca"] { background-color: #7f1d1d !important; }
|
|
[data-theme="dark"] div[style*="#bbf7d0"] { background-color: #14532d !important; }
|
|
[data-theme="dark"] div[style*="#bfdbfe"] { background-color: #1e3a8a !important; }
|
|
[data-theme="dark"] div[style*="#fef08a"] { background-color: #713f12 !important; }
|
|
[data-theme="dark"] div[style*="#e9d5ff"] { background-color: #581c87 !important; }
|
|
[data-theme="dark"] div[style*="#fbcfe8"] { background-color: #831843 !important; }
|
|
[data-theme="dark"] div[style*="#fed7aa"] { background-color: #7c2d12 !important; }
|
|
[data-theme="dark"] div[style*="#f3f4f6"] { background-color: #1f2937 !important; }
|
|
[data-theme="dark"] div[style*="#e5e7eb"] { background-color: #374151 !important; }
|
|
[data-theme="dark"] div[style*="#d1d5db"] { background-color: #4b5563 !important; }
|
|
[data-theme="dark"] div[style*="#9ca3af"] { background-color: #6b7280 !important; }
|
|
|
|
/* Dark mode for colored boxes */
|
|
[data-theme="dark"] div[style*="#ef4444"] {
|
|
background-color: #991b1b !important;
|
|
color: #fca5a5 !important;
|
|
}
|
|
[data-theme="dark"] div[style*="#22c55e"] {
|
|
background-color: #15803d !important;
|
|
color: #86efac !important;
|
|
}
|
|
[data-theme="dark"] div[style*="#3b82f6"] {
|
|
background-color: #1e40af !important;
|
|
color: #93c5fd !important;
|
|
}
|
|
|
|
/* Dark mode for images */
|
|
[data-theme="dark"] img {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Fix white backgrounds in dark mode */
|
|
[data-theme="dark"] *[style*="background-color: rgb(255, 255, 255)"],
|
|
[data-theme="dark"] *[style*="#ffffff"] {
|
|
background-color: var(--theme-colors-bg) !important;
|
|
}
|
|
|
|
/* Fix link colors */
|
|
[data-theme="dark"] a[style*="#3b82f6"] {
|
|
color: #60a5fa !important;
|
|
}
|
|
`)}
|
|
</style>
|
|
</head>
|
|
<Body>
|
|
<DarkModeToggle onclick="toggleDarkMode()">
|
|
<span class="icon">🌙</span>
|
|
</DarkModeToggle>
|
|
|
|
<PageTitle hasHomeLink={showHomeLink}>
|
|
{showHomeLink && (
|
|
<HomeLink href="/">
|
|
<span>🏠</span>
|
|
</HomeLink>
|
|
)}
|
|
{title}
|
|
</PageTitle>
|
|
|
|
{children}
|
|
|
|
<script>
|
|
{raw(`
|
|
const getTheme = () =>
|
|
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ?
|
|
'dark' :
|
|
'light'
|
|
|
|
const theme = getTheme()
|
|
document.documentElement.setAttribute('data-theme', theme)
|
|
updateToggleButton(theme)
|
|
|
|
if (window.matchMedia) {
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
|
const newTheme = e.matches ? 'dark' : 'light'
|
|
document.documentElement.setAttribute('data-theme', newTheme)
|
|
updateToggleButton(newTheme)
|
|
})
|
|
}
|
|
|
|
function toggleDarkMode() {
|
|
const current = document.documentElement.getAttribute('data-theme')
|
|
const newTheme = current === 'dark' ? 'light' : 'dark'
|
|
document.documentElement.setAttribute('data-theme', newTheme)
|
|
updateToggleButton(newTheme)
|
|
}
|
|
|
|
function updateToggleButton(theme) {
|
|
const button = document.querySelector('.DarkModeToggle')
|
|
const icon = button.querySelector('.icon')
|
|
|
|
if (theme === 'dark') {
|
|
icon.textContent = '☀️';
|
|
} else {
|
|
icon.textContent = '🌙';
|
|
}
|
|
}
|
|
`)}
|
|
</script>
|
|
</Body>
|
|
</html>
|
|
)
|
|
}
|
|
|
|
// Export nav components for use in server.tsx
|
|
export { NavLink, NavList, NavItem }
|