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 Frost

Night on a lifted, bluer slate with a third less chroma. Calmer for long sessions; the warm/cool split survives at low saturation.

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 Frost. 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.14 0.015 245)#050a0f
  2. basebackgroundoklch(0.17 0.015 245)#0a1016
  3. mantlefloats, cardsoklch(0.2 0.015 245)#10171c
  4. surface0line highlightoklch(0.23 0.015 245)#171e24
  5. surface1bordersoklch(0.28 0.015 245)#232a30
  6. surface2selectionoklch(0.35 0.018 245)#333c43
  7. overlayline numbersoklch(0.45 0.012 240)#50565b
  8. commentcommentsoklch(0.61 0.012 235)#7d8489
  9. subtextmuted textoklch(0.7023 0.0065 223.49)#9ba0a2
  10. text2propertiesoklch(0.85 0.01 240)#c8cfd4
  11. textforegroundoklch(0.93 0.01 240)#e2e9ee

Every role.
Three numbers each.

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

Code

Code roles in Living Code Frost
RoleColorOKLCHHexContrast
keywordmintoklch(0.82 0.078 180)#8ad5c611.3:1
functionaquaoklch(0.88 0.0455 192)#b6e2df13.5:1
typesteeloklch(0.77 0.0455 232)#98bacd9.31:1
stringmossoklch(0.8 0.078 142)#a2cb9d10.5:1
numbercopperoklch(0.74 0.078 48)#d49c808.09:1
constantcopperoklch(0.74 0.078 48)#d49c808.09:1
decoratororchidoklch(0.74 0.065 318)#bc9ec68.08:1
tagorchidoklch(0.74 0.065 318)#bc9ec68.08:1
propertytext2oklch(0.85 0.01 240)#c8cfd412.1:1
parametertext2oklch(0.85 0.01 240)#c8cfd412.1:1
operatorcommentoklch(0.61 0.012 235)#7d84895.05:1
commentcommentoklch(0.61 0.012 235)#7d84895.05:1

Diagnostics

Diagnostics roles in Living Code Frost
RoleColorOKLCHHexContrast
errorflareoklch(0.69 0.1073 25)#d680796.57:1
warningamberoklch(0.85 0.0748 78)#e9c89712.0:1
infosteeloklch(0.77 0.0455 232)#98bacd9.31:1
hintmintoklch(0.82 0.078 180)#8ad5c611.3:1
successmossoklch(0.8 0.078 142)#a2cb9d10.5:1

Diff

Diff roles in Living Code Frost
RoleColorOKLCHHexContrast
addedmossoklch(0.8 0.078 142)#a2cb9d10.5:1
removedflareoklch(0.69 0.1073 25)#d680796.57:1
modifiedamberoklch(0.85 0.0748 78)#e9c89712.0:1

Interface

Interface roles in Living Code Frost
RoleColorOKLCHHexContrast
fgtextoklch(0.93 0.01 240)#e2e9ee15.6:1
fgAlttext2oklch(0.85 0.01 240)#c8cfd412.1:1
fgMutedsubtextoklch(0.7023 0.0065 223.49)#9ba0a27.23:1
accenttealoklch(0.67 0.0975 180)#43a9976.69:1
cursortealoklch(0.67 0.0975 180)#43a9976.69:1
selectionsurface2oklch(0.35 0.018 245)#333c431.69:1
lineNumberoverlayoklch(0.45 0.012 240)#50565b2.57:1
lineNumberActiveamberoklch(0.85 0.0748 78)#e9c89712.0:1
linkaquaoklch(0.88 0.0455 192)#b6e2df13.5:1

Terminal colors

  1. black#232a30
  2. red#d68079
  3. green#a2cb9d
  4. yellow#e9c897
  5. blue#98bacd
  6. magenta#bc9ec6
  7. cyan#43a997
  8. white#9ba0a2
  1. bright black#50565b
  2. bright red#e99e97
  3. bright green#bfe3bb
  4. bright yellow#fce0b6
  5. bright blue#b6d3e3
  6. bright magenta#d4b9dc
  7. bright cyan#6fbfb0
  8. bright white#e2e9ee

Captured in Frost

Defined in palette/flavors.mjs.