Skip to main content
CodingTheme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.activeBorder#FF9800
  • activityBar.background#161b22
  • activityBar.foreground#FCFCFA
  • activityBar.inactiveForeground#6e7681
  • activityBarBadge.background#FF9800
  • activityBarBadge.foreground#161b22
  • editor.background#0d1117
  • editor.foreground#FCFCFA
  • editor.lineHighlightBackground#161b22
  • editor.selectionBackground#264f78
  • editor.selectionHighlightBackground#3b3b3b60
  • editorCursor.foreground#FF9800
  • editorGroupHeader.tabsBackground#161b22
  • editorIndentGuide.activeBackground1#1976D2
  • editorIndentGuide.background1#21262d
  • editorLineNumber.activeForeground#1976D2
  • editorLineNumber.foreground#FF9800
  • panel.background#161b22
  • panel.border#1976D2
  • sideBar.background#161b22
  • sideBar.foreground#FCFCFA
  • sideBarSectionHeader.background#21262d
  • sideBarSectionHeader.foreground#FF9800
  • statusBar.background#161b22
  • statusBar.debuggingBackground#1976D2
  • statusBar.debuggingForeground#161b22
  • statusBar.foreground#FCFCFA
  • statusBar.noFolderBackground#161b22
  • tab.activeBackground#21262d
  • tab.activeBorder#FF9800
  • tab.activeForeground#FF9800
  • tab.border#21262d
  • tab.inactiveBackground#161b22
  • tab.inactiveForeground#FF9800
  • tab.unfocusedActiveBorder#1976D299
  • titleBar.activeBackground#161b22
  • titleBar.activeForeground#FCFCFA
  • titleBar.inactiveBackground#0d1117
  • titleBar.inactiveForeground#6e7681

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block#727072italic
keyword, keyword.control.go#FF9800bold
entity.name.function, entity.name.function.go#1976D2italic
variable, variable.other.go#FCFCFA
string, string.quoted.double.go, string.quoted.single.go#FF9800
constant.numeric, constant.numeric.go#1976D2
storage.type, storage.type.go#FF9800bold
entity.name.import.go, variable.other.package.go#1976D2bold
entity.name.import.path.go#FF9800bold underline
source.go#FCFCFA
entity.name.tag.yaml#FFD700bold
entity.name.anchor.yaml#1976D2bold underline
entity.name.alias.yaml#FFD700bold
string.unquoted.plain.out.yaml#3B4D9B
string.quoted.double.yaml, string.quoted.single.yaml#1976D2
constant.numeric.yaml#3B4D9B
constant.language.boolean.yaml#FFD700bold
constant.language.null.yaml#6B7CA0italic
comment.line.number-sign.yaml#6B7CA0italic
support.type.property-name.json, meta.object-literal.key.js, meta.object-literal.key.ts, meta.object-literal.key.tsx#FFD700bold
string.value.json, string.quoted.double.js, string.quoted.single.js, string.quoted.double.ts, string.quoted.single.ts, string.quoted.double.tsx, string.quoted.single.tsx#1976D2
constant.numeric.json, constant.numeric.js, constant.numeric.ts, constant.numeric.tsx#1976D2
constant.language.boolean.json, constant.language.boolean.js, constant.language.boolean.ts, constant.language.boolean.tsx#FFD700bold
constant.language.null.json, constant.language.null.js, constant.language.null.ts, constant.language.null.tsx#6B7CA0italic
comment.line.double-slash.js, comment.line.double-slash.ts, comment.line.double-slash.tsx, comment.block.documentation.js, comment.block.documentation.ts, comment.block.documentation.tsx#6B7CA0italic
punctuation.separator.key-value.json, punctuation.separator.key-value.js, punctuation.separator.key-value.ts, punctuation.separator.key-value.tsx#FFD700
punctuation.definition.block.js, punctuation.definition.block.ts, punctuation.definition.block.tsx#1976D2
keyword.control.makefile#FFD700bold
variable.assignment.makefile#1976D2bold
entity.name.function.target.makefile#FFD700bold underline
string.quoted.double.makefile, string.quoted.single.makefile#1976D2
comment.line.number-sign.makefile#6B7CA0italic
meta.scope.target.makefile#FFD700bold
meta.scope.prerequisites.makefile#FFD700
entity.name.type, entity.name.type.go#FF9800bold
keyword.control.terraform#FF9800bold
variable.other.terraform#FCFCFA
entity.name.function.terraform#1976D2italic
entity.name.type.terraform#FF9800bold
string.quoted.double.terraform, string.quoted.single.terraform#1976D2
constant.numeric.terraform#1976D2
constant.language.boolean.terraform#FF9800bold
comment.line.number-sign.terraform#727072italic
support.constant.terraform#FFD700bold
punctuation.definition.block.terraform#FF9800
support.function.builtin.terraform#FF9800bold italic
variable.other.readwrite.terraform#FF9800italic

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Vscode Theme based on Dragon Ball by Felipe Rocha Correa - VS Code Theme