Skip to main content
Coding Theme

Dainty

Publisher: Alexander TeinumThemes in package: 30

Streamlined versions of popular VS Code themes

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.background#2e323aff
  • activityBar.dropBackground#282c34ff
  • activityBar.foreground#54a4e3ff
  • activityBar.inactiveForeground#606368ff
  • activityBarBadge.background#54a4e3bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#54a4e3bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#282c34ff
  • breadcrumb.focusForeground#efefefff
  • breadcrumb.foreground#7c7e82ff
  • breadcrumbPicker.background#2e323aff
  • button.background#006ca6ff
  • button.foreground#ffffffff
  • button.hoverBackground#1e7dbaff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#2e323aff
  • debugToolBar.background#282c34ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#2e323aff
  • dropdown.border#2e323aff
  • dropdown.foreground#efefefff
  • editor.background#282c34ff
  • editor.findMatchBackground#41698c40
  • editor.findMatchHighlightBackground#41698c40
  • editor.findRangeHighlightBackground#41698c40
  • editor.focusedStackFrameHighlightBackground#41698c40
  • editor.foreground#dfdfdfff
  • editor.hoverHighlightBackground#41698c40
  • editor.inactiveSelectionBackground#41698c20
  • editor.lineHighlightBackground#2e323aff
  • editor.lineHighlightBorder#2e323aff
  • editor.rangeHighlightBackground#41698c40
  • editor.selectionBackground#41698c40
  • editor.selectionHighlightBackground#41698c20
  • editor.snippetFinalTabstopHighlightBorder#41698c40
  • editor.snippetTabstopHighlightBackground#41698c40
  • editor.stackFrameHighlightBackground#41698c40
  • editor.wordHighlightBackground#41698c20
  • editor.wordHighlightStrongBackground#41698c20
  • editorActiveLineNumber.foreground#7c7e82ff
  • editorBracketMatch.background#41698c20
  • editorBracketMatch.border#54a4e3ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#528bffff
  • editorError.foreground#c0505bff
  • editorGroup.border#2e323aff
  • editorGroup.dropBackground#282c34ff
  • editorGroupHeader.noTabsBackground#282c34ff
  • editorGroupHeader.tabsBackground#2e323aff
  • editorGutter.addedBackground#355e1aff
  • editorGutter.background#282c34ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#982a3bff
  • editorGutter.modifiedBackground#2f587aff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#2e323aff
  • editorHoverWidget.border#2e323aff
  • editorIndentGuide.activeBackground#3e4249ff
  • editorIndentGuide.background#353941ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#7c7e82ff
  • editorLineNumber.foreground#606368ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#c0505bff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#254e09ff
  • editorOverviewRuler.border#2e323aff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#85152dff
  • editorOverviewRuler.errorForeground#c0505bbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#1d496aff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#282c34ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#2e323aff
  • editorSuggestWidget.border#2e323aff
  • editorSuggestWidget.foreground#efefefff
  • editorSuggestWidget.highlightForeground#efefefff
  • editorSuggestWidget.selectedBackground#353941ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#2e323aff
  • editorWidget.border#2e323aff
  • errorForeground#c0505bff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#41698cff
  • foreground#dfdfdfff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7c7e82ff
  • gitDecoration.modifiedResourceForeground#b89653ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#7da75fff
  • input.background#282c34ff
  • input.foreground#efefefff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#54a4e3ff
  • inputValidation.errorBackground#3a0000ff
  • inputValidation.errorBorder#630015ff
  • inputValidation.infoBackground#282c34ff
  • inputValidation.infoBorder#484c52ff
  • inputValidation.warningBackground#220000ff
  • inputValidation.warningBorder#3d2600ff
  • list.activeSelectionBackground#353941ff
  • list.activeSelectionForeground#efefefff
  • list.dropBackground#282c34ff
  • list.errorForeground#c0505bff
  • list.focusBackground#353941ff
  • list.highlightForeground#efefefff
  • list.hoverBackground#353941ff
  • list.inactiveFocusBackground#353941ff
  • list.inactiveSelectionBackground#353941ff
  • list.inactiveSelectionForeground#efefefff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#2e323aff
  • menu.foreground#bdbdbdff
  • menu.selectionBackground#353941ff
  • menu.selectionForeground#efefefff
  • menu.separatorBackground#484c52ff
  • menubar.selectionBackground#353941ff
  • menubar.selectionForeground#efefefff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#2e323aff
  • notificationLink.foreground#54a4e3ff
  • notifications.background#2e323aff
  • notifications.border#2e323aff
  • panel.background#2e323aff
  • panel.border#2e323aff
  • panel.dropBackground#282c34ff
  • panelTitle.activeBorder#54a4e3ff
  • panelTitle.activeForeground#efefefff
  • panelTitle.inactiveForeground#acadaeff
  • peekView.border#2e323aff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#2e323aff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#282c34ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#2e323aff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#14181fff
  • scrollbarSlider.activeBackground#606368bf
  • scrollbarSlider.background#484c52bf
  • scrollbarSlider.hoverBackground#54575dbf
  • settings.checkboxBackground#282c34ff
  • settings.checkboxBorder#606368ff
  • settings.checkboxForeground#efefefff
  • settings.dropdownBackground#2e323aff
  • settings.dropdownBorder#2e323aff
  • settings.dropdownForeground#efefefff
  • settings.dropdownListBorder#3e4249ff
  • settings.headerForeground#caf1ffff
  • settings.modifiedItemIndicator#41698cff
  • settings.numberInputBackground#2e323aff
  • settings.numberInputForeground#efefefff
  • settings.textInputBackground#2e323aff
  • settings.textInputForeground#efefefff
  • sideBar.background#2e323aff
  • sideBar.dropBackground#282c34ff
  • sideBar.foreground#acadaeff
  • sideBarSectionHeader.background#2e323aff
  • sideBarSectionHeader.foreground#606368ff
  • sideBarTitle.foreground#606368ff
  • statusBar.background#353941ff
  • statusBar.debuggingBackground#871500ff
  • statusBar.debuggingForeground#acadaeff
  • statusBar.foreground#acadaeff
  • statusBar.noFolderBackground#45105eff
  • statusBar.noFolderForeground#acadaeff
  • tab.activeBackground#2e323aff
  • tab.activeBorder#54a4e3ff
  • tab.activeForeground#efefefff
  • tab.activeModifiedBorder#54a4e3bf
  • tab.border#2e323aff
  • tab.inactiveBackground#2e323aff
  • tab.inactiveForeground#acadaeff
  • tab.inactiveModifiedBorder#54a4e3bf
  • tab.unfocusedActiveForeground#efefefff
  • tab.unfocusedActiveModifiedBorder#54a4e380
  • tab.unfocusedInactiveForeground#acadaeff
  • tab.unfocusedInactiveModifiedBorder#54a4e380
  • terminal.ansiBlack#2d3139ff
  • terminal.ansiBlue#61afefff
  • terminal.ansiBrightBlack#7f848eff
  • terminal.ansiBrightBlue#528bffff
  • terminal.ansiBrightCyan#56b6c2ff
  • terminal.ansiBrightGreen#98c379ff
  • terminal.ansiBrightMagenta#e292f9ff
  • terminal.ansiBrightRed#f44747ff
  • terminal.ansiBrightWhite#d7dae0ff
  • terminal.ansiBrightYellow#e5c07bff
  • terminal.ansiCyan#56b6c2ff
  • terminal.ansiGreen#98c379ff
  • terminal.ansiMagenta#e292f9ff
  • terminal.ansiRed#e06c75ff
  • terminal.ansiWhite#d7dae0ff
  • terminal.ansiYellow#e5c07bff
  • terminal.background#282c34ff
  • terminal.border#2e323aff
  • terminal.foreground#dfdfdfff
  • terminal.selectionBackground#41698c40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#2e323aff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#54a4e3ff
  • textLink.foreground#54a4e3ff
  • textPreformat.foreground#e292f9ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#2e323aff
  • titleBar.activeForeground#acadaeff
  • titleBar.inactiveBackground#2e323aff
  • titleBar.inactiveForeground#606368ff
  • widget.shadow#1e2229ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#e06c75ff
