How to make a theme

# 1. template: palette, style or scene (default)
node nftheme-kit/bin/nftheme.js init my-theme --level scene --name "MY THEME"

# 2. preview in the browser, edits are picked up automatically
node nftheme-kit/bin/nftheme.js preview my-theme

# 3. validation, the same as in the catalog
node nftheme-kit/bin/nftheme.js check my-theme

# 4. package for upload
node nftheme-kit/bin/nftheme.js pack my-theme

{
  "format": 1,
  "id": "night-owl",
  "name": "NIGHT OWL",
  "version": "1.0.0",
  "author": "your_nick",
  "tokens": { "accent": "#ffd23f", "bg": "#07060a" }
}

my-theme.nftheme
├── manifest.json        required
├── preview.webp         required: the catalog card, 16:9
├── icon.png             window and tray icon, 256×256
├── theme.css            the “style” level
├── scene/index.html     the “scene” level
├── scene/scene.js
└── assets/              images, sound, video, fonts

{
  "format": 1,
  "id": "night-signal",
  "name": { "ru": "НОЧНОЙ СИГНАЛ", "en": "NIGHT SIGNAL" },
  "version": "1.2.0",
  "author": "iznanka",
  "description": { "ru": "Серая панель, сигнал вместо кнопки, голос на подъём канала." },
  "accent": "#c42b47",
  "license": "CC-BY-4.0",
  "credits": ["art and sound: fawn", "font Overused Grotesk: OFL"],
  "screenshots": ["shots/on.webp", "shots/servers.webp"],
  "icon": "icon.png",
  "window": { "width": 1280, "height": 720 },
  "tokens": { "bg": "#000", "panel": "#a0a0a0", "text": "#fff", "accent": "#c42b47" },
  "fonts": { "body": "assets/grotesk.woff2", "display": "assets/pixel.woff2" },
  "background": { "image": "assets/field.webp", "dim": 0.2 },
  "sounds": { "connect": "assets/up.mp3", "disconnect": "assets/down.mp3", "click": "assets/tick.mp3" },
  "music": { "src": "assets/menu.ogg", "volume": 0.35 },
  "intro": { "video": "assets/briefing.mp4", "subtitles": "assets/briefing.vtt" },
  "words": { "ru": { "connect": "ВЫСАДКА", "disconnect": "ЭВАКУАЦИЯ", "servers": "СФЕРЫ" } },
  "css": "theme.css",
  "scene": { "entry": "scene/index.html", "mode": "full" },
  "settings": [
    { "id": "glitch", "type": "toggle", "label": "Glitch", "default": true }
  ]
}

"fonts": {
  "body": "assets/fonts/grotesk.woff2",
  "display": "assets/fonts/pixel.woff2",
  "mono": "assets/fonts/mono.woff2"
}

"sounds": { "connect": "assets/sfx/up.mp3", "disconnect": "assets/sfx/down.mp3", "hover": "assets/sfx/tick.mp3" },
"music": { "src": "assets/music/menu.ogg", "volume": 0.35 }

"intro": { "video": "assets/intro.mp4", "subtitles": "assets/intro.vtt", "volume": 0.85, "once": false }

WEBVTT

00:00.500 --> 00:03.200
Link established. Welcome.

00:03.400 --> 00:06.000
Channel open.

"words": {
  "ru": { "connect": "ПРИНЯТЬ КЛЕЙМО", "disconnect": "СНЯТЬ КЛЕЙМО", "servers": "ЗЕМЛИ", "settings": "СНАРЯЖЕНИЕ" },
  "en": { "connect": "TAKE THE BRAND", "servers": "LANDS" }
}

"window": {
  "width": 1280, "height": 720,
  "clip": [[0,4],[6,0],[38,2],[61,0],[100,3],[98,40],[100,71],[97,100],[55,97],[30,100],[2,98],[0,60]]
}

/* connect button: a neon ring */
[data-nf='connect'] {
  border-radius: 999px;
  box-shadow: 0 0 32px var(--nf-glow);
}
/* a pulse while the channel comes up */
[data-nf-status='connecting'] [data-nf='connect'] { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px var(--nf-glow); } }

/* nodes under maintenance are paler */
[data-nf='server'][data-nf-maint] { opacity: .5; }

/* a custom cursor */
body { cursor: url('assets/cursor.png') 4 0, default; }

"scene": { "entry": "scene/index.html", "mode": "full" }

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="scene.css">
  <script src="/__nf/sdk.js"></script>
</head>
<body>
  <div id="frame">
    <button id="core">-</button>
    <div id="nodes"></div>
  </div>
  <script src="scene.js"></script>
</body>
</html>

const frame = document.getElementById('frame');
nf.fit(frame, 1280, 720);                                // a 1280×720 frame
nf.window.dragRegions([{ x: 0, y: 0, w: 1180, h: 48 }]); // the window can be dragged by the top

const core = document.getElementById('core');
core.addEventListener('click', () => nf.toggle());

