Gå til indhold
SlopCode Docs

Temaer

Med SlopCode kan du velge fra ett av flere innebygde temaer, bruge et tema som tilpasser seg terminaltemaet ditt, eller definere ditt eget tilpassede tema.

Som standard bruger SlopCode vårt eget slopcode-tema.

Terminalkrav

For at temaer skal vises riktig med fullfarvepalett, må terminalen din støtte truecolor (24-biters farver). De fleste moderne terminaler støtter dette som standard, men du må kanskje aktivere det:

  • Tjek støtte: Kjør echo $COLORTERM - den skal gi ut truecolor eller 24bit
  • Aktiver truecolor: Sett miljøvariabelen COLORTERM=truecolor i shellprofilen din
  • Terminalkompatibilitet: Sørg for at terminalemulatoren din støtter 24-bits farver (de fleste moderne terminaler som iTerm2, Alacritty, Kitty, Windows Terminal og nyere versioner av GNOME Terminal gør det)

Uden truecolor-støtte kan temaer vises med redusert farvenøjagtighed eller falde tilbage til nærmeste 256-farvers tilnærming.

Indbyggede temaer

SlopCode kommer med flere innebygde temaer.

Navn Beskrivelse
system Tilpasser seg terminalens bakgrunnsfarve
tokyonight Basert på Tokyonight-temaet
everforest Basert på Everforest-temaet
ayu Basert på Ayu mørke tema
catppuccin Basert på Catppuccin-temaet
catppuccin-macchiato Basert på Catppuccin-temaet
gruvbox Basert på Gruvbox-temaet
kanagawa Basert på Kanagawa-temaet
nord Basert på Nord-temaet
matrix Hacker-stil grønt på svart tema
one-dark Basert på Atom One Mørkt tema

Og mer, vi tilføjer stadig til nye temaer.

Systemtema

system-temaet er designet for at automatisk tilpasse seg terminalens farvevalg. I motsetning til tradisjonelle temaer som bruger faste farver, er system-temaet:

  • Genererer gråskala: Opreter en brugerdefineret gråskala basert på terminalens bakgrunnsfarve, og sikrer optimal kontrast.
  • Bruger ANSI farver: Bruger standard ANSI farver (0-15) for syntaksutheving og UI elementer, som respekterer terminalens farvepalett.
  • Bevarer terminalens standardinnstillinger: Bruger none for tekst- og bakgrunnsfarver for at opretholde terminalens opprinnelige utseende.

Systemtemaet er for brugere som:

  • Vil at SlopCode skal matche terminalens utseende
  • Brug tilpassede terminalfarveskjemaer
  • Foretrekker et konsistent utseende på tvers av alle terminalapplikasjoner

Brug et tema

Du kan velge et tema ved at hente frem temavalg med kommandoen /themes. Eller du kan spesifisere det i config.

slopcode.json
{
  "$schema": "https://slopcode.dev/config.json",
  "theme": "tokyonight"
}

Brugerdefinerede temaer

SlopCode støtter et fleksibelt JSON-basert temasystem som lar brugere enkelt lage og tilpasse temaer.

Hierarki

