FectionLabs Themes

Color themes

• 

  FectionLabs Theme Dark

• 

  FectionLabs Theme Ember

• 

  FectionLabs Theme Glacier

• 

  FectionLabs Theme Light

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#034972
• activityBar.border#D4A853
• activityBar.foreground#FFFFFF
• activityBarBadge.background#D4A853
• activityBarBadge.foreground#023556
• badge.background#034972
• badge.foreground#FFFFFF
• button.background#034972
• button.foreground#FFFFFF
• debugTokenExpression.name#034972
• debugToolBar.background#F0F0F0
• diffEditor.insertedTextBackground#03497222
• diffEditor.removedTextBackground#FFCDD2
• editor.background#FFFFFF
• editor.foreground#023556
• editor.lineHighlightBackground#E8F4F8
• editor.selectionBackground#03497233
• editor.selectionHighlightBackground#03497222
• editor.wordHighlightBackground#E8E8E8
• editor.wordHighlightStrongBackground#03497222
• editorBracketMatch.background#03497218
• editorBracketMatch.border#D4A853
• editorCursor.foreground#023556
• editorGroup.border#03497240
• editorGroupHeader.tabsBackground#E8EEF2
• editorGutter.background#FAFAFA
• editorIndentGuide.activeBackground#034972
• editorIndentGuide.background#D3D3D3
• editorLineNumber.activeForeground#D4A853
• editorLineNumber.foreground#03497299
• editorWidget.background#F3F3F3
• focusBorder#0D9488
• input.background#FFFFFF
• input.border#03497266
• list.activeSelectionBackground#034972
• list.activeSelectionForeground#FFFFFF
• list.focusOutline#D4A853
• list.hoverBackground#E8F4F8
• notificationCenter.border#D4A853
• notificationsErrorIcon.foreground#A31515
• panel.background#FFFFFF
• panel.border#03497230
• panelTitle.activeForeground#034972
• panelTitle.inactiveForeground#757575
• progressBar.background#D4A853
• sash.hoverBorder#0D9488
• scrollbarSlider.activeBackground#03497266
• sideBar.background#F3F3F3
• sideBar.border#03497240
• sideBar.foreground#023556
• sideBarTitle.foreground#034972
• statusBar.background#034972
• statusBar.border#D4A853
• statusBar.foreground#FFFFFF
• statusBarItem.prominentBackground#023556
• statusBarItem.prominentForeground#FFFFFF
• tab.activeBackground#FFFFFF
• tab.activeBorder#D4A853
• tab.activeBorderTop#D4A853
• tab.activeForeground#023556
• tab.inactiveBackground#E8EEF2
• tab.inactiveForeground#5A7A8C
• terminal.ansiBlack#023556
• terminal.ansiBlue#034972
• terminal.ansiCyan#0D9488
• terminal.ansiGreen#1B7A4A
• terminal.ansiMagenta#7A3E8C
• terminal.ansiRed#A31515
• terminal.ansiWhite#555555
• terminal.ansiYellow#B8923A
• terminal.background#FFFFFF
• terminal.foreground#023556
• titleBar.activeBackground#E8EEF2
• titleBar.activeForeground#023556
• titleBar.inactiveBackground#F3F3F3
• titleBar.inactiveForeground#5A7A8C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).