vscode_blender_nokto

Name: vscode_blender_nokto
Author: Cyrill Vitkovskiy

Publisher: Cyrill VitkovskiyThemes in package: 1

VSCode theme that matches my Blender Adapta Nokto theme

Open in VS Code GitHub

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

vscode_blender_nokto — VSCode Blender Nokto Theme

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#232d32
activityBar.foreground#4ccebc
activityBarBadge.background#232d32
badge.background#21846e66
badge.foreground#3dffec
breadcrumb.activeSelectionForeground#4ccebc
breadcrumb.background#232d32
breadcrumb.focusForeground#4ccebc
breadcrumb.foreground#4ccebc66
button.background#009688
debugToolBar.background#1e1f1c
diffEditor.insertedTextBackground#66852880
diffEditor.removedTextBackground#BC001380
dropdown.background#212B30
editor.background#232d32
editor.findMatchBackground#008D8050
editor.findMatchBorder#6cffdb55
editor.findMatchHighlightBackground#02b4a250
editor.findMatchHighlightBorder#6cffdb66
editor.findRangeHighlightBackground#02b4a250
editor.foreground#ffffffdd
editor.inactiveSelectionBackground#3dffea0f
editor.lineHighlightBackground#191f2366
editor.lineHighlightBorder#00000000
editor.selectionBackground#3dffea22
editor.selectionHighlightBackground#a311b1aa
editor.selectionHighlightBorder#a311b1dd
editor.wordHighlightBackground#275049
editor.wordHighlightBorder#00968844
editor.wordHighlightStrongBackground#275049
editor.wordHighlightStrongBorder#009688
editorBracketHighlight.foreground1#00ffffaa
editorBracketHighlight.foreground2#00ffffaa
editorBracketHighlight.foreground3#00ffffaa
editorBracketHighlight.foreground4#00ffffaa
editorBracketHighlight.foreground5#00ffffaa
editorBracketHighlight.foreground6#00ffffaa
editorBracketMatch.background#ec2cfd28
editorBracketMatch.border#e61cf891
editorError.foreground#CD3131
editorGroup.border#212B30
editorGroup.dropBackground#212B3080
editorGroupHeader.tabsBackground#222D32
editorGutter.background#191f2366
editorHoverWidget.background#313f46
editorHoverWidget.border#3dffec55
editorHoverWidget.foreground#84a5b8
editorHoverWidget.highlightForeground#3dffecdd
editorLineNumber.foreground#546E7A
editorLink.activeForeground#6cffdb
editorSuggestWidget.background#232d32
editorSuggestWidget.border#3dffec55
editorSuggestWidget.focusHighlightForeground#f697ffd2
editorSuggestWidget.foreground#84a5b8
editorSuggestWidget.highlightForeground#f697ffd2
editorSuggestWidget.selectedBackground#21846E33
editorSuggestWidget.selectedForeground#f697ffd2
editorSuggestWidget.selectedIconForeground#f697ffd2
editorWarning.foreground#ff0000
editorWidget.background#2b373d
editorWidget.border#ff0000
editorWidget.foreground#3dffecdd
editorWidget.resizeBorder#3dffecaa
focusBorder#1A2226
gitDecoration.conflictingResourceForeground#ff001e80
gitDecoration.deletedResourceForeground#FFA3A3
gitDecoration.ignoredResourceForeground#72acc7
gitDecoration.modifiedResourceForeground#8BB8CC
gitDecoration.untrackedResourceForeground#009688
input.background#232d32
input.foreground#C3CBCD
input.placeholderForeground#72acc7
inputOption.activeBorder#008D80
inputValidation.errorBackground#680000
inputValidation.errorBorder#CD3131
inputValidation.infoBackground#006259
inputValidation.infoBorder#008D80
inputValidation.warningBackground#7c6300
inputValidation.warningBorder#FFCC00
list.activeSelectionBackground#1c6d5b8c
list.activeSelectionForeground#34d0ad
list.dropBackground#1B2326
list.errorForeground#CD3131
list.focusBackground#3A464C
list.focusForeground#FFFFFF
list.highlightForeground#f8f8f2
list.hoverBackground#223d41
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#1c6d5b8c
list.inactiveSelectionForeground#34d0ad
list.warningForeground#43fda2
listFilterWidget.background#222D32
listFilterWidget.noMatchesOutline#ff0000
listFilterWidget.outline#3dffec
panel.background#232d32
panel.border#212B30
panel.dropBorder#3dffec
panelTitle.activeBorder#6cffdb
panelTitle.activeForeground#6cffdb
panelTitle.inactiveForeground#ffffff88
peekView.border#4ccebc66
peekViewEditor.background#1f29289f
peekViewEditor.matchHighlightBackground#b464ff6e
peekViewEditorGutter.background#1f29289f
peekViewResult.background#1f29289f
peekViewResult.lineForeground#ffffffcc
peekViewResult.matchHighlightBackground#b464ff6e
peekViewTitle.background#1f29289f
pickerGroup.foreground#009688
progressBar.background#00BCD4
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#4ccebcaa
scrollbarSlider.background#4ccebc33
scrollbarSlider.hoverBackground#4ccebc66
selection.background#456572
sideBar.background#232d32
sideBar.border#313f46
sideBar.foreground#ffffffcc
sideBarSectionHeader.background#232d32
sideBarSectionHeader.foreground#8BB8CC
sideBarTitle.foreground#bbbbbb
statusBar.background#232d32
statusBar.debuggingBackground#212B30
statusBar.foreground#8BB8CC
statusBar.noFolderBackground#212B30
tab.activeBackground#265049
tab.activeBorder#222D32
tab.activeForeground#6cffdb
tab.border#263238
tab.inactiveBackground#222D32
tab.inactiveForeground#435763
tab.unfocusedInactiveForeground#51B878
terminal.border#32cfac88
titleBar.activeBackground#232d32
widget.shadow#000000
window.activeBorder#273237
window.inactiveBorder#273237

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#546E7A	italic
string.quoted.docstring.multi.python, punctuation.definition.string.end.python, punctuation.definition.string.begin.python	#51b97d	italic
variable, string constant.other.placeholder	#ffffffdd	—
constant.other.color	#ffffffdd	—
invalid, invalid.illegal	#ff0000	—
keyword, storage.type, storage.modifier	#00ffffaa	—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#00fefebb	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#43fda2aa	—
variable.function, support.function, keyword.other.special-method	#00fefebb	—
entity.name.function	#ffffffdd	—
variable.parameter.function.language.special.self.python	#ff8af3	—
meta.function-call	#ffffffdd	—
meta.block variable.other	#f07171	—
support.other.variable, string.other.link	#e571f0aa	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#ffffffdd	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly	#43ffa4aa	—
entity.name, support.type, support.class, meta.use.php, markup.changed.git_gutter, support.type.sys-types	#ff8af3	—
support.type	#B2CCD6	—
variable.language	#ff8af3	italic
entity.other.attribute-name	#C792EA	—
markup.inserted	#C3E88D	—
markup.deleted	#ff00e5	—
markup.changed	#C792EA	—
string.regexp	#89DDFF	—
constant.character.escape	#89DDFF	—
url, link, uri	—	underline
support.type.python, entity.name.function.decorator.python, punctuation.definition.decorator.python	#f78cf4da	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#ffffffff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffffffbb	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffffff88	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffffff66	—

Shiki preview

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

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}