dark theme

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,
+  }
+}

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,