Zurück zu den Designs Design-Leitfaden

Ein Marknote-Design bauen

Ein Design ist eine JSON-Datei und kein Code. Es benennt die Farben für jede Fläche, die Marknote zeichnet – das Fenster, den Editor, die Vorschau und exportiertes HTML – und die App prüft jeden Schlüssel, bevor sie einen davon benutzt. Diese Seite ist das ganze Format, die Regeln, an die ein Design gehalten wird, und der Weg in den Marktplatz.

Wo Designs liegen

Jedes installierte Design ist ein Ordner, benannt nach seiner id, mit einer Datei darin:

%LocalAppData%\Marknote\themes\com.example.ember\
  theme.json

Legen Sie einen Ordner dorthin und klicken Sie auf Reload in Einstellungen → Designs. Eine Datei, die die Prüfung nicht besteht, erscheint mit dem genauen Pfad des falschen Feldes (colors.preview.scrollThumb, zum Beispiel), damit nichts still fehlschlägt. Die siebzehn eigenen Looks von Marknote haben dasselbe Format – die mitgelieferten Dateien sind die Referenz.

theme.json

Der vollständige Satz an Feldern, mit jedem Farbschlüssel, den die App liest. Farben sind #RRGGBB, #AARRGGBB, oder das Wort transparent – sonst nichts.

{
  "schemaVersion": 1,
  "id": "com.example.ember",
  "name": "Ember",
  "version": "1.0.0",
  "author": "Your name",
  "description": "One sentence, sentence case.",
  "homepage": "https://example.com/ember",
  "license": "MIT",
  "appearance": "dark",
  "minMarknoteVersion": "1.9.0",
  "material": "none",
  "colors": {
    "chrome":  { "window": "#1A1412", "panel": "transparent", "pane": "#221A17", "dialog": "#221A17" },
    "accent":  { "color": "#FF7A3D", "ink": "#1A1412" },
    "editor":  {
      "bg": "#221A17", "activeLine": "#2C221E", "selection": "#3D2D26", "gutter": "#7A6A62",
      "fg": "#F2E6DC", "fgStrong": "#FFFFFF",
      "comment": "#7A6A62", "string": "#B8D68C", "regexp": "#F0C674", "number": "#F0A868",
      "keyword": "#FF7A3D", "operator": "#E6B8A2", "func": "#8FD3C7", "type": "#F0C674",
      "heading": "#FF7A3D", "link": "#8FD3C7",
      "brandCaret": false
    },
    "preview": {
      "fg": "#F2E6DC", "fgSecondary": "#D6C6BA", "bg": "#221A17",
      "codeBg": "#1A1412", "codeBorder": "#3D2D26",
      "quoteBorder": "#FF7A3D", "quoteBg": "#1A1412",
      "link": "#8FD3C7", "rule": "#3D2D26",
      "tocBg": "#2C221E", "headerBg": "#1A1412",
      "scrollThumb": "#4D7F7F7F", "scrollThumbHover": "#807F7F7F"
    },
    "code": { "highlight": "github-dark-dimmed", "mermaid": "dark" }
  },
  "css": ""
}