function render() {
  const s = nf.state;
  core.textContent = s.connected ? nf.t('disconnect') : nf.t('connect');
  document.body.dataset.status = s.status;
}

nf.on('init', render);
nf.on('state', render);
nf.on('nodes', (nodes) => {
  document.getElementById('nodes').replaceChildren(...nodes.map((node) => {
    const row = document.createElement('button');
    row.textContent = node.name + ' · ' + (node.ping || '-') + ' ms';
    row.onclick = () => nf.select(node.id);
    return row;
  }));
});

{
  status: 'on',            // off | connecting | on | disconnecting | switching | error
  connected: true,
  busy: false,             // connecting, disconnecting or switching
  node: { id: 'nl-1', name: 'Netherlands · Amsterdam', country: 'NL', city: 'Amsterdam',
          ping: 41, load: 23, maintenance: false, favorite: true, selected: true },
  auto: true,              // the client picks the node
  since: 1791232800000,    // when the channel came up (ms), otherwise null
  error: null,             // the error text when status === 'error'
  lang: 'ru',
  words: { connect: 'CONNECT', servers: 'SERVERS', … },   // with manifest.words applied
  sound: { enabled: true, volume: 0.8 },
  visible: true,           // the window is on screen: not minimized, not in the tray
  fullscreen: false,
  reduceMotion: false,     // “reduce motion” is enabled in the system
  platform: 'windows',     // windows | linux
  version: '6.0.0',
  sub: { plan: 'NII IZNANKA', daysLeft: 27 },
  update: { available: false, version: null }
}

"settings": [
  { "id": "glitch", "type": "toggle", "label": { "ru": "Помехи", "en": "Glitches" }, "default": true },
  { "id": "speed", "type": "range", "label": "Ring speed", "min": 0, "max": 2, "step": 0.1, "default": 1 },
  { "id": "scene", "type": "select", "label": "Scene", "default": "grid",
    "options": [ { "value": "grid", "label": "Grid" }, { "value": "signal", "label": "Signal" } ] },
  { "id": "tint", "type": "color", "label": "Color", "default": "#c42b47", "hint": "The color of the rings around the button" }
]

nf.on('settings', (values) => {
  document.body.classList.toggle('glitch', values.glitch);
  rings.speed = values.speed;
});

[data-nf='connect'] {
  width: 220px; height: 220px; padding: 0;
  border: 0; border-radius: 50%;
  background: url('assets/sigil-off.png') center / contain no-repeat;
  color: transparent;            /* we hide the label; a screen reader will still read it */
  filter: grayscale(1) brightness(.7);
  transition: filter .4s, transform .2s;
}
[data-nf-status='on'] [data-nf='connect'] {
  background-image: url('assets/sigil-on.png');
  filter: drop-shadow(0 0 24px var(--nf-glow));
}
[data-nf='connect']:hover { transform: scale(1.04); }

[data-nf-status='error'] [data-nf='screen'] { animation: lost .12s steps(2) 6; }
@keyframes lost { 50% { filter: invert(1) hue-rotate(160deg); } }

"tokens": { "bg": "transparent", "panel": "rgba(0,0,0,.55)" },
"scene": { "entry": "stars/index.html", "mode": "backdrop" }

const c = document.querySelector('canvas');
const ctx = c.getContext('2d');
const stars = Array.from({ length: 220 }, () => ({ x: Math.random(), y: Math.random(), z: Math.random() }));
let speed = 0.0004;
nf.on('state', (s) => { speed = s.connected ? 0.003 : s.busy ? 0.008 : 0.0004; });
(function frame() {
  c.width = innerWidth; c.height = innerHeight;
  for (const s of stars) {
    s.z -= speed; if (s.z <= 0) s.z = 1;
    const k = 0.5 / s.z;
    ctx.fillStyle = 'rgba(255,255,255,' + (1 - s.z) + ')';
    ctx.fillRect((s.x - 0.5) * k * c.width + c.width / 2, (s.y - 0.5) * k * c.height + c.height / 2, 2, 2);
  }
  if (!nf.state || nf.state.visible !== false) requestAnimationFrame(frame);
  else nf.on('state', function wake(s) { if (s.visible) { nf.off('state', wake); requestAnimationFrame(frame); } });
})();

nf.on('state', async (s) => {
  if (s.status !== 'off' || !nf.state.since) return;
  const minutes = Math.round((Date.now() - nf.state.since) / 60000);
  const best = (await nf.storage.get('best')) || 0;
  if (minutes > best) {
    await nf.storage.set('best', minutes);
    nf.toast('New record: ' + minutes + ' min');
  }
});

let was = null;
nf.on('state', (s) => {
  if (was !== 'on' && s.status === 'on') {
    deploy.querySelector('b').textContent = s.node ? s.node.name : '';
    deploy.hidden = false;
    nf.sound.play('assets/deploy.mp3');
    setTimeout(() => { deploy.hidden = true; }, 2200);
  }
  was = s.status;
});