Tworzenie motywu kolorów

Motyw kolorów to folder zawierający theme.jsonc. CSS i zasoby są opcjonalne. Nie potrzebuje punktu wejścia JavaScript ani manifestu pluginu.

Utwórz motyw w Settings

1. Otwórz Settings > Themes > Colors > Create theme.
2. Wybierz Edit JSON.
3. Zastąp treść poniższym dokumentem.
4. Użyj Preview, aby obejrzeć motyw w tym oknie, a następnie Save theme.
5. Wybierz Graphite Notes w katalogu, aby go zastosować.

{
  "version": 2,
  "name": "Graphite Notes",
  "appearance": "adaptive",
  "common": {
    "tokens": {
      "--radius-control": "6px",
      "--terminal-padding": "12px"
    },
    "editor": {
      "syntax": {
        "comment": { "fontStyle": "italic" }
      }
    },
    "terminal": { "fontSize": 14 },
    "plugins": {
      "example.workspace-info": { "surface": "var(--color-surface)" }
    }
  },
  "light": {
    "editor": { "colors": { "background": "#fafafa" } }
  },
  "dark": {
    "editor": { "colors": { "background": "#101010" } }
  }
}

Motyw zachowuje paletę interfejsu DeepMono, zmienia zaokrąglenie kontrolek i odstępy terminala, ustawia jego font na 14 px oraz kursywę komentarzy w edytorze. Tło edytora różni się między trybem jasnym a ciemnym. Token pluginu pozwala motywowi określić tło przykładu workspace-info.

Kompletny pakiet znajduje się też w examples/graphite-notes. Wskaż ten folder przez Import folder, aby zainstalować przykład.

Zapisuj tylko zmiany

Nie musisz kopiować całego motywu DeepMono. Pominięte właściwości dziedziczą wartości bazowe bieżącego trybu. Wspólne wartości umieść w common, jasne w light, a ciemne w dark.

Zagnieżdżone właściwości składni edytora, kolory terminala, właściwości tła i deklaracje CSS są łączone pojedynczo. Na przykład common.editor.syntax.comment.fontStyle zostaje zachowane, gdy dark.editor.syntax.comment.color zmienia wyłącznie kolor.

Motyw adaptacyjny reaguje na System, Light i Dark. Jeśli motyw obsługuje tylko jeden wygląd, ustaw appearance na light lub dark.

Zasady JSONC

Dozwolone są komentarze i przecinki na końcu listy. Nazwy właściwości muszą być zapisane w cudzysłowach. Powtórzone klucze, nieznane pola i składnia JSON5 są odrzucane. Dokument ma limit 256 KiB i 32 poziomów zagnieżdżenia JSON.

Do podpowiedzi edytora użyj schematu wersji 2. Create theme zapisuje lokalny schemat obok nowego dokumentu. Walidacja podczas działania sprawdza też kolory, ścieżki, CSS i zasoby. Sama zgodność ze schematem nie gwarantuje załadowania motywu.

Udostępnianie motywu

Otwórz folder zainstalowanego motywu i skopiuj cały pakiet, w tym wskazane pliki CSS i zasoby. Odbiorca używa Import folder. Wszystkie ścieżki zasobów powinny być względne wobec pakietu, aby działał na innym komputerze.

Aby dostarczyć motyw w pluginie, zadeklaruj go w contributes.themes i dodaj jego folder do assets przy budowaniu pluginu. Szczegóły opisuje pakowanie pluginów.

Praca w edytorze wizualnym

Kontrolki i Edit JSON zmieniają ten sam szkic JSONC. Edit variant określa miejsce zapisu nadpisania: common, light lub dark. Sam wybór sekcji nie wymusza wyglądu aplikacji. Theme appearance określa, czy cały motyw jest adaptacyjny, czy ma jeden stały tryb.

Wyszukaj token przez Search theme tokens lub włącz Overrides only, aby zobaczyć wartości zadeklarowane w bieżącej sekcji. Wyczyszczenie pola nadpisania usuwa właściwość i odsłania wartość odziedziczoną. Kontrolki zachowują komentarze w dokumencie. Jeśli JSON jest niepoprawny, popraw wskazaną linię przed powrotem do kontrolek.

Preview jest tymczasowym podglądem lokalnym. Cancel preview przywraca wybrany motyw bez usuwania szkicu. Zapis utrwala szkic, a wybór stosuje go w aplikacji. Zapis nieaktywnego motywu nie wybiera go automatycznie. Zamknięcie z niezapisanymi zmianami pozwala wrócić do edycji lub odrzucić zmiany.

W trybie JSON Find in JSON przeszukuje szkic, Undo i Redo obsługują historię edycji, a Format JSON formatuje dokument z zachowaniem komentarzy JSONC. Formatowanie nie zapisuje pliku. Edytor korzysta również ze skonfigurowanych skrótów zapisu, wyszukiwania, przejścia do linii i zawijania wierszy. Show controls przywraca formularz wizualny.

Jak łączą się właściwości

Poniżej jest fragment do umieszczenia w pełnym dokumencie z version i name:

{
  "common": {
    "editor": { "syntax": { "comment": { "fontStyle": "italic", "color": "#707070" } } },
    "terminal": { "fontSize": 14, "colors": { "red": "#b33a3a" } }
  },
  "dark": {
    "editor": { "syntax": { "comment": { "color": "#a0a0a0" } } },
    "terminal": { "colors": { "blue": "#7ca7d8" } }
  }
}

W ciemnym trybie komentarz ma kolor #a0a0a0 i pozostaje kursywą. Terminal zachowuje rozmiar 14, czerwony #b33a3a i otrzymuje niebieski #7ca7d8. Jasny tryb korzysta ze wspólnego koloru komentarza i czerwieni; pominięty niebieski pochodzi z bazowej palety. Pusty obiekt nie usuwa odziedziczonego obiektu. Usuń właściwość z poziomu, który ją deklaruje, lub podaj jawny zamiennik, np. fontStyle: "normal".

Tworzenie plików poza aplikacją

Utwórz folder z plikiem UTF-8 theme.jsonc w jego katalogu głównym i skopiuj do niego cały dokument Graphite Notes powyżej. Zaimportuj folder przez Import folder, a następnie wybierz nowy wpis. Samodzielny motyw lokalny nie wymaga Node.js, Rusta, kompilacji ani zatwierdzania kodu pluginu.

Jeśli chcesz, przechowuj folder źródłowy w repozytorium. Import tworzy kopię: wybierz świadomie sposób pracy. Edytuj zainstalowaną kopię przez Settings albo zmieniaj źródła i importuj nową kopię do sprawdzenia. Import nie tworzy połączenia na żywo z folderem źródłowym.

Dalsze kroki: edytor i terminal, katalog tokenów oraz sprawdzenie przed udostępnieniem.

Kod źródłowy: format i dziedziczenie motywu, tworzenie i import motywu.