Skip to main content
Coding Theme

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.background#1f2430
  • activityBar.border#1f2430
  • activityBar.foreground#707a8ccc
  • activityBar.inactiveForeground#707a8c99
  • activityBarBadge.background#ffcc66
  • activityBarBadge.foreground#1f2430
  • badge.background#ffcc6633
  • badge.foreground#ffcc66
  • button.background#ffcc66
  • button.foreground#1f2430
  • button.hoverBackground#fac761
  • debugExceptionWidget.background#232834
  • debugExceptionWidget.border#191e2a
  • debugToolBar.background#232834
  • descriptionForeground#707a8c
  • diffEditor.insertedTextBackground#bae67e26
  • diffEditor.removedTextBackground#f29e7426
  • dropdown.background#232834
  • dropdown.border#434957
  • dropdown.foreground#707a8c
  • editor.background#0d1018
  • editor.findMatchBackground#ffcc660d
  • editor.findMatchBorder#ffcc66
  • editor.findMatchHighlightBackground#ffcc660d
  • editor.findMatchHighlightBorder#ffcc6659
  • editor.findRangeHighlightBackground#323a4c
  • editor.findRangeHighlightBorder#1f243000
  • editor.foreground#bbbbbb
  • editor.inactiveSelectionBackground#323a4c
  • editor.lineHighlightBackground#191e2a
  • editor.rangeHighlightBackground#191e2a
  • editor.selectionBackground#33415e
  • editor.selectionHighlightBackground#323a4c
  • editor.selectionHighlightBorder#323a4c
  • editor.wordHighlightBackground#77a8d912
  • editor.wordHighlightBorder#77a8d980
  • editor.wordHighlightStrongBackground#a6cc7012
  • editor.wordHighlightStrongBorder#a6cc7080
  • editorBracketMatch.background#707a8c4d
  • editorBracketMatch.border#707a8c99
  • editorCodeLens.foreground#5c6773
  • editorCursor.foreground#ffcc66
  • editorError.foreground#ff3333
  • editorGroup.background#232834
  • editorGroup.border#191e2a
  • editorGroupHeader.noTabsBackground#1f2430
  • editorGroupHeader.tabsBackground#1f2430
  • editorGroupHeader.tabsBorder#1f2430
  • editorGutter.addedBackground#a6cc7099
  • editorGutter.deletedBackground#f2798399
  • editorGutter.modifiedBackground#77a8d999
  • editorHoverWidget.background#232834
  • editorHoverWidget.border#101521
  • editorIndentGuide.activeBackground#707a8cb3
  • editorIndentGuide.background#707a8c4d
  • editorLineNumber.activeForeground#707a8ccc
  • editorLineNumber.foreground#707a8c66
  • editorLink.activeForeground#ffcc66
  • editorMarkerNavigation.background#232834
  • editorOverviewRuler.addedForeground#a6cc7099
  • editorOverviewRuler.border#191e2a
  • editorOverviewRuler.deletedForeground#f2798399
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#77a8d999
  • editorOverviewRuler.warningForeground#ffcc66
  • editorRuler.foreground#707a8c4d
  • editorSuggestWidget.background#232834
  • editorSuggestWidget.border#101521
  • editorSuggestWidget.highlightForeground#ffcc66
  • editorSuggestWidget.selectedBackground#191e2a
  • editorWarning.foreground#ffcc66
  • editorWhitespace.foreground#707a8c66
  • editorWidget.background#232834
  • errorForeground#ff3333
  • extensionButton.prominentBackground#ffcc66
  • extensionButton.prominentForeground#1f2430
  • extensionButton.prominentHoverBackground#fac761
  • focusBorder#596171
  • foreground#707a8c
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#525a69
  • gitDecoration.modifiedResourceForeground#77a8d9b3
  • gitDecoration.submoduleResourceForeground#d4bfffb3
  • gitDecoration.untrackedResourceForeground#a6cc70b3
  • icon.foreground#707a8c
  • input.background#1d222e
  • input.border#434957
  • input.foreground#bbbbbb
  • input.placeholderForeground#5f6878
  • inputOption.activeBorder#ffcc66
  • inputValidation.errorBackground#1f2430
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBackground#1f2430
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.warningBackground#1f2430
  • inputValidation.warningBorder#ffd580
  • list.activeSelectionBackground#191e2a
  • list.activeSelectionForeground#707a8c
  • list.errorForeground#f27983
  • list.filterMatchBackground#ffcc660d
  • list.filterMatchBorder#ffcc66
  • list.focusBackground#191e2a
  • list.focusForeground#707a8c
  • list.highlightForeground#ffcc66
  • list.hoverBackground#191e2a
  • list.hoverForeground#707a8c
  • list.inactiveSelectionBackground#191e2a
  • list.inactiveSelectionForeground#707a8c
  • list.invalidItemForeground#5f6878
  • listFilterWidget.background#232834
  • listFilterWidget.noMatchesOutline#ff3333
  • listFilterWidget.outline#ffcc66
  • panel.background#1f2430
  • panel.border#191e2a
  • panelTitle.activeBorder#ffcc66
  • panelTitle.activeForeground#bbbbbb
  • panelTitle.inactiveForeground#707a8c
  • peekView.border#191e2a
  • peekViewEditor.background#232834
  • peekViewEditor.matchHighlightBackground#ffcc6633
  • peekViewResult.background#232834
  • peekViewResult.fileForeground#707a8c
  • peekViewResult.matchHighlightBackground#ffcc6633
  • peekViewTitle.background#232834
  • peekViewTitleDescription.foreground#707a8c
  • peekViewTitleLabel.foreground#707a8c
  • pickerGroup.border#191e2a
  • pickerGroup.foreground#525a69
  • progressBar.background#ffcc66
  • scrollbar.shadow#191e2a
  • scrollbarSlider.activeBackground#707a8cb3
  • scrollbarSlider.background#707a8c66
  • scrollbarSlider.hoverBackground#707a8c99
  • selection.background#33415efd
  • settings.headerForeground#bbbbbb
  • settings.modifiedItemIndicator#77a8d9
  • sideBar.background#1f2430
  • sideBar.border#1f2430
  • sideBarSectionHeader.background#1f2430
  • sideBarSectionHeader.border#1f2430
  • sideBarSectionHeader.foreground#707a8c
  • sideBarTitle.foreground#707a8c
  • statusBar.background#1f2430
  • statusBar.border#1f2430
  • statusBar.debuggingBackground#f29e74
  • statusBar.debuggingForeground#1f2430
  • statusBar.foreground#707a8c
  • statusBar.noFolderBackground#232834
  • statusBarItem.activeBackground#191e2a
  • statusBarItem.hoverBackground#191e2a
  • statusBarItem.prominentBackground#191e2a
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#1f2430
  • tab.activeBorder#ffcc66
  • tab.activeForeground#bbbbbb
  • tab.border#1f2430
  • tab.inactiveBackground#1f2430
  • tab.inactiveForeground#707a8c
  • tab.unfocusedActiveBorder#707a8c
  • tab.unfocusedActiveForeground#707a8c
  • tab.unfocusedInactiveForeground#707a8c
  • terminal.ansiBlack#191e2a
  • terminal.ansiBlue#6dcbfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#73d0ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#bae67e
  • terminal.ansiBrightMagenta#d4bfff
  • terminal.ansiBrightRed#f28779
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd580
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#a6cc70
  • terminal.ansiMagenta#cfbafa
  • terminal.ansiRed#ed8274
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#fad07b
  • terminal.background#1f2430
  • terminal.foreground#bbbbbb
  • textBlockQuote.background#232834
  • textLink.activeForeground#ffcc66
  • textLink.foreground#ffcc66
  • textPreformat.foreground#bbbbbb
  • titleBar.activeBackground#1f2430
  • titleBar.activeForeground#bbbbbb
  • titleBar.border#1f2430
  • titleBar.inactiveBackground#1f2430
  • titleBar.inactiveForeground#707a8c
  • tree.indentGuidesStroke#707a8cb3
  • walkThrough.embeddedEditorBackground#232834
  • widget.shadow#141925

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#bbbbbb
comment#5c6773italic
punctuation.definition.string, constant.other.symbol#5ccfe6
string.regexp, constant.character, constant.other#43CC9E
constant.numeric#ddd799
entity.other.attribute-name.tag.pug#e6de90
constant.language#d5d588
variable#ea8650
variable.other.property#895b8a
variable.member#f28779
variable.language#5ccfe6italic
storage#e67eba
keyword.control#bca7ff
keyword.control.at-rule#ffccc688
keyword.other.unit#999
entity.other.attribute-name.html, entity.other.attribute-name.astro, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, meta.attribute.unrecognized.loading.html entity.other.attribute-name.html, meta.attribute.unrecognized.aria-label.html entity.other.attribute-name.html, meta.attribute.unrecognized.frameborder.html entity.other.attribute-name.html, meta.attribute.unrecognized.scrolling.html entity.other.attribute-name.html#666
keyword.other.important.scss, keyword.other.default.scss#5ccfe680
keyword.operator#eeeeee
punctuation.separator, punctuation.terminator, attribute_value#bbbbbbb3
punctuation.section#bbbbbb
punctuation.accessor#bbbbbb
source.java storage.type, source.haskell storage.type, source.c storage.type#73d0ff
entity.other.inherited-class#73d0ff
storage.type.function#ad7d4c
source.java storage.type.primitive#5ccfe6
entity.name.function.scss#dddddd
entity.name.function.js, entity.name.function.ts#cc99b7
punctuation.definition.parameters#937a7d
variable.parameter, meta.parameter#cc4977
variable.function, variable.annotation, meta.function-call.generic, support.function.go#ffd580
support.function, support.macro#ddd362
entity.name.import, entity.name.package#bae67e
entity.name#2ec7e6dd
string.quoted.double.html, string.quoted.astro, string.quoted.tsx, string.quoted.jsx#ac7972
entity.name.tag#2d9fb6
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#5ccfe680
meta.attribute-selector, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, meta.attribute.class.html string.quoted.double.html, meta.attribute.class.astro string.quoted.astro, meta.attribute.class.tsx string.quoted.tsx, meta.attribute.class.jsx string.quoted.jsx#c6677a
meta.attribute.src string.quoted.double, meta.attribute.src.html string.quoted.double.html, meta.attribute.srcset string.quoted.double, meta.attribute.srcset.html string.quoted.double.html, meta.attribute.alt string.quoted.double, meta.attribute.alt.html string.quoted.double.html, meta.attribute.src string.quoted.astro, meta.attribute.src.astro string.quoted.astro, meta.attribute.srcset string.quoted.astro, meta.attribute.srcset.astro string.quoted.astro, meta.attribute.alt string.quoted.astro, meta.attribute.alt.astro string.quoted.astro, meta.attribute.src string.quoted.tsx, meta.attribute.src.tsx string.quoted.tsx, meta.attribute.srcset string.quoted.tsx, meta.attribute.srcset.tsx string.quoted.tsx, meta.attribute.alt string.quoted.tsx, meta.attribute.alt.tsx string.quoted.tsx, meta.attribute.src string.quoted.jsx, meta.attribute.src.jsx string.quoted.jsx, meta.attribute.srcset string.quoted.jsx, meta.attribute.srcset.jsx string.quoted.jsx, meta.attribute.alt string.quoted.jsx, meta.attribute.alt.jsx string.quoted.jsx, meta.attribute.data-x.data-bg-sp string.quoted.double, meta.attribute.data-x.data-bg-sp.html string.quoted.double.html, meta.attribute.data-x.data-bg string.quoted.double, meta.attribute.data-x.data-bg.html string.quoted.double.html, meta.attribute.data-x.data-src.html string.quoted.double.html#ddd362cc
meta.attribute.href.html string.quoted.double.html, meta.attribute.href.astro string.quoted.astro, meta.attribute.href.tsx string.quoted.tsx, meta.attribute.href.jsx string.quoted.jsx#eb9b6fee
meta.attribute.unrecognized entity.other.attribute-name.html#dd3954
entity.other.attribute-name.id, meta.attribute.id.html string.quoted.double.html, meta.attribute.id.astro string.quoted.astro, meta.attribute.id.tsx string.quoted.tsx, meta.attribute.id.jsx string.quoted.jsx#6592f9
support.constant#ddd362normal
support.type, support.class, source.go storage.type#d0d0d0
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#ffe6b3
invalid#ff3333
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#ff8a9a
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag, support.class.component.astro, support.class.component.tsx, support.class.component.jsx#5ccfe6
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#5c6773
support.type.property-name.css#DDDDDDnormal
support.type.property-name.json#DDDDDD
meta.structure.dictionary.value.json punctuation.definition.dictionary.begin.json, meta.structure.dictionary.value.json punctuation.definition.dictionary.end.json, meta.structure.dictionary.value.json punctuation.definition.array.begin.json.comments, meta.structure.dictionary.value.json punctuation.definition.array.end.json.comments#BBBBBB
meta.structure.dictionary.value.json string.quoted.double.json#AC7972
support.type.property-name.json punctuation.support.type.property-name.begin.json, support.type.property-name.json punctuation.support.type.property-name.end.json#5CCFE6
constant.numeric.line-number.find-in-files - match#5c6773
constant.numeric.line-number.match#ffa759
entity.name.filename.find-in-files#bae67e
message.error#ff3333
markup.heading, markup.heading entity.name#bae67ebold
markup.underline.link, string.other.link#5ccfe6
markup.italic#f28779italic
markup.bold#f28779bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#5c6773bold
markup.quote#95e6cbitalic
markup.list punctuation.definition.list.begin#ffd580
markup.inserted#a6cc70
markup.changed#7592c9
markup.deleted#f27983
markup.strike#ffe6b3
markup.table#5ccfe6
text.html.markdown markup.inline.raw#f29e74
text.html.markdown meta.dummy.line-break#5c6773
punctuation.definition.markdown#5c6773
meta.attribute.style.html source.css, entity.other.attribute-name.placeholder#72CC82
Mil Theme by milford - VS Code Theme