dark mode and such
This commit is contained in:
parent
7db4fe00fd
commit
ed1e429a73
|
|
@ -77,6 +77,7 @@ type CodeExamplesProps = {
|
||||||
// Container for multiple code examples
|
// Container for multiple code examples
|
||||||
export const CodeExamples: FC<CodeExamplesProps> = ({ examples }) => {
|
export const CodeExamples: FC<CodeExamplesProps> = ({ examples }) => {
|
||||||
return (
|
return (
|
||||||
|
<div class="code-examples-container">
|
||||||
<VStack
|
<VStack
|
||||||
gap={2}
|
gap={2}
|
||||||
style={{
|
style={{
|
||||||
|
|
@ -90,6 +91,7 @@ export const CodeExamples: FC<CodeExamplesProps> = ({ examples }) => {
|
||||||
<Code key={i}>{example}</Code>
|
<Code key={i}>{example}</Code>
|
||||||
))}
|
))}
|
||||||
</VStack>
|
</VStack>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -105,7 +107,6 @@ function tokenizeJSX(code: string): Token[] {
|
||||||
while (i < code.length) {
|
while (i < code.length) {
|
||||||
// Match opening/closing tags: < or </
|
// Match opening/closing tags: < or </
|
||||||
if (code[i] === "<") {
|
if (code[i] === "<") {
|
||||||
const tagStart = i
|
|
||||||
i++
|
i++
|
||||||
|
|
||||||
// Check for closing tag
|
// Check for closing tag
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@ export const Divider: FC<DividerProps> = ({ children, style }) => {
|
||||||
padding: "0 12px",
|
padding: "0 12px",
|
||||||
fontSize: "14px",
|
fontSize: "14px",
|
||||||
color: "#6b7280",
|
color: "#6b7280",
|
||||||
backgroundColor: "white",
|
backgroundColor: "#ffffff",
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
295
test/layout.tsx
Normal file
295
test/layout.tsx
Normal file
|
|
@ -0,0 +1,295 @@
|
||||||
|
import "hono/jsx"
|
||||||
|
import { raw } from "hono/html"
|
||||||
|
|
||||||
|
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>
|
||||||
|
<style>
|
||||||
|
{raw(`
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #ffffff;
|
||||||
|
--text: #1f2937;
|
||||||
|
--border: #e5e7eb;
|
||||||
|
--code-bg: #f9fafb;
|
||||||
|
--code-border: #e5e7eb;
|
||||||
|
--toggle-bg: #e5e7eb;
|
||||||
|
--toggle-active: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--bg: #111827;
|
||||||
|
--text: #f9fafb;
|
||||||
|
--border: #374151;
|
||||||
|
--code-bg: #1f2937;
|
||||||
|
--code-border: #374151;
|
||||||
|
--toggle-bg: #374151;
|
||||||
|
--toggle-active: #60a5fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
font-family: system-ui, -apple-system, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode-toggle {
|
||||||
|
position: fixed;
|
||||||
|
top: 16px;
|
||||||
|
right: 16px;
|
||||||
|
background: var(--toggle-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 9999px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode-toggle:hover {
|
||||||
|
background: var(--toggle-active);
|
||||||
|
color: white;
|
||||||
|
border-color: var(--toggle-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
position: relative;
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 24px;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
background: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title:has(.home-link) {
|
||||||
|
padding-left: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-link {
|
||||||
|
position: absolute;
|
||||||
|
left: 24px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: var(--toggle-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--text);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-link:hover {
|
||||||
|
background: var(--toggle-active);
|
||||||
|
color: white;
|
||||||
|
border-color: var(--toggle-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Update code example styles for dark mode */
|
||||||
|
[data-theme="dark"] .code-examples-container {
|
||||||
|
background-color: var(--code-bg) !important;
|
||||||
|
border-color: var(--code-border) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Syntax highlighting colors for dark mode - even lighter for better readability */
|
||||||
|
[data-theme="dark"] .code-examples-container span[style*="color: #8b5cf6"] {
|
||||||
|
color: #e9d5ff !important; /* much lighter violet */
|
||||||
|
}
|
||||||
|
[data-theme="dark"] .code-examples-container span[style*="color: #0ea5e9"] {
|
||||||
|
color: #bfdbfe !important; /* much lighter cyan */
|
||||||
|
}
|
||||||
|
[data-theme="dark"] .code-examples-container span[style*="color: #10b981"] {
|
||||||
|
color: #a7f3d0 !important; /* much lighter emerald */
|
||||||
|
}
|
||||||
|
[data-theme="dark"] .code-examples-container span[style*="color: #f59e0b"] {
|
||||||
|
color: #fde68a !important; /* much lighter amber */
|
||||||
|
}
|
||||||
|
[data-theme="dark"] .code-examples-container span[style*="color: #ef4444"] {
|
||||||
|
color: #fecaca !important; /* much lighter red */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode for specific demo colors */
|
||||||
|
[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 button colors */
|
||||||
|
[data-theme="dark"] button[style*="#3b82f6"] { background-color: #1e40af !important; }
|
||||||
|
[data-theme="dark"] button[style*="#64748b"] { background-color: #334155 !important; }
|
||||||
|
[data-theme="dark"] button[style*="#ef4444"] { background-color: #991b1b !important; }
|
||||||
|
|
||||||
|
/* Dark mode for buttons - removed filter to maintain colors */
|
||||||
|
|
||||||
|
/* Dark mode for borders */
|
||||||
|
[data-theme="dark"] *[style*="border"] {
|
||||||
|
border-color: var(--border) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode for images */
|
||||||
|
[data-theme="dark"] img {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode for cards and containers */
|
||||||
|
[data-theme="dark"] div[style*="border: 1px solid #d1d5db"] {
|
||||||
|
border-color: #374151 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Improve text visibility - very important! */
|
||||||
|
[data-theme="dark"] p,
|
||||||
|
[data-theme="dark"] h1,
|
||||||
|
[data-theme="dark"] h2,
|
||||||
|
[data-theme="dark"] h3,
|
||||||
|
[data-theme="dark"] h4,
|
||||||
|
[data-theme="dark"] h5,
|
||||||
|
[data-theme="dark"] span,
|
||||||
|
[data-theme="dark"] div,
|
||||||
|
[data-theme="dark"] li {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure button text is visible */
|
||||||
|
[data-theme="dark"] button {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Override black text colors */
|
||||||
|
[data-theme="dark"] *[style*="color: #000000"],
|
||||||
|
[data-theme="dark"] *[style*="color:#000000"],
|
||||||
|
[data-theme="dark"] *[style*="color: black"],
|
||||||
|
[data-theme="dark"] *[style*="color:black"] {
|
||||||
|
color: var(--text) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Special case for buttons with transparent or outline variants */
|
||||||
|
[data-theme="dark"] button[style*="background: transparent"],
|
||||||
|
[data-theme="dark"] button[style*="backgroundColor: transparent"] {
|
||||||
|
color: var(--text) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix divider backgrounds in dark mode */
|
||||||
|
[data-theme="dark"] span[style*="#ffffff"] {
|
||||||
|
background-color: var(--bg) !important;
|
||||||
|
color: #9ca3af !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix any #ffffff backgrounds in dark mode */
|
||||||
|
[data-theme="dark"] *[style*="background-color: rgb(255, 255, 255)"],
|
||||||
|
[data-theme="dark"] *[style*="#ffffff"] {
|
||||||
|
background-color: var(--bg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix link colors in dark mode */
|
||||||
|
[data-theme="dark"] a[style*="#3b82f6"] {
|
||||||
|
color: #60a5fa !important;
|
||||||
|
}
|
||||||
|
`)}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<button class="dark-mode-toggle" onclick="toggleDarkMode()">
|
||||||
|
<span class="icon">🌙</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="page-title">
|
||||||
|
{showHomeLink && (
|
||||||
|
<a href="/" class="home-link">
|
||||||
|
<span>🏠</span>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{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('.dark-mode-toggle')
|
||||||
|
const icon = button.querySelector('.icon')
|
||||||
|
const label = button.querySelector('.label')
|
||||||
|
|
||||||
|
if (theme === 'dark') {
|
||||||
|
icon.textContent = '☀️';
|
||||||
|
} else {
|
||||||
|
icon.textContent = '🌙';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`)}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -2,6 +2,7 @@ import { Hono } from 'hono'
|
||||||
import { readdirSync } from 'fs'
|
import { readdirSync } from 'fs'
|
||||||
import { join } from 'path'
|
import { join } from 'path'
|
||||||
import { capitalize } from './utils'
|
import { capitalize } from './utils'
|
||||||
|
import { Layout } from './layout'
|
||||||
|
|
||||||
const port = process.env.PORT ?? '3100'
|
const port = process.env.PORT ?? '3100'
|
||||||
const app = new Hono()
|
const app = new Hono()
|
||||||
|
|
@ -15,14 +16,29 @@ app.get('/:file', async c => {
|
||||||
return c.text('404 Not Found', 404)
|
return c.text('404 Not Found', 404)
|
||||||
|
|
||||||
const page = await import(path + `?t=${Date.now()}`)
|
const page = await import(path + `?t=${Date.now()}`)
|
||||||
return c.html(<><h1><{capitalize(file)} /></h1><page.Test req={c.req} /></>)
|
return c.html(
|
||||||
|
<Layout title={`<${capitalize(file)} />`}>
|
||||||
|
<page.Test req={c.req} />
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
app.get('/', c => {
|
app.get('/', c => {
|
||||||
return c.html(<>
|
return c.html(
|
||||||
<h1>Test Files</h1>
|
<Layout title="🐺 howl" showHomeLink={false}>
|
||||||
<ul style='font-size:150%'>{testFiles().map(x => <li><a href={`/${x}`}>{x}</a></li>)}</ul>
|
<div style="padding: 24px;">
|
||||||
</>)
|
<ul style="font-size: 18px; line-height: 2;">
|
||||||
|
{testFiles().map(x => (
|
||||||
|
<li>
|
||||||
|
<a href={`/${x}`} style="color: #3b82f6; text-decoration: none;">
|
||||||
|
{x}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
function testFiles(): string[] {
|
function testFiles(): string[] {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user