packages/web/src/content/docs/nb/themes.mdx
Med OpenCode kan du velge fra ett av flere innebygde temaer, bruke et tema som tilpasser seg terminaltemaet ditt, eller definere ditt eget tilpassede tema.
Som standard bruker OpenCode vårt eget opencode-tema.
For at temaer skal vises riktig med fullfargepalett, må terminalen din støtte truecolor (24-biters farger). De fleste moderne terminaler støtter dette som standard, men du må kanskje aktivere det:
echo $COLORTERM - den skal gi ut truecolor eller 24bitCOLORTERM=truecolor i shell-profilen dinUten truecolor-støtte kan temaer vises med redusert fargenøyaktighet eller falle tilbake til nærmeste 256-fargers tilnærming.
OpenCode kommer med flere innebygde temaer.
| Navn | Beskrivelse |
|---|---|
system | Tilpasser seg terminalens bakgrunnsfarge |
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 legger stadig til nye temaer.
system-temaet er designet for å automatisk tilpasse seg terminalens fargeskjema. I motsetning til tradisjonelle temaer som bruker faste farger, er system-temaet:
none for tekst- og bakgrunnsfarger for å opprettholde terminalens opprinnelige utseende.Systemtemaet er for brukere som:
Du kan velge et tema ved å åpne temavelgeren med kommandoen /theme. Eller du kan spesifisere det i tui.json.
{
"$schema": "https://opencode.ai/tui.json",
"theme": "tokyonight"
}
OpenCode støtter et fleksibelt JSON-basert temasystem som lar brukere enkelt lage og tilpasse temaer.
Temaer lastes inn fra flere kataloger i følgende rekkefølge der senere kataloger overstyrer tidligere:
~/.config/opencode/themes/*.json eller $XDG_CONFIG_HOME/opencode/themes/*.json<project-root>/.opencode/themes/*.json./.opencode/themes/*.jsonHvis flere kataloger inneholder et tema med samme navn, vil temaet fra katalogen med høyere prioritet bli brukt.
For å lage et tilpasset tema, lag en JSON-fil i en av temakatalogene.
For brukerspesifikke temaer:
mkdir -p ~/.config/opencode/themes
vim ~/.config/opencode/themes/my-theme.json
Og for prosjektspesifikke temaer.
mkdir -p .opencode/themes
vim .opencode/themes/my-theme.json
Temaer bruker et fleksibelt JSON-format med støtte for:
"#ffffff"3 (0-255)"primary" eller egendefinerte definisjoner{"dark": "#000", "light": "#fff"}"none" - Bruker terminalens standardfarge eller transparentdefs-delen er valgfri, og den lar deg definere gjenbrukbare farger som kan refereres til i temaet.
Spesialverdien "none" kan brukes for hvilken som helst farge for å arve terminalens standardfarge. Dette er spesielt nyttig for å lage temaer som passer sømløst med terminalens fargeskjema:
"text": "none" - Bruker terminalens standard forgrunnsfarge"background": "none" - Bruker terminalens standard bakgrunnsfargeHer er et eksempel på et tilpasset tema:
{
"$schema": "https://opencode.ai/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"
}
}
}