Hur man ändrar temat i VS Code

Visual Studio Code förvandlar redigering och skrivning av ny kod till en problemfri, rolig upplevelse. Det mörka standardtemat för VS Code är designat för att vara lättare för ögonen än en vanlig hård, vit bakgrund som kan orsaka trötthet efter långa arbetstimmar. Men vad händer om du inte riktigt gillar de mörka färgerna på skärmen när du arbetar?

Hur man ändrar temat i VS Code

Fördelen med VS Codes modulära design är att du har enorm frihet att ändra det ursprungliga mörka temat med många olika anpassningsalternativ som sträcker sig över hela spektrumet av skärmfärg, typsnitt och till och med utseendet på VS Codes integrerade terminal själv.

Den här artikeln kommer att berätta allt du behöver veta om att ändra teman i VS Code.

Hur man ändrar tema i VS-kod

Att ändra det övergripande temat i VS Code är snabbt och enkelt. Här är vad du behöver göra:

  1. Öppna VS-kod.

  2. Välj "Arkiv" ("Kod" på macOS), välj "Inställningar" och välj sedan "Färgtema".

  3. VS Code kommer att visa dig ett urval av förbyggda teman att välja mellan i en rullgardinsmeny.

  4. Använd markörtangenterna för att förhandsgranska hur varje tema ser ut direkt på skärmen.

  5. Tryck på "Enter" medan du väljer för att välja det temat att använda.

Att ändra temat till ett annat förkonfigurerat kan vara det första du gör när du öppnar VS Code för första gången. Kodning kan ta mycket tid, så det är fördelaktigt att använda ett tema som du är bekväm med och som inte skadar dina ögon när du arbetar.

Hur du ändrar ditt terminaltema i VS-kod

Om du vill hålla fast vid de flera förkonfigurerade alternativen för terminalens färg och tema, är processen densamma som att ändra det övergripande temat. Alla de integrerade teman inkluderar alternativ för att ändra din terminals utseende, men du kan inte separera den från de andra delarna av själva temat från huvudmenyn.

Innan du använder de ovannämnda stegen för att ändra tema, öppna terminalkonsolen (Ctrl + Shift + P) för att förhandsgranska ändringarna som gjorts i terminalen. Vissa teman gör inga ändringar i terminalen, medan andra kan ändra den drastiskt. Dessutom är det inte bra att använda ett tema som du bara gillar måttligt, eftersom du kan komma på att du använder terminalen mer än du först trodde.

Det finns dock några lösningar som gör att du kan ändra terminaltemat, som vi kommer att täcka i avsnitten nedan.

Hur man ändrar materialtema i VS-kod

VS Codes huvudfunktion är överflöd av spännande tillägg för att anpassa din kodningsupplevelse och ge fler funktioner till textredigeraren. En av sådana tillägg är Material Theme, en av de mest populära i sitt slag på VS Code Marketplace.

Material Theme har många fördelar jämfört med föranpassade mönster, men vissa användare kan tycka att det saknas. Användarmanualen för detta tillägg innehåller några tips om hur du gör ytterligare ändringar för att passa dina behov. Så här ändrar du det övergripande temat i Material Theme:

  1. Öppna snabbmenyn (Ctrl + Shift + P).

  2. Skriv "tema" i prompten.

  3. Välj "Inställningar: Färgtema."

  4. Välj en av materialtemats förinställningar.

Att ställa in en accentfärg kommer att göra en del av koden pop, vilket kan vara användbart om det är en särskilt viktig eller besvärlig rad att diagnostisera. Använd följande steg för att ställa in en accentfärg:

  1. Öppna snabbmenyn (Ctrl + Shift + P).

  2. Skriv "material tema" i prompten.

  3. Välj "Materialtema: Ange accentfärg."

  4. Välj den färg du gillar från listan.

Med ett ändrat materialtema kan du få anpassning som är över normen, och vi visar dig hur.

Hur man manuellt anpassar ett tema i VS-kod

VS Code möjliggör mycket mer anpassning än att bara växla mellan några få förinställningar. Här är två sätt att anpassa temat efter dina önskemål.

Metod 1 – Ladda ner ett anpassat tema

