Docs

Introduction

What is rune

Philosophy

Why rune

Architecture

Getting Started

Installation

Quick start

Project structure

The dev loop

Tutorial: build an app

1. Create the app

2. Pages & routes

3. Layouts

4. State with Mimir

5. SSR & data

6. API routes

7. Styling

8. Build & deploy

Core Concepts

The application object

Rendering pipeline

Hydration

The build manifest

Configuration (ekko.json)

Permissions

Conventions

Routing

File-based routing

Dynamic routes

The router (useRouter)

Navigation & Link

Guards & redirects

Programmatic routes

Server-Side Rendering

Overview

The ssr() function

Strategies (eager/lazy)

SSR → hydration

Caching & invalidation

SEO

Mimir, state management

Overview

Atoms

Reading & writing

Selectors (derived state)

Subscriptions & the store

SSR & hydration

Persistence & sessions

Patterns & recipes

Pitfalls

Pages & Layouts

Pages

Layouts

Error & not-found

API Routes

Defining routes

Request & response

Middleware

helmet

cors

rateLimit

bodyLimit

validateContentType

csrf

requestId

timeout

errorHandler

httpsRedirect

secureCookies

ipFilter

safePath

Validation & options

Styling & Theming

SCSS

Theming (light/dark)

Asgard integration

No flash (no-FOUC)

Building & Deploying

The build

Static assets

Production deploy

API Reference

ekko:rune

ekko:rune/router

ekko:rune/mimir

ekko:rune/seo

ekko:ssr / css

ekko.json schema

CLI commands

Guides

Rune app from scratch

Recipes

Dark mode

Forms

Data fetching

Authentication

Pagination

FAQ (use cases)

Tutorial , 7. Styling

Notes works; now make it look intentional. You import your stylesheet and the build compiles the SCSS, bundles it, and injects it into the page <head> on the server-rendered first paint. The theme is just CSS custom properties flipped by the .dark class our atom controls.

One palette, light and dark

Define every colour as a custom property on :root (light) and override on .dark:

00000000001
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// styles/global.scss
:root {
  --bg:#f7f9fc; --surface:#ffffff; --text:#10151c; --muted:#5b6675;
  --border:#e3e8ef; --accent:#5e81ac; --accent-weak:rgba(94,129,172,.12);
}
.dark {
  --bg:#0d1117; --surface:#161b22; --text:#e6edf3; --muted:#8a94a3;
  --border:#222b36; --accent:#88c0d0; --accent-weak:rgba(136,192,208,.12);
}
 
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: Inter, system-ui, -apple-system, sans-serif; line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

Because every component reads var(--text), var(--bg), etc., toggling the .dark class restyles the whole app at once, no per-component theme logic.

The chrome

00000000001
2
3
4
5
6
7
8
9
10
.topbar {
  position: sticky; top: 0; z-index: 10;
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 24px; background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
}
.topbar nav { display:flex; gap:16px; align-items:center; }
.brand { color: var(--text); font-weight: 800; }
.container { max-width: 720px; margin: 0 auto; padding: 28px 24px 64px; }
.foot { text-align:center; color: var(--muted); padding: 28px; border-top: 1px solid var(--border); }

The list and notes

00000000001
2
3
4
5
6
7
h1 small { color: var(--muted); font-weight: 500; font-size: .6em; }
.note-list { list-style: none; padding: 0; margin: 18px 0 0; }
.note-list li { padding: 12px 14px; margin-bottom: 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; }
.note-list a { color: var(--text); font-weight: 600; }
.note-body { white-space: pre-wrap; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 16px; }

The form

00000000001
2
3
4
5
6
7
8
9
10
11
input, textarea {
  display:block; width:100%; margin: 10px 0; padding: 10px 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font: inherit;
}
textarea { min-height: 160px; resize: vertical; }
button {
  padding: 9px 16px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: #fff; font-weight: 600;
}
.theme-btn { background: var(--accent-weak); color: var(--text); border: 1px solid var(--border); }

How it is applied

Import the stylesheet once, from your root layout, and you are done:

00000000001
2
// pages/layout.tsx
import "../styles/global.scss";   // compiled, bundled, and injected into <head> by the build

That is the whole wiring. When you run ekko build --client (or ekko dev), the build compiles the SCSS, bundles it, records it in the manifest, and rune injects it into every page's <head> server-side, so the styles are present on the first paint (no flash of unstyled content). There is no compileSass call and no <style> string to assemble by hand. See Styling → SCSS.

Using a component library (optional)

For richer UI (data tables, dialogs, a docs shell), add @ekko/asgard to ship in ekko.json and use its themed components. The docs site you are reading is built that way. See Asgard integration. For Notes, plain SCSS is plenty.

Run

00000000001
ekko run server.tsx --allow=fs,net,env

(Under ekko dev, editing global.scss hot-reloads the page, no restart.) Toggle the theme: the whole app flips, with no flash on reload thanks to step 5's no-FOUC script.

Next: ship it, 8. Build and deploy.

On this page

One palette, light and dark The chrome The list and notes The form How it is applied Using a component library (optional)Run