Field	Required	Notes
`schemaVersion`	Ja	Immer 1. Eine Datei für ein neueres Schema wird abgelehnt, statt halb angewendet zu werden.
`id`	Ja	Reverse-DNS, klein geschrieben: Buchstaben, Ziffern und Bindestriche in durch Punkte getrennten Abschnitten. Nehmen Sie eine Domain, die Ihnen gehört. uk.marknote.* ist für die mitgelieferten Designs reserviert.
`name`	Ja	Wird im Auswahlfeld angezeigt. Wie ein Satz geschrieben, höchstens 24 Zeichen.
`version`	Ja	Semver, ohne führendes v. Steigt sie, bietet der Marktplatz eine Aktualisierung an.
`appearance`	Ja	light oder dark. Legt fest, auf welcher Seite des Auswahlfeldes das Design steht und wie die Standard-Bedienelemente grundsätzlich aussehen.
`author, description, homepage, license`	Nein	Wird auf der Karte und der Detailseite angezeigt.
`minMarknoteVersion`	Nein	1.9.0 oder neuer. Ältere Apps überspringen das Design mit einer klaren Meldung.
`material`	Nein	none (Standard), mica, mica-alt oder acrylic. Ein Material scheint nur durch Rahmenflächen, die auf transparent stehen.
`colors.chrome`	Ja	window (Titelleiste und hinter den Bereichen), panel (Leiste und Seitenleiste), pane (Editor- und Vorschaubereich sowie der ausgewählte Tab), dialog. Ein optionales flyout färbt Menüs.
`colors.accent`	Ja	color und ink – die Akzentfarbe und was darauf geschrieben steht. Die Töne für Hover und Druck werden abgeleitet und bewegen sich stets von der Schrift weg.
`colors.editor`	Ja	Die sechzehn Schlüssel oben. Oder {"stock": true} für das eigene Aussehen von CodeMirror auf dieser Seite. brandCaret behält den roten Cursor von Marknote.
`colors.preview`	Ja	Alle dreizehn Schlüssel. Sie werden zu den CSS-Variablen der Vorschau und des exportierten HTML.
`colors.code`	Nein	highlight: github oder github-dark-dimmed; mermaid: default, dark, neutral, forest oder base. Beide richten sich standardmäßig nach der Erscheinung.
`css`	Nein	Zusätzliches CSS nur für die Vorschau, höchstens 64 KB, und geprüft: nichts, was lädt, ausführt oder ausbricht – kein url(), @import, @font-face, keine Backslashes, keine spitzen Klammern. Ein Design, das die Regel bricht, wird rundheraus abgelehnt, mit Begründung.

Die Kontrastlatte

Jedes Design im Marktplatz nimmt dieselbe Hürde, gemessen am WCAG-Verhältnis:

4.5:1 – Text der Vorschau und Sekundärtext auf der Seite und auf Codeblöcken; Editortext auf seinem Hintergrund; die Schrift der Akzentfarbe auf deren Ruhe-, Hover- und Druckflächen.
3:1 – Links und Überschriften auf ihrem Hintergrund.
2.5:1 – Zeilennummern auf dem Hintergrund des Editors. Ein Hinweis, den man findet, kein Text, den man liest; jede Palette setzt sie im Ton ihrer Kommentare.

Die Detailseite jedes gelisteten Designs zeigt seine Tabelle. Um Ihres vor dem Einreichen zu messen, führen Sie den Lint aus einem Checkout des Marknote-Repositorys aus – er prüft die Datei genau wie die App und gibt dieselbe Tabelle aus:

dotnet run --project tools/ThemeLint -- path\to\theme.json

Einreichen für den Marktplatz

Fork wearemarknote/themes und ergänzen Sie themes/<your-id>/theme.json.
Öffnen Sie einen Pull Request. Die Vorlage ist die Prüfliste; ein Workflow führt den Lint auf Ihrer Datei aus. Eine helle und eine dunkle Fassung gebaut? Legen Sie beide in einen Pull Request: Sie werden zusammen als ein Paket gelistet und installiert.
Jemand aus dem Team liest die Datei – sie ist von Natur aus klein –, prüft die Kontrasttabelle und macht den Screenshot von einer gemeinsamen Beispielnotiz, damit jeder Eintrag gleich aufgenommen ist.
Nach dem Merge ist das Design hier gelistet und erscheint innerhalb einer Stunde in der Galerie der App, mit Ihrem Namen und Ihrem GitHub-Handle aus dem Pull Request.

Designs sind für alle kostenlos und bleiben Ihre: Die Datei trägt Ihren Namen und Ihre Lizenz. Paletten, die zu einem Projekt gehören – Nord, Catppuccin, Dracula –, sollten es nennen in homepage und sich an eine Lizenz halten, die das Projekt erlaubt. Ein solches Design wird als auf dem Projekt basierend gelistet, und seine Seite nennt Sie für die Portierung.