När vi pratar om anpassning kan vi inte gå utan att nämna den expansiva VS Code Marketplace. Det finns olika tillägg som bara ändrar utseendet på VS Code utan att störa dess funktionalitet. Så här laddar du ner ett tema.

  1. Öppna VS Code Marketplace. Du kan också använda den integrerade "Extensions"-menyn till vänster på skärmen.

  2. Skriv in "tema" i sökfältet för att bläddra endast de objekt som ändrar temat. En av våra bästa rekommendationer är materialtema som nämns ovan, men vi är säkra på att du kan hitta en som passar dig bäst.

  3. Ladda ner tillägget (om du använder en webbläsare) och installera sedan .VSIX-filen genom att gå till "Extensions > ellips icon > Install from VSIX." Alternativt, när du hittar temat du gillar i VS Code, klicka på det och välj sedan knappen "Installera" i detaljmenyn (höger).

  4. När temat är installerat och aktiverat, välj det med kommandot "Inställningar: Färgtema".

Metod 2 – Redigera temat

Alla teman och inställningar lagras i VS Code med klartext. Följ stegen för att komma åt dessa inställningar och göra de ändringar du vill ha:

  1. Skapa en arbetsbänk eller användarinställningsfil. Det förra kommer bara att ändra utseendet på det nuvarande projektet, men det senare kommer att finnas kvar över nya projekt.
  2. Skriv in kommandot "Inställningar: Öppna inställningar" i huvudmenyn.

  3. Välj fliken uppe till vänster för att välja mellan användar- och arbetsbänksinställningar.

  4. Tryck på "Redigera i settings.json" för att öppna filen som innehåller de inställningar du behöver ändra.

  5. Hitta inställningen som heter "workbench.colorCustomizations."

  6. Fokusera på att ändra det tema du vill ha genom att lägga in

"[Theme_name]": { }

Theme_name är namnet på det tema du vill ändra. Behåll citat.

  1. Ytterligare ändringar av temat görs i de nya parenteserna. Skriv in namnet på parametern du vill ändra (inom citattecken), skriv ':' och välj sedan lämplig inställning du behöver.
  2. Använd den här guiden för att hitta de parametrar du vill ändra.
  3. Färger lagras i hexadecimal kod. Använd en hexadecimal färgguide för att peka ut vilken färg du vill ha.

  4. När du är klar med ändringarna sparar du filen.

Den här metoden kan användas för att ändra det mesta av användargränssnittet och kodens utseende, inklusive grundtemats färg, bakgrunder, terminalens utseende, knappfärger och teckensnittsstilar.

Om du undrar hur du ändrar teckensnittet i VS-kod, använd metod 2 som beskrivs ovan. Du behöver förmodligen en teckensnittsguide.

Ytterligare FAQ

Var lagras VS-kodteman?

De teman som kommer från tillägg lagras i tilläggsmappen i VS Code. Denna plats finns i din installationskatalog (till exempel C:) och kan vanligtvis hittas här:

~/.vscode/extensions

Här är "~" installationskatalogen för VS Code.

Basteman lagras i: Microsoft VS Code\resources\app\extensions\theme-defaults\themes

Du behöver dock inte spendera tid på att leta efter filer att ändra. Att ändra användarinställningarna via filen "settings.json" kommer att ge mycket snabbare resultat.

Hur ändrar jag kommentarsfärgen i VS-kod?

För att ändra kommentarsfärgerna, öppna filen "settings.json" (använd "Metod 2" som beskrivs ovan), välj det tema du vill ändra och skriv sedan in (med citattecken):

"kommentarer" : "#hexcode"

Här är "hexcode" koden för den önskade färgen. Använd en färgväljare för att välja en lämplig färg.

Vilket är det bästa temat i VS Code?

Det bästa VS Code-temat är det du tycker är mest tilltalande och användbart för dina programmeringsinsatser. Olika användare kan ha olika färg- och temapreferenser. Tack och lov finns det massor av alternativ att välja mellan, oavsett om det är i de förkonfigurerade teman, förlängningsnedladdningar eller möjligheten att anpassa ett tema exakt efter din smak.

Välj ditt tema

Med dessa instruktioner kan du helt anpassa ett tema som du vill. Med sin rikedom av alternativ förblir VS Code en av de mest populära textredigerarna, och dess förmåga att få nya funktioner med tillägg gör den mycket lik en IDE.

Vilka teman använder du i VS Code? Har du gjort några ändringar i ditt föredragna tema? Låt oss veta i kommentarsfältet nedan.