Surfer Theme Suit
Publisher: SurferThemes in package: 6
Simple flat light theme
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#ebedef
- activityBar.foreground#000000
- badge.background#e0e4e700
- breadcrumb.background#ebedef
- breadcrumb.foreground#aaaaaa
- editor.background#ebedef
- editor.foreground#353535
- editor.lineHighlightBackground#ebedef
- editor.selectionBackground#abdffa
- editorCursor.foreground#000000
- editorGroupHeader.tabsBackground#ebedef
- editorIndentGuide.background#eaeaea
- editorLineNumber.foreground#bbbbbb
- editorOverviewRuler.border#f8f8f8
- editorRuler.foreground#dddddd
- editorWidget.background#ebedef
- list.hoverBackground#dbdde0
- list.inactiveSelectionBackground#c7cbd1
- peekView.border#dde5ebc2
- scrollbar.shadow#ebedef
- scrollbarSlider.activeBackground#dddddd
- scrollbarSlider.background#0000000a
- scrollbarSlider.hoverBackground#dddddd
- sideBar.background#ebedef
- sideBar.foreground#777777
- sideBarSectionHeader.background#ebedef
- statusBar.background#ebedef
- statusBar.debuggingForeground#f8f8f8
- statusBar.foreground#5670c5
- statusBar.noFolderBackground#a4a9b2
- statusBarItem.hoverBackground#cccccc
- tab.activeBackground#c5c9d6
- tab.inactiveBackground#ebedef
- titleBar.activeBackground#ebedef
- titleBar.activeForeground#999999
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #10A567 | — |
| string | #E88501 | — |
| keyword | #386AC3 | — |
| keyword.operator | #386AC3 | — |
| storage | #386AC3 | — |
| storage.modifier.import, storage.modifier.package | #535353 | — |
| support.function | #386AC3 | — |
| variable.parameter | #E06C75 | — |
| constant.numeric | #6D8600 | — |
| constant.language | #E88501 | — |
| constant.other | #E88501 | italic |
| text.html.basic meta.tag.sgml.html punctuation.definition.tag.html, text.html.basic meta.tag.sgml.html meta.tag.sgml.doctype.html, text.html.basic meta.tag.sgml.html meta.tag.sgml.doctype.html string.quoted.double.doctype.identifiers-and-DTDs.html | #535353 | — |
| text.html.basic constant.character.entity.html, text.xml constant.character.entity.xml | #E88501 | — |
| entity.name.tag | #386AC3 | — |
| punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.html | #386AC3 | — |
| entity.other.attribute-name | #6D8600 | — |
| meta.selector.css entity.name.tag.css, meta.selector.css entity.other.attribute-name.class.css, meta.selector.css entity.other.attribute-name.id.css, meta.selector.css meta.attribute-selector.css entity.other.attribute-name.attribute.css, meta.selector.css meta.attribute-selector.css string.unquoted.attribute-value.css | #386AC3 | — |
| meta.selector.css meta.attribute-selector.css punctuation.separator.operator.css | #535353 | — |
| meta.selector.css entity.other.attribute-name.pseudo-class.css, meta.selector.css entity.other.attribute-name.pseudo-element.css | #535353 | — |
| keyword.control.at-rule, meta.at-rule support.type.property-name | #8431C5 | — |
| meta.at-rule support.constant | #6D8600 | — |
| meta.at-rule keyword.operator | #386AC3 | — |
| meta.property-name.css support.type.property-name.css | #8431C5 | — |
| meta.property-value.css | #535353 | — |
| meta.property-value.css support.constant, meta.property-value.css support.function, meta.property-value.css variable.parameter.misc.css, meta.property-value.css constant.other.color.rgb-value.css | #E88501 | |
| meta.property-value.css constant.numeric.css, meta.property-value.css constant.numeric.css keyword.other.unit.css, meta.at-rule constant.numeric.css keyword.other.unit.css | #6D8600 | — |
| meta.property-value.css support.constant.color.w3c-standard-color-name.css | #386AC3 | — |
| punctuation.separator.key-value.css, punctuation.terminator.rule.css, punctuation.section.property-list.css | #535353 | — |
| variable.language.js, storage.type.js, storage.type.function.js, meta.function.json.js storage.type.function.js, meta.class.instance.constructor, keyword.operator.new keyword.operator.new.js | #386AC3 | — |
| support.function.js, support.function.ts, support.function.dom.js, support.constant.js, entity.name.function.js, entity.name.function.ts, meta.function.json.js variable.parameter.function.js | #8431C5 | — |
| text.xml meta.tag.preprocessor.xml punctuation.definition.tag.begin.xml, text.xml meta.tag.preprocessor.xml entity.name.tag.xml, text.xml meta.tag.preprocessor.xml entity.other.attribute-name.xml, text.xml meta.tag.preprocessor.xml string.quoted.double.xml, text.xml meta.tag.sgml.doctype.xml punctuation.definition.tag.begin.xml, text.xml meta.tag.sgml.doctype.xml keyword.doctype.xml | #535353 | — |
| text.tex.latex constant, text.tex.latex constant.other | #386AC3 | |
| text.tex.latex string.other.math | #6D8600 | — |
| text.tex.latex string.other.math punctuation.section.group.tex, text.tex.latex string.other.math punctuation.definition.arguments | #535353 | — |
| text.tex.latex meta.function.section.latex entity.name.section.latex | #8431C5 | — |
| text.tex.latex variable.parameter.function.latex | #E88501 | italic |
| text.tex.latex constant.other.reference | #E88501 | |
| text.tex.latex meta.preamble.latex support.class.latex | #6D8600 | — |
| source.c++ meta.preprocessor | #386AC3 | — |
| sublimelinter.mark.error | #D02000 | — |
| sublimelinter.gutter-mark | #FFFFFF | — |
| sublimelinter.mark.warning | #DDB700 | — |
| markup.deleted.git_gutter | #F92672 | — |
| markup.inserted.git_gutter | #A6E22E | — |
| markup.changed.git_gutter | #967EFB | — |
| markup.ignored.git_gutter | #565656 | — |
| markup.untracked.git_gutter | #565656 | — |
| punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts | #386AC3 | — |
| meta.template.expression.js, meta.template.expression.ts | #000000 | — |
| support.module.node.js, support.type.object.module.js, support.module.node.js | #000000 | — |
| var.this, variable.language.this.js, variable.language.this.ts, variable.language.this.jsx, variable.language.this.tsx | #4671BB | — |
| function.parameter | #E06C75 | — |
| function.parameter | #E06C75 | — |
| keyword.oper | #E06C75 | — |
| keyword.operator.expression.delete, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.expression.typeof, keyword.operator.expression.void | #386AC3 | — |
| support.type.property-name.json | #386AC3 | — |
| keyword.operator.expression.import | #386AC3 | — |
| entity | #8431C5 | — |
| entity.name.type.namespace | #5978F3 | — |
| entity.name.type | #163FE4 | — |
| support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx | #42567B | — |
| token.info-token | #316BCD | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #CD3131 | — |
| token.debug-token | #800080 | — |