From f66a47d0bb9a3c0374653cef3b42e64766d9408c Mon Sep 17 00:00:00 2001 From: Chris Wanstrath <2+defunkt@users.noreply.github.com> Date: Mon, 29 Dec 2025 13:27:11 -0800 Subject: [PATCH] dark theme --- examples/ssr/darkTheme.tsx | 37 ++++++++++++++++++++++++++++++++ examples/ssr/helpers.tsx | 43 ++++---------------------------------- 2 files changed, 41 insertions(+), 39 deletions(-) create mode 100644 examples/ssr/darkTheme.tsx diff --git a/examples/ssr/darkTheme.tsx b/examples/ssr/darkTheme.tsx new file mode 100644 index 0000000..8bfe4cf --- /dev/null +++ b/examples/ssr/darkTheme.tsx @@ -0,0 +1,37 @@ +export default { + colors: { + bg: '#0a0a0a', + bgElevated: '#111', + bgHover: '#1a1a1a', + + fg: '#00ff00', + fgMuted: '#888', + fgDim: '#444', + + border: '#222', + borderActive: '#00ff00', + + accent: '#00ff00', + accentDim: '#008800', + }, + + fonts: { + mono: "'Monaco', 'Menlo', 'Consolas', monospace", + sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", + }, + + spacing: { + xs: 8, + sm: 12, + md: 16, + lg: 24, + xl: 32, + xxl: 48, + }, + + radius: { + sm: 4, + md: 8, + lg: 12, + } +} \ No newline at end of file diff --git a/examples/ssr/helpers.tsx b/examples/ssr/helpers.tsx index e07cb10..223dc16 100644 --- a/examples/ssr/helpers.tsx +++ b/examples/ssr/helpers.tsx @@ -1,42 +1,7 @@ import { define, Styles } from '../../src' +import darkTheme from './darkTheme' -export const theme = { - colors: { - bg: '#0a0a0a', - bgElevated: '#111', - bgHover: '#1a1a1a', - - fg: '#00ff00', - fgMuted: '#888', - fgDim: '#444', - - border: '#222', - borderActive: '#00ff00', - - accent: '#00ff00', - accentDim: '#008800', - }, - - fonts: { - mono: "'Monaco', 'Menlo', 'Consolas', monospace", - sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", - }, - - spacing: { - xs: 8, - sm: 12, - md: 16, - lg: 24, - xl: 32, - xxl: 48, - }, - - radius: { - sm: 4, - md: 8, - lg: 12, - } -} +export const theme = darkTheme export const Body = define('Body', { base: 'body', @@ -85,7 +50,7 @@ export const ExampleSection = define('ExampleSection', { } }) -const Nav = define('SSR_Nav', { +const Nav = define({ base: 'nav', display: 'flex', @@ -97,7 +62,7 @@ const Nav = define('SSR_Nav', { borderRadius: theme.radius.sm, }) -const NavLink = define('SSR_NavLink', { +const NavLink = define({ base: 'a', color: theme.colors.fgMuted,