Ragnarok
Publisher: Filip DzankicThemes in package: 1
A yellow theme with blue accents and grey background optimized for HTML / CSS / JS. Also includes MD and JSON support.
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#1b1b1b
- activityBar.border#333300
- activityBar.foreground#b3b300
- activityBarBadge.background#b3b300E6
- activityBarBadge.foreground#000000
- badge.background#b3b300E6
- badge.foreground#000000
- breadcrumb.activeSelectionForeground#FFFFFF
- breadcrumb.focusForeground#ffffff
- breadcrumb.foreground#7eaef1
- breadcrumbPicker.background#1b1b1b
- button.background#e6e600cc
- button.foreground#000000
- button.hoverBackground#e6e600F2
- checkbox.border#808000
- contrastBorder#333300
- debugExceptionWidget.background#333300
- debugExceptionWidget.border#5f7e97
- debugToolBar.background#4c4c00
- diffEditor.insertedTextBackground#99b76d23
- diffEditor.insertedTextBorder#c5e47833
- diffEditor.removedTextBackground#ef535033
- diffEditor.removedTextBorder#ef53504d
- dropdown.background#1b1b1b
- dropdown.border#808000
- dropdown.foreground#ffffffcc
- editor.background#131313
- editor.findMatchBackground#b3b30079
- editor.findMatchHighlightBackground#4c4c008C
- editor.foreground#C6CFE2
- editor.hoverHighlightBackground#4c4c007A
- editor.inactiveSelectionBackground#4c4c005a
- editor.lineHighlightBackground#1F1F00
- editor.rangeHighlightBackground#5478e45a
- editor.selectionBackground#1a2a5aE6
- editor.selectionHighlightBackground#5478e479
- editor.wordHighlightStrongBackground#e2a2f433
- editorBracketMatch.background#131f434d
- editorCodeLens.foreground#5e82ceb4
- editorCursor.foreground#cccc00
- editorError.foreground#EF5350
- editorGroup.border#333300
- editorGroup.dropBackground#66660073
- editorGroup.emptyBackground#171717
- editorGroupHeader.noTabsBackground#171717
- editorGroupHeader.tabsBackground#171717
- editorGroupHeader.tabsBorder#333300
- editorGutter.addedBackground#9CCC65
- editorGutter.background#171717
- editorGutter.deletedBackground#EF5350
- editorGutter.modifiedBackground#e2b93d
- editorHoverWidget.background#171717
- editorHoverWidget.border#808000
- editorHoverWidget.foreground#d6deeb
- editorIndentGuide.activeBackground#6787e7A6
- editorIndentGuide.background#4169e152
- editorLineNumber.activeForeground#BFBFBF
- editorLineNumber.foreground#595959
- editorMarkerNavigation.background#0b2942
- editorMarkerNavigationError.background#EF5350
- editorMarkerNavigationWarning.background#FFCA28
- editorOverviewRuler.commonContentForeground#7e57c2
- editorOverviewRuler.currentContentForeground#7e57c2
- editorOverviewRuler.incomingContentForeground#7e57c2
- editorRuler.foreground#5e81ce52
- editorSuggestWidget.background#191900
- editorSuggestWidget.border#808000
- editorSuggestWidget.foreground#d6deeb
- editorSuggestWidget.highlightForeground#ffffff
- editorSuggestWidget.selectedBackground#666600
- editorWarning.foreground#b39554
- editorWidget.background#191900
- editorWidget.border#666600
- editorWidget.resizeBorder#666600
- errorForeground#EF5350
- extensionButton.prominentBackground#e6e600cc
- extensionButton.prominentForeground#000000
- extensionButton.prominentHoverBackground#e6e600F2
- focusBorder#333300
- foreground#d6deeb
- gitDecoration.conflictingResourceForeground#ffeb95cc
- gitDecoration.deletedResourceForeground#EF535090
- gitDecoration.ignoredResourceForeground#395a75
- gitDecoration.modifiedResourceForeground#a0b4f0
- gitDecoration.untrackedResourceForeground#c5e478ff
- input.background#171717
- input.border#808000
- input.foreground#ffffffcc
- input.placeholderForeground#808080
- inputOption.activeBorder#ff0000
- inputOption.activeForeground#ff0000
- inputValidation.errorBackground#AB0300F2
- inputValidation.errorBorder#EF5350
- inputValidation.infoBackground#00589EF2
- inputValidation.infoBorder#64B5F6
- inputValidation.warningBackground#675700F2
- inputValidation.warningBorder#FFCA28
- list.activeSelectionBackground#9999008c
- list.activeSelectionForeground#ffffff
- list.dropBackground#333300
- list.focusBackground#333300
- list.focusForeground#ffffff
- list.highlightForeground#ffffff
- list.hoverBackground#171717
- list.hoverForeground#ffffff
- list.inactiveSelectionBackground#333300
- list.inactiveSelectionForeground#FFFFFF80
- list.invalidItemForeground#975f94
- merge.currentHeaderBackground#5f7e97
- merge.incomingHeaderBackground#7e57c25a
- meta.objectliteral.js#82AAFF
- minimap.errorHighlight#FF0000cc
- minimap.findMatchHighlight#ffff0099
- minimap.selectionHighlight#5478e4A6
- minimapSlider.activeBackground#2e4a9e40
- minimapSlider.background#2e4a9e40
- minimapSlider.hoverBackground#2e4a9e40
- notificationCenter.border#333300
- notificationLink.foreground#80CBC4
- notifications.background#191900
- notifications.border#333300
- notifications.foreground#ffffffcc
- notificationToast.border#333300
- panel.border#333300
- panelTitle.activeBorder#808000
- panelTitle.activeForeground#ffffffcc
- panelTitle.inactiveForeground#d6deeb80
- peekView.border#5f7e97
- peekViewEditor.background#333300
- peekViewEditor.matchHighlightBackground#7e57c25a
- peekViewResult.background#333300
- peekViewResult.fileForeground#5f7e97
- peekViewResult.lineForeground#5f7e97
- peekViewResult.matchHighlightBackground#ffffffcc
- peekViewResult.selectionBackground#2E3250
- peekViewResult.selectionForeground#5f7e97
- peekViewTitle.background#333300
- peekViewTitleDescription.foreground#697098
- peekViewTitleLabel.foreground#5f7e97
- pickerGroup.border#333300
- pickerGroup.foreground#d1aaff
- progressBar.background#b3b300E6
- scrollbar.shadow#191900
- scrollbarSlider.activeBackground#66660080
- scrollbarSlider.background#66660080
- scrollbarSlider.hoverBackground#66660080
- selection.background#4373c2
- sideBar.background#171717
- sideBar.border#333300
- sideBar.foreground#B3B3B3
- sideBarSectionHeader.background#1a1a1a
- sideBarSectionHeader.foreground#999900
- sideBarTitle.foreground#999999
- source.elm#5f7e97
- statusBar.background#0f0f0f
- statusBar.border#333300
- statusBar.debuggingBackground#202431
- statusBar.debuggingBorder#1F2330
- statusBar.foreground#999999
- statusBar.noFolderBackground#333300
- statusBar.noFolderBorder#25293A
- statusBarItem.activeBackground#202431
- statusBarItem.hoverBackground#202431
- statusBarItem.prominentBackground#202431
- statusBarItem.prominentHoverBackground#202431
- string.quoted.single.js#ffffff
- tab.activeBackground#333300
- tab.activeBorder#808000
- tab.activeForeground#FFFFFFD9
- tab.border#333300
- tab.inactiveBackground#1b1b1b
- tab.inactiveForeground#999999
- tab.lastPinnedBorder#808000
- tab.unfocusedActiveBorder#808000
- tab.unfocusedActiveForeground#FFFFFFBF
- tab.unfocusedInactiveForeground#999999BF
- terminal.ansiBlack#333300
- terminal.ansiBlue#82AAFF
- terminal.ansiBrightBlack#575656
- terminal.ansiBrightBlue#82AAFF
- terminal.ansiBrightCyan#7fdbca
- terminal.ansiBrightGreen#22da6e
- terminal.ansiBrightMagenta#C792EA
- terminal.ansiBrightRed#EF5350
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffeb95
- terminal.ansiCyan#21c7a8
- terminal.ansiGreen#22da6e
- terminal.ansiMagenta#C792EA
- terminal.ansiRed#EF5350
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#c5e478
- terminal.selectionBackground#1b90dd4d
- terminalCursor.foreground#b3b300
- textCodeBlock.background#4f4f4f
- titleBar.activeBackground#171717
- titleBar.activeForeground#bebfcc
- titleBar.inactiveBackground#0f0f0f
- walkThrough.embeddedEditorBackground#333300
- welcomePage.buttonHoverBackground#333300
- widget.shadow#191900
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| Global settings | #c6cfe2 | — |
| comment, punctuation.definition.comment | #5EA046 | |
| constant.numeric, constant.character.numeric | #b5ce92 | |
| constant.language.boolean.true.js | #41C846 | |
| constant.language.boolean.false.js | #EB0000 | |
| punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #808080 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html | #DCC218 | |
| entity.other.attribute-name | #BB7CDA | |
| string.quoted.single.html, string.quoted.double.html | #7EAEF1 | — |
| variable.css, variable.argument.css | #38C4CC | — |
| entity.other.attribute-name.pseudo-class.css | #DB960D | |
| support.type.property-name.css, support.type.property-name.media.css, support.constant.media.css | #7eaef1 | |
| meta.property-value.css, keyword.control.at-rule.media.css, keyword.control.at-rule.import.css | #bb7cda | |
| support.function.url.css | #b5ce92 | |
| string.quoted.single.js, string.quoted.double.js, string.quoted.double.css, string.template.js | #DB960D | |
| variable.other.object.property.js, variable.other.constant.js, variable.other.readwrite.js | #38C4CC | |
| constant.language.undefined.js, constant.language.null.js | #9e60bb | |
| variable.other.property.js, variable.language.this.js, variable.other.object.js | #94B81E | |
| storage.type.class.js, storage.modifier.js, storage.modifier.async.js, storage.type.function.js | #bb7cda | |
| support.class.error.js | #CFA5E4 | |
| entity.name.type.class.js, entity.name.function.js, entity.other.inherited-class.js | #7eaef1 | |
| keyword.control.conditional.js, keyword.control.trycatch.js, keyword.operator.new.js, keyword.control.loop.js, keyword.operator.expression.of.js, keyword.control.flow.js, keyword.control.flow.js, keyword.control.switch.js, keyword.control.switch.js, keyword.operator.logical.js | #dcc218 | |
| string.json.comments, support.type.property-name.json | #7eaef1 | |
| string.quoted.double.json, storage.type.js | #bb7cda | |
| constant.language.json.comments | #A68067 | |
| entity.name.section.markdown, punctuation.definition.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown | #B8A214 | bold |
| punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown | #dcc218 | |
| punctuation.definition.list.begin.markdown, markup.bold.markdown | #7eaef1 | bold |
| markup.italic.markdown | #7eaef1 | italic |
| markup.quote.markdown | #93A5C8 | italic |
| meta.link.inline.markdown, meta.image.inline.markdown | #bb7cda | |
| string.other.link.title.markdown | #7eaef1 | |
| markup.fenced_code.block.markdown, markup.inline.raw.string.markdown | #A68067 |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...