Skip to content
Living CodePorts & install
GitHub

Ports & installation

Find your app. Open its port page for installation steps.

53 ports

Use ↑ ↓ to choose, Enter to open. Keep typing to search.

Browse 53 ports Esc to close
All flavors

Living Code Paper

Daylight. Same two temperatures on near-white slate, lightness inverted so every syntax color keeps WCAG AA contrast.

Install it

Read it in your language.

Try the code you write, then switch flavors. The same roles carry through every sample, from syntax to the lines you add and remove.

Previewing Paper. Your language stays selected when you change flavors.

theme.ts

// A quiet ground. Color with a job.type Theme = { name: string; contrast: number }; export function chooseTheme(light: boolean): Theme {  const name = light ? "paper" : "night";   return {    name,    contrast: 4.5,  };} const active = chooseTheme(false);console.log(active.name);

theme.py

# A quiet ground. Color with a job.from dataclasses import dataclass @dataclassclass Theme:    name: str    contrast: float = 4.5  def choose_theme(light: bool) -> Theme:    name = "paper" if light else "night"    return Theme(name, contrast=4.5) active = choose_theme(False)print(active.name)

theme.rs

// A quiet ground. Color with a job.struct Theme {    name: String,    contrast: f64,} fn choose_theme(light: bool) -> Theme {    let name = if light { "paper" } else { "night" };    Theme { name: name.to_string(), contrast: 4.5 }} fn main() {    let active = choose_theme(false);    println!("{}", active.name);}

theme.html / theme.css

<main class="workspace" data-theme="night">  <h1>Color with a job.</h1>  <p>A quiet ground for your next idea.</p>  <a href="/ports/">Find your app</a></main> /* The same roles, on the web. */.workspace {  background: var(--lc-bg);  color: var(--lc-fg);  padding: 24px;} .workspace a { color: var(--lc-link); }

theme.ts · working tree

diff --git a/theme.ts b/theme.ts--- a/theme.ts+++ b/theme.ts@@ -1,7 +1,7 @@ export const workspace = {-  name: "default",-  background: "#181818",-  foreground: "#cccccc",+  name: "living-code",+  background: "var(--lc-bg)",+  foreground: "var(--lc-fg)",   contrast: 4.5,   quiet: true, };

The slate ramp

  1. crustsidebars, status linesoklch(0.92 0.008 240)#e0e5e9
  2. basebackgroundoklch(0.975 0.004 240)#f4f7f9
  3. mantlefloats, cardsoklch(0.95 0.006 240)#ebeff2
  4. surface0line highlightoklch(0.93 0.008 240)#e3e9ed
  5. surface1bordersoklch(0.88 0.01 240)#d2d8dd
  6. surface2selectionoklch(0.84 0.015 240)#c2ccd3
  7. overlayline numbersoklch(0.68 0.012 240)#92999f
  8. commentcommentsoklch(0.55 0.012 235)#6b7378
  9. subtextmuted textoklch(0.45 0.01 240)#50565a
  10. text2propertiesoklch(0.32 0.01 240)#2e3437
  11. textforegroundoklch(0.2 0.01 240)#12171a

Every role.
Three numbers each.

Ports read roles, not colors. Here is what each role is in Paper, and how it reads against the background. Text roles need 4.5:1.

Code

Code roles in Living Code Paper
RoleColorOKLCHHexContrast
keywordmintoklch(0.47 0.08 182)#0f695e6.09:1
functionaquaoklch(0.5 0.075 200)#1f70745.39:1
typesteeloklch(0.5 0.09 240)#2b69915.51:1
stringmossoklch(0.52 0.12 142)#3b7a354.88:1
numbercopperoklch(0.52 0.12 45)#a04f275.39:1
constantcopperoklch(0.52 0.12 45)#a04f275.39:1
decoratororchidoklch(0.52 0.1 318)#81558e5.39:1
tagorchidoklch(0.52 0.1 318)#81558e5.39:1
propertytext2oklch(0.32 0.01 240)#2e343711.8:1
parametertext2oklch(0.32 0.01 240)#2e343711.8:1
operatorcommentoklch(0.55 0.012 235)#6b73784.50:1
commentcommentoklch(0.55 0.012 235)#6b73784.50:1

Diagnostics

Diagnostics roles in Living Code Paper
RoleColorOKLCHHexContrast
errorflareoklch(0.52 0.13 25)#a745415.48:1
warningamberoklch(0.53 0.105 75)#8f62135.01:1
infosteeloklch(0.5 0.09 240)#2b69915.51:1
hintmintoklch(0.47 0.08 182)#0f695e6.09:1
successmossoklch(0.52 0.12 142)#3b7a354.88:1

Diff

Diff roles in Living Code Paper
RoleColorOKLCHHexContrast
addedmossoklch(0.52 0.12 142)#3b7a354.88:1
removedflareoklch(0.52 0.13 25)#a745415.48:1
modifiedamberoklch(0.53 0.105 75)#8f62135.01:1

Interface

Interface roles in Living Code Paper
RoleColorOKLCHHexContrast
fgtextoklch(0.2 0.01 240)#12171a16.8:1
fgAlttext2oklch(0.32 0.01 240)#2e343711.8:1
fgMutedsubtextoklch(0.45 0.01 240)#50565a6.91:1
accenttealoklch(0.53 0.09 180)#187d6e4.69:1
cursortealoklch(0.53 0.09 180)#187d6e4.69:1
selectionsurface2oklch(0.84 0.015 240)#c2ccd31.52:1
lineNumberoverlayoklch(0.68 0.012 240)#92999f2.68:1
lineNumberActiveamberoklch(0.53 0.105 75)#8f62135.01:1
linkaquaoklch(0.5 0.075 200)#1f70745.39:1

Terminal colors

  1. black#d2d8dd
  2. red#a74541
  3. green#3b7a35
  4. yellow#8f6213
  5. blue#2b6991
  6. magenta#81558e
  7. cyan#187d6e
  8. white#50565a
  1. bright black#92999f
  2. bright red#853532
  3. bright green#2d6029
  4. bright yellow#724d0d
  5. bright blue#1f5272
  6. bright magenta#664371
  7. bright cyan#116357
  8. bright white#12171a

Captured in Paper

Defined in palette/flavors.mjs.