emphasisitalic
strongbold
header#000080
comment#7f848eff
constant.language#d19a66ff
constant.numeric#d19a66ff
constant.regexp#e06c75ff
entity.name.tag#e06c75ff
entity.name.tag.css#e5c07bff
entity.other.attribute-name#d19a66ff
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#d19a66ff
invalid#f44747
markup.underlineunderline
markup.bold#c678ddffbold
markup.heading#c678ddffbold
markup.italicitalic
markup.inserted#d19a66ff
markup.deleted#98c379ff
markup.changed#c678ddff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#98c379ff
punctuation.definition.tag#bbbbbbff
meta.preprocessor#c678ddff
meta.preprocessor.string#98c379ff
meta.preprocessor.numeric#d19a66ff
meta.structure.dictionary.key.python#e06c75ff
meta.diff.header#c678ddff
storage#c678ddff
storage.type#c678ddff
storage.modifier#c678ddff
string#98c379ff
string.tag#98c379ff
string.value#98c379ff
string.regexp#98c379ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#56b6c2ff
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#e06c75ff
keyword#c678ddff
keyword.control#c678ddff
keyword.operator#56b6c2ff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#c678ddff
keyword.other.unit#d19a66ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#c678ddff
support.function.git-rebase#56b6c2ff
constant.sha.git-rebase#d19a66ff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#c678ddff
entity.name.function, support.function, support.constant.handlebars#61afefff
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#e5c07bff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#e5c07bff
keyword.control#c678ddff
variable, meta.definition.variable.name, support.variable, entity.name.variable#e06c75ff
meta.object-literal.key#e06c75ff
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#98c379ff
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#bbbbbbff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#e06c75ff
keyword.operator.or.regexp, keyword.control.anchor.regexp#56b6c2ff
keyword.operator.quantifier.regexp#d19a66ff
constant.character#c678ddff
constant.character.escape#bbbbbbff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#98c379ff
string.template#98c379ff
storage.type.function#c678ddff
support.class.component.js#e06c75ff
variable.parameter#e06c75ff
variable.other.property#e06c75ff
support.function, support.constant.handlebars#56b6c2ff
support.type, support.class, support.constant.math#e5c07bff
support.type.vendored.property-name, support.type.property-name#e06c75ff
support.function#56b6c2ff
variable.other.constant#e5c07bff
meta.brace.round, meta.brace.square, meta.brace.angle, punctuation#bbbbbbff
support.type.property-name.json#e06c75ff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#56b6c2ff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#c678ddff
entity.name.type.class, entity.name.type.module#e5c07bff
punctuation.definition.comment, punctuation.definition.list.begin.markdown#7f848eff
markup.headingnormal

Shiki preview

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

Loading...

Dainty - Coding Theme