Skip to main content
CodingTheme

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.

  • activityBarBadge.background#5060f0B0
  • activityBarBadge.foreground#c4783a
  • badge.background#5060f080
  • badge.foreground#c4783a
  • editor.background#101010
  • editor.findMatchBorder#9735c5
  • editor.findMatchHighlightBackground#4e3153
  • editor.findMatchHighlightBorder#f700ff9a
  • editor.foreground#b9b9b9
  • editor.lineHighlightBackground#ffffff10
  • editor.lineHighlightBorder#4787FF10
  • editor.selectionBackground#0b5827
  • editor.selectionHighlightBackground#0b5827C0
  • editor.selectionHighlightBorder#5aca76
  • editor.wordHighlightBackground#00ffff40
  • editor.wordHighlightBorder#5aca76
  • editor.wordHighlightStrongBackground#00ffff40
  • editor.wordHighlightStrongBorder#5aca76
  • editorCursor.foreground#afafaf
  • editorLineNumber.activeForeground#c4783a
  • editorLineNumber.foreground#6070ff
  • editorOverviewRuler.border#5060f080
  • editorWhitespace.foreground#454545
  • input.border#c4783a70
  • input.foreground#c4783a
  • list.activeSelectionBackground#5060f080
  • list.activeSelectionForeground#c4783a
  • list.focusBackground#5060f050
  • list.highlightForeground#c4783a
  • list.inactiveFocusForeground#c4783a
  • list.inactiveSelectionBackground#5060f050
  • list.inactiveSelectionForeground#c4783a
  • panel.border#5060f080
  • panelTitle.activeBorder#5060f080
  • panelTitle.activeForeground#c4783a
  • peekViewResult.matchHighlightBackground#794f80
  • pickerGroup.border#c4783a
  • pickerGroup.foreground#c4783a
  • scrollbarSlider.activeBackground#5060f080
  • scrollbarSlider.hoverBackground#5060f050
  • selection.background#c4783a
  • sideBarSectionHeader.background#bc66e340
  • sideBarTitle.foreground#c4783a
  • statusBar.background#5060f080
  • statusBar.border#c4783a70
  • statusBar.foreground#ffffff70
  • tab.activeBackground#5060f080
  • tab.activeForeground#c4783a
  • tab.hoverBorder#c4783a
  • tab.inactiveForeground#ffffffb0
  • tab.unfocusedActiveForeground#ffffff50
  • tab.unfocusedHoverBorder#c4783a
  • terminal.foreground#c4783a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#b9b9b9ff
storage.type.function italic
entity.name.function, meta.method-call.java, text entity.other, meta.object-literal.key#BC66E3
source.java entity#BC66E3italic
storage.type#6685FF
keyword.control, keyword.operator.expression, keyword.other,entity.name#6696FF
comment#60945F italic
variable.parameter, variable.other.property#BC66E3
string#C29500
constant.language, constant.numeric, variable.language.this, variable.language.java, source.java storage.modifier, text.xml entity.name.tag.namespace, text markup, text entity.other.attribute-name.namespace#C4783A italic
source.java constant, variable.other.constant, keyword.control.export.ts#C4783Abold
meta.object-literal.key string.quoted, support.type.property-name.json#A27500italic
meta.paragraph.markdown#B9B9B9normal
support.function, support.variable.property#C586E0 italic
keyword.operator#FFC106
property#BC66E3
keyword.operator.new#6685FF
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6

Shiki preview

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

Loading...

Dakara Theme by dakara - VS Code Theme