Temaer lastes inn fra flere kataloger i følgende rekkefølge der senere kataloger overstyrer tidligere:

  1. Innebygde temaer - Disse er innebygd i binæren
  2. Brugerkonfigurasjonskatalog - Definert i ~/.config/slopcode/themes/*.json eller $XDG_CONFIG_HOME/slopcode/themes/*.json
  3. Prosjektrotkatalog - Definert i <project-root>/.slopcode/themes/*.json
  4. Nuværende arbejdskatalog - Definert i ./.slopcode/themes/*.json

Hvis flere kataloger inneholder et tema med samme navn, vil temaet fra katalogen med høyere prioritet bli brugt.

Oprettelse af et tema

For at lage et brugerdefineret tema, lag en JSON-fil i en av temakatalogene.

For brugeromfattende temaer:

Terminal window 
mkdir -p ~/.config/slopcode/themes
vim ~/.config/slopcode/themes/my-theme.json

Og for prosjektspesifikke temaer.

Terminal window 
mkdir -p .slopcode/themes
vim .slopcode/themes/my-theme.json

JSON-format

Temaer bruger et fleksibelt JSON-format med støtte for:

  • Sekskantfarver: "#ffffff"
  • ANSI farver: 3 (0-255)
  • Farvereferanser: "primary" eller egendefinerte definisjoner
  • Mørke/lyse varianter: {"dark": "#000", "light": "#fff"}
  • Ingen farve: "none" - Bruger terminalens standardfarve eller transparent

Farvedefinitioner

defs-delen er valgfri, og den lar deg definere gjenbrugbare farver som kan refereres til i temaet.

Terminalstandarder

Spesialverdien "none" kan bruges for hvilken som helst farve for at arve terminalens standardfarve. Dette er spesielt nyttig for at lage temaer som passer sømløst med terminalens farveskjema:

  • "text": "none" - Bruger terminalens standard forgrunnsfarve
  • "background": "none" - Bruger terminalens standard bakgrunnsfarve

Eksempel

Her er et eksempel på et brugerdefineret tema:

my-theme.json
{
  "$schema": "https://slopcode.dev/theme.json",
  "defs": {
    "nord0": "#2E3440",
    "nord1": "#3B4252",
    "nord2": "#434C5E",
    "nord3": "#4C566A",
    "nord4": "#D8DEE9",
    "nord5": "#E5E9F0",
    "nord6": "#ECEFF4",
    "nord7": "#8FBCBB",
    "nord8": "#88C0D0",
    "nord9": "#81A1C1",
    "nord10": "#5E81AC",
    "nord11": "#BF616A",
    "nord12": "#D08770",
    "nord13": "#EBCB8B",
    "nord14": "#A3BE8C",
    "nord15": "#B48EAD"
  },
  "theme": {
    "primary": {
      "dark": "nord8",
      "light": "nord10"
    },
    "secondary": {
      "dark": "nord9",
      "light": "nord9"
    },
    "accent": {
      "dark": "nord7",
      "light": "nord7"
    },
    "error": {
      "dark": "nord11",
      "light": "nord11"
    },
    "warning": {
      "dark": "nord12",
      "light": "nord12"
    },
    "success": {
      "dark": "nord14",
      "light": "nord14"
    },
    "info": {
      "dark": "nord8",
      "light": "nord10"
    },
    "text": {
      "dark": "nord4",
      "light": "nord0"
    },
    "textMuted": {
      "dark": "nord3",
      "light": "nord1"
    },
    "background": {
      "dark": "nord0",
      "light": "nord6"
    },
    "backgroundPanel": {
      "dark": "nord1",
      "light": "nord5"
    },
    "backgroundElement": {
      "dark": "nord1",
      "light": "nord4"
    },
    "border": {
      "dark": "nord2",
      "light": "nord3"
    },
    "borderActive": {
      "dark": "nord3",
      "light": "nord2"
    },
    "borderSubtle": {
      "dark": "nord2",
      "light": "nord3"
    },
    "diffAdded": {
      "dark": "nord14",
      "light": "nord14"
    },
    "diffRemoved": {
      "dark": "nord11",
      "light": "nord11"
    },
    "diffContext": {
      "dark": "nord3",
      "light": "nord3"
    },
    "diffHunkHeader": {
      "dark": "nord3",
      "light": "nord3"
    },
    "diffHighlightAdded": {
      "dark": "nord14",
      "light": "nord14"
    },
    "diffHighlightRemoved": {
      "dark": "nord11",
      "light": "nord11"
    },
    "diffAddedBg": {
      "dark": "#3B4252",
      "light": "#E5E9F0"
    },
    "diffRemovedBg": {
      "dark": "#3B4252",
      "light": "#E5E9F0"
    },
    "diffContextBg": {
      "dark": "nord1",
      "light": "nord5"
    },
    "diffLineNumber": {
      "dark": "nord2",
      "light": "nord4"
    },
    "diffAddedLineNumberBg": {
      "dark": "#3B4252",
      "light": "#E5E9F0"
    },
    "diffRemovedLineNumberBg": {
      "dark": "#3B4252",
      "light": "#E5E9F0"
    },
    "markdownText": {
      "dark": "nord4",
      "light": "nord0"
    },
    "markdownHeading": {
      "dark": "nord8",
      "light": "nord10"
    },
    "markdownLink": {
      "dark": "nord9",
      "light": "nord9"
    },
    "markdownLinkText": {
      "dark": "nord7",
      "light": "nord7"
    },
    "markdownCode": {
      "dark": "nord14",
      "light": "nord14"
    },
    "markdownBlockQuote": {
      "dark": "nord3",
      "light": "nord3"
    },
    "markdownEmph": {
      "dark": "nord12",
      "light": "nord12"
    },
    "markdownStrong": {
      "dark": "nord13",
      "light": "nord13"
    },
    "markdownHorizontalRule": {
      "dark": "nord3",
      "light": "nord3"
    },
    "markdownListItem": {
      "dark": "nord8",
      "light": "nord10"
    },
    "markdownListEnumeration": {
      "dark": "nord7",
      "light": "nord7"
    },
    "markdownImage": {
      "dark": "nord9",
      "light": "nord9"
    },
    "markdownImageText": {
      "dark": "nord7",
      "light": "nord7"
    },
    "markdownCodeBlock": {
      "dark": "nord4",
      "light": "nord0"
    },
    "syntaxComment": {
      "dark": "nord3",
      "light": "nord3"
    },
    "syntaxKeyword": {
      "dark": "nord9",
      "light": "nord9"
    },
    "syntaxFunction": {
      "dark": "nord8",
      "light": "nord8"
    },
    "syntaxVariable": {
      "dark": "nord7",
      "light": "nord7"
    },
    "syntaxString": {
      "dark": "nord14",
      "light": "nord14"
    },
    "syntaxNumber": {
      "dark": "nord15",
      "light": "nord15"
    },
    "syntaxType": {
      "dark": "nord7",
      "light": "nord7"
    },
    "syntaxOperator": {
      "dark": "nord9",
      "light": "nord9"
    },
    "syntaxPunctuation": {
      "dark": "nord4",
      "light": "nord0"
    }
  }
}