Clion Dark Perfected

Name: Clion Dark Perfected
Author: ASRepairs

Publisher: ASRepairsThemes in package: 1

The most faithful Clion Theme for VSCode

Open in VS Code GitHub

VS Code preview

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

Clion Dark Perfected — Clion Theme Perfected

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.activeBackground#3574f0ff
activityBar.background#2b2d30
activityBar.border#000000
activityBar.foreground#ffffffe9
activityBar.inactiveForeground#ffffff5a
activityBarBadge.background#007acc
activityBarBadge.foreground#ffffff
badge.background#4d4d4d
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#e0e0e0
breadcrumb.background#1e1e1e
breadcrumb.focusForeground#e0e0e0
breadcrumb.foreground#cccccca5
button.background#3574f0db
button.foreground#ffffff
button.hoverBackground#3574f0
button.secondaryBackground#333538
button.secondaryForeground#ffffffa5
button.secondaryHoverBackground#3a3c41
checkbox.background#2b2d30
checkbox.border#00000000
checkbox.foreground#cccccc
debugExceptionWidget.background#333333
debugExceptionWidget.border#474747
debugToolBar.background#333333
debugToolBar.border#474747
diffEditor.border#444444
diffEditor.insertedTextBackground#9bb95533
diffEditor.removedTextBackground#ff000033
dropdown.background#2b2d30
dropdown.border#00000000
dropdown.foreground#cccccc
editor.background#1e1f22
editor.findMatchBackground#214283
editor.findMatchBorder#74879f56
editor.findMatchHighlightBackground#114957
editor.findMatchHighlightBorder#ffffff00
editor.findRangeHighlightBackground#3a3d4166
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#264f784d
editor.foreground#d4d4d4
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#3a3d41
editor.lineHighlightBackground#ffffff0A
editor.lineHighlightBorder#282828
editor.rangeHighlightBackground#ffffff0b
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#214283
editor.selectionHighlightBackground#add6ff26
editor.selectionHighlightBorder#495F77
editor.wordHighlightBackground#575757b8
editor.wordHighlightStrongBackground#004972b8
editorBracketMatch.background#0064001a
editorBracketMatch.border#888888
editorCodeLens.foreground#999999
editorCursor.background#000000
editorCursor.foreground#aeafad
editorError.background#B73A3400
editorError.border#ffffff00
editorError.foreground#d34e33
editorGroup.border#444444
editorGroup.emptyBackground#1e1f22
editorGroupHeader.border#8e8e8e1e
editorGroupHeader.tabsBackground#1e1f22
editorGroupHeader.tabsBorder#7171715e
editorGutter.addedBackground#549159
editorGutter.background#1e1e1e
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#94151b
editorGutter.foldingControlForeground#c5c5c5
editorGutter.modifiedBackground#375fad
editorHoverWidget.background#252526
editorHoverWidget.border#454545
editorHoverWidget.foreground#cccccc
editorIndentGuide.activeBackground1#707070
editorIndentGuide.background1#404040
editorInfo.background#4490BF00
editorInfo.border#4490BF00
editorInfo.foreground#75beff
editorLineNumber.activeForeground#c6c6c6f9
editorLineNumber.foreground#8585858d
editorLink.activeForeground#4e94ce
editorMarkerNavigation.background#2d2d30
editorMarkerNavigationError.background#f48771
editorMarkerNavigationInfo.background#75beff
editorMarkerNavigationWarning.background#cca700
editorOverviewRuler.background#25252500
editorOverviewRuler.border#7f7f7f4d
editorRuler.foreground#5a5a5a
editorSuggestWidget.background#252526
editorSuggestWidget.border#454545
editorSuggestWidget.foreground#d4d4d4
editorSuggestWidget.highlightForeground#5382cc
editorSuggestWidget.selectedBackground#434343af
editorWarning.background#A9904000
editorWarning.border#ffffff00
editorWarning.foreground#c0a114
editorWhitespace.foreground#e3e4e229
editorWidget.background#252526
editorWidget.foreground#cccccc
editorWidget.resizeBorder#5F5F5F
focusBorder#3574f0
foreground#cccccc
gitDecoration.addedResourceForeground#b6cd85
gitDecoration.conflictingResourceForeground#6c6cc4
gitDecoration.deletedResourceForeground#c74e39
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#3f71e2
gitDecoration.stageDeletedResourceForeground#c74e39
gitDecoration.stageModifiedResourceForeground#3a71ee
gitDecoration.submoduleResourceForeground#8db9e2
gitDecoration.untrackedResourceForeground#e78060
icon.foreground#cccccc
input.background#2b2d30
input.border#00000000
input.foreground#cccccc
input.placeholderForeground#a6a6a6
inputOption.activeBackground#35538f
inputOption.activeBorder#007accad
inputOption.activeForeground#ffffff
list.activeSelectionBackground#2e436e
list.activeSelectionForeground#ffffff
list.dropBackground#383b3d
list.focusBackground#062f4a
list.focusForeground#cccccc
list.highlightForeground#0097fb
list.hoverBackground#2a2d2e
list.hoverForeground#cccccc
list.inactiveSelectionBackground#43454aef
list.inactiveSelectionForeground#cccccc
listFilterWidget.background#653723
listFilterWidget.noMatchesOutline#be1100
listFilterWidget.outline#00000000
menu.background#2b2d30
menu.border#00000000
menu.foreground#cccccc
menu.selectionBackground#2e436e
menu.selectionBorder#00000022
menu.selectionForeground#ffffff
menu.separatorBackground#bbbbbb52
menubar.selectionBackground#414245
menubar.selectionBorder#ff000000
menubar.selectionForeground#cccccc
merge.commonContentBackground#282828
merge.commonHeaderBackground#383838
merge.currentContentBackground#27403B
merge.currentHeaderBackground#367366
merge.incomingContentBackground#28384B
merge.incomingHeaderBackground#395F8F
minimap.background#1e1f22
minimap.errorHighlight#d34e33
minimap.findMatchHighlight#214283
minimap.selectionHighlight#214283
minimap.warningHighlight#c0a114
minimapGutter.addedBackground#549159
minimapGutter.deletedBackground#94151b
minimapGutter.modifiedBackground#375fad
notificationCenter.border#474747
notificationCenterHeader.background#303031
notificationCenterHeader.foreground#cccccc
notifications.background#252526
notifications.border#303031
notifications.foreground#cccccc
notificationsErrorIcon.foreground#f48771
notificationsInfoIcon.foreground#75beff
notificationsWarningIcon.foreground#cca700
notificationToast.border#474747
panel.background#1e1f22
panel.border#8080808d
panelSection.border#80808059
panelTitle.activeBorder#e7e7e7b5
panelTitle.activeForeground#e7e7e7d5
panelTitle.inactiveForeground#e7e7e799
peekView.border#007acc
peekViewEditor.background#001f33
peekViewEditor.matchHighlightBackground#ff8f0099
peekViewEditor.matchHighlightBorder#ee931e
peekViewEditorGutter.background#001f33
peekViewResult.background#252526
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#1e1e1e
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#3f3f46
pickerGroup.foreground#3794ff
progressBar.background#3574f0
scrollbar.shadow#000000
scrollbarSlider.activeBackground#4e4e50
scrollbarSlider.background#4e4e50ad
scrollbarSlider.hoverBackground#4e4e50d5
selection.background#2e436e
settings.focusedRowBackground#ffffff07
settings.headerForeground#cccccc
sideBar.background#2b2d30
sideBar.border#ff000000
sideBar.dropBackground#383b3d
sideBar.foreground#cccccccc
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#cccccc33
sideBarSectionHeader.foreground#cccccc
sideBarTitle.foreground#eaeaea
statusBar.background#2b2d30
statusBar.border#ff000046
statusBar.debuggingBackground#cc66334e
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff87
statusBar.noFolderBackground#68217a
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#FFFFFF25
statusBarItem.hoverBackground#ffffff22
statusBarItem.remoteBackground#44749f
statusBarItem.remoteForeground#ffffff
tab.activeBackground#1e1e1e00
tab.activeBorder#8a8a8a
tab.activeBorderTop#00000000
tab.activeForeground#ffffff
tab.border#25252600
tab.hoverBorder#797979
tab.inactiveBackground#2d2d2d00
tab.inactiveForeground#ffffff80
terminal.ansiBlack#000000
terminal.ansiBlue#2472c8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#3b8eea
terminal.ansiBrightCyan#29b8db
terminal.ansiBrightGreen#23d18b
terminal.ansiBrightMagenta#d670d6
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#e5e5e5
terminal.ansiBrightYellow#f5f543
terminal.ansiCyan#11a8cd
terminal.ansiGreen#0dbc79
terminal.ansiMagenta#bc3fbc
terminal.ansiRed#cd3131
terminal.ansiWhite#e5e5e5
terminal.ansiYellow#e5e510
terminal.border#80808059
terminal.foreground#cccccc
terminal.selectionBackground#ffffff40
terminalCursor.background#0087FF
terminalCursor.foreground#ffffff
textLink.foreground#518bfd
titleBar.activeBackground#2b2d30
titleBar.activeForeground#cccccc
titleBar.border#0000003e
titleBar.inactiveBackground#3c3f41
titleBar.inactiveForeground#ccccccc5
tree.indentGuidesStroke#585858
walkThrough.embeddedEditorBackground#00000050
widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword.control.directive.include, meta.preprocessor.include, keyword.control.directive.define, keyword.control.directive.conditional, keyword.control.directive.conditional.ifdef, keyword.control.directive.conditional.if, keyword.control.directive.else, keyword.control.directive.diagnostic.error, keyword.control.directive.diagnostic.warning, keyword.control.directive.endif, keyword.control.directive.pragma, meta.preprocessor.macro, keyword.control.directive.conditional.ifndef	#b2ad55	—
entity.name.function.preprocessor, meta.preprocessor.macro	#8c8524	—
string, storage.type.string, support.constant.color.w3c-standard-color-name, support.constant.color.w3c-extended-color-name, support.constant.property-value, keyword.other.unit.px, keyword.other.unit.percent, keyword.other.unit.rem, keyword.other.unit.em, keyword.other.unit.ex, keyword.other.unit.ch, keyword.other.unit.vw, keyword.other.unit.vh, markup.inline.raw.string, markup.fenced_code.block	#6aab73	—
storage.modifier.specifier.static, storage.modifier.specifier.volatile, storage.modifier.specifier.const, storage.type.built-in.primitive, storage.type.built-in, constant.language.nullptr, constant.language.false, constant.language.true, constant.language.boolean, storage.type.js, storage.type.ts, variable.language.this.ts, variable.language.this.tsx, variable.language.this.js, keyword.control.import, keyword.control.export, keyword.control.as, keyword.control.from, storage.type.tsx, storage.type.class, support.type.primitive, storage.type.struct, constant.other.placeholder, keyword.other.typedef, keyword.other.typedef.c, storage.type.enum, entity.other.attribute-name.pragma.preprocessor, storage.type.extern, storage.modifier.specifier.functional.pre-parameters.constexpr, storage.modifier.static, storage.type.modifier.access.public, storage.type.modifier.access.public, storage.type.modifier.access.protected, storage.type.modifier.access.private, constant.character.escape, keyword.operator.cast.static_cast	#c38d6c	—
keyword, source.kconfig	#c38d6c	—
constant.numeric, keyword.other.unit.suffix.floating-point.cpp, keyword.other.unit.suffix.floating-point.c, keyword.other.unit.suffix.integer.cpp, keyword.other.unit.suffix.integer.c	#26c5d3	—
comment	#787d84	—
invalid	#F44747	—
entity.name.function.call, entity.name.function, meta.head.function.definition, meta.function.cpp, meta.function.c, entity.name.function.member.cpp, entity.name.function.member.c, entity.name.function.js, entity.name.function	#65a4df	—
support.type.built-in.posix-reserved, support.type.posix-reserved, entity.name.type.parameter, meta.tail.enum.cpp, meta.tail.enum.c, entity.name.type.class, entity.name.type, entity.name.scope-resolution, variable.other.object.access	#b5b6e3	—
keyword.control.if, keyword.control.else, keyword.control.while, keyword.control.for, keyword.control.c, keyword.control.cpp, keyword.control.switch, keyword.control.case, keyword.control.return, keyword.control.break, keyword.control.default, keyword.control.else-if, storage.modifier.c, storage.modifier.cpp, storage.modifier.kotlin, storage.type.kotlin, keyword.control.conditional, constant.language.boolean, keyword.control.flow, storage.type.function.js, storage.modifier.async.js, storage.modifier.async.ts, storage.modifier.async.tsx, keyword.control.trycatch, keyword.operator.new, keyword.control.loop, storage.type.function.ts, storage.type.function.tsx, storage.modifier.ts, storage.modifier.tsx, keyword.control.switch, keyword.control.case, keyword.control.default, keyword.control.else-if, keyword.control.else, constant.language.python, storage.type.function.python, constant.character.format.placeholder.other.python, meta.at-rule.media.header.css, punctuation.definition.heading, punctuation.definition.list.begin.markdown, punctuation.definition.bold.markdown, punctuation.definition.markdown, punctuation.separator.table.markdown, punctuation.definition.table.markdown, meta.separator.markdown	#c38d6c	—
variable.other.property.js, variable.other.constant.js, support.class.promise.js, variable.other.object.js, variable.other.readwrite.js, entity.name.section.markdown, entity.name.type.class.kotlin, meta.block.kotlin	#C77DBB	—
entity.name.tag.html, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.class.css, entity.name.tag.css, entity.other.attribute-name.id.css, entity.other.attribute-name.css, support.constant.font-name.css, support.function.misc.css, variable.argument.css	#d4b16c	—
punctuation.definition.tag, punctuation.section.property-list, punctuation.definition.link.title, punctuation.definition.metadata.markdown	#ffd602	—
support.type.exception.python, support.class.exception.python, support.function.builtin.python	#7f87c5	—
variable.parameter.function-call.python	#f34646	—
string.other.link.title.markdown, markup.underline.link.markdown	#4290de	—
punctuation.definition.dictionary	#ffd602	—
variable.other.readwrite.ts, storage.modifier.inline	#a9b7c6	—
support.type.property-name.json, fenced_code.block.language.markdown, variable.other.property.ts, variable.other.member	#C77DBB	—
entity.name.function.decorator.python, meta.declaration.annotation.kotlin	#b2ad55	—
comment.line.double-slash.documentation.c, comment.line.double-slash.documentation.cpp, comment.line.double-slash.documentation.js, comment.line.double-slash.documentation.ts, comment.line.double-slash.documentation.tsx	#5b9271	—

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}!`;
}