Sea Cliff Theme

Name: Sea Cliff Theme
Author: danarnold

Publisher: danarnoldThemes in package: 3

A VS Code theme with a blue tinted dark base, high-contrast pastel syntax, and 3 darkness variants.

Open in VS Code GitHub

Color themes

VS Code preview

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

Sea Cliff Theme — Sea Cliff Night

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project

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#0a0c0f
activityBar.border#171b20
activityBar.foreground#d9e1ea
activityBar.inactiveForeground#7f8b99
badge.background#d7b4ff
badge.foreground#0d1116
breadcrumb.activeSelectionForeground#ffcf99
breadcrumb.background#0d1013
breadcrumb.foreground#b6c2cf
commandCenter.background#0c0f12
commandCenter.foreground#d9e1ea
dropdown.background#0c0f12
dropdown.border#171b20
dropdown.foreground#d9e1ea
editor.background#0c0e11
editor.foreground#d9e1ea
editor.lineHighlightBackground#12161a
editor.selectionBackground#2e394680
editor.selectionHighlightBackground#20283080
editorCursor.background#0c0e11
editorCursor.foreground#ffcf99
editorGroup.border#171b20
editorGroupHeader.tabsBackground#0a0c0f
editorIndentGuide.activeBackground1#505c6d
editorIndentGuide.background1#191d22
editorLineNumber.activeForeground#ffcf99
editorLineNumber.foreground#596576
editorPane.background#0c0e11
editorWhitespace.foreground#1f242a
editorWidget.background#0d1013
editorWidget.border#171b20
input.background#0d1013
input.border#171b20
input.foreground#d9e1ea
input.placeholderForeground#8b98a8
list.activeSelectionBackground#171b20
list.activeSelectionForeground#e6edf3
list.hoverBackground#12161a
list.inactiveSelectionBackground#13171b
menu.background#0d1013
menu.border#171b20
menu.foreground#d9e1ea
menu.selectionBackground#171b20
menu.selectionForeground#e6edf3
notificationCenterHeader.background#0d1013
notifications.background#0d1013
notifications.border#171b20
notificationToast.border#171b20
panel.background#0c0f12
panel.border#171b20
panelTitle.activeBorder#d7b4ff
panelTitle.activeForeground#e6edf3
peekView.border#171b20
peekViewEditor.background#0d1013
peekViewResult.background#0c0f12
quickInput.background#0d1013
quickInput.foreground#d9e1ea
quickInputList.focusBackground#171b20
quickInputList.focusForeground#e6edf3
sideBar.background#0c0f12
sideBar.border#171b20
sideBar.foreground#c3ccd7
sideBarSectionHeader.background#0c0f12
sideBarSectionHeader.border#171b20
sideBarTitle.foreground#d9e1ea
statusBar.background#0c0f12
statusBar.border#171b20
statusBar.foreground#d9e1ea
statusBar.noFolderBackground#0c0f12
tab.activeBackground#0c0e11
tab.activeBorder#d7b4ff
tab.activeForeground#e6edf3
tab.border#171b20
tab.inactiveBackground#0a0c0f
tab.inactiveForeground#9ba8b5
tab.unfocusedActiveBackground#0c0e11
tab.unfocusedInactiveBackground#0a0c0f
terminal.background#0c0f12
terminal.border#171b20
terminal.foreground#d9e1ea
titleBar.activeBackground#0a0c0f
titleBar.activeForeground#d9e1ea
titleBar.border#171b20
titleBar.inactiveBackground#090b0d
titleBar.inactiveForeground#98a5b3
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation, punctuation.section.embedded, meta.function-call, punctuation.definition.constant.hashkey, keyword.operator.assignment.ruby, entity.name.function.call.cpp, entity.name.function.member.cpp, variable.other.object.property, variable.other.property, meta.brace.round.ts, meta.brace.square.ts, keyword.operator.type.ts, keyword.operator.type.annotation.ts, meta.function-call.ts, keyword.operator.assignment.ts, keyword.operator.relational.ts, keyword.operator.increment.ts, keyword.operator.bitwise.shift.ts, keyword.operator.bitwise.ts, punctuation.separator.key-value.ts, keyword.operator.assignment.js, keyword.operator.relational.js, keyword.operator.increment.js, keyword.operator.bitwise.shift.js, keyword.operator.bitwise.js, variable.other.object.property.js, support.variable.property.js, meta.brace.round.js, meta.brace.square.js, keyword.generator.asterisk.js, keyword.operator.combinator.css, meta.property-name.css, punctuation.definition.constant.css, punctuation.separator.key-value.mapping.yaml, string.unquoted.plain.out.yaml, source.sql, constant.other.table-name.sql, meta.function.call.rust, keyword.operator.key-value.rust, keyword.operator.assignment.c, keyword.operator.comparison.c, keyword.operator.increment.c, meta.embedded.expression, punctuation.definition.tag, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.quasi.element.begin, punctuation.quasi.element.end, punctuation.terminator.dart, punctuation.dot.dart	#d9e1ea	—
punctuation.definition.comment, comment, comment.line.double-slash, comment.block.documentation, string.quoted.docstring.multi.python	#a6b3c2	—
comment.line.keyword.yard, comment.line.keyword.punctuation.yard, comment.line.punctuation.yard	#ffd7a8	—
support.function.kernel.ruby, keyword, keyword.other, keyword.operator, keyword.control, keyword.control.flow, keyword.other.special-method, storage, storage.type, punctuation.separator.key-value, variable.language, variable.other.env, storage.type.variable, storage.modifier, storage.type.built-in.primitive.c, storage.type.built-in.primitive.cpp, storage.type.primitive.cpp, punctuation.separator.pointer-access.cpp, punctuation.definition.heading.markdown, punctuation.definition.constant.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.raw.markdown, storage.type.function.arrow.ts, storage.type.function.ts, storage.type.interface.ts, storage.type.enum.ts, entity.other.keyframe-offset, support.constant.media.css, support.constant.font-name, support.constant.property-value.css, support.constant.vendored.property-value, support.constant.font-name.css, entity.name.type.primitive.rust, entity.name.type.numeric.rust	#ffb3c1	—
variable.parameter, constant.other.symbol.hashkey.parameter.function, variable.other, comment.line.parameter.yard, markup.inline.raw.string.markdown, markup.fenced_code.block.markdown, markup.raw, entity.other.attribute-name.html, constant.other.color.rgb-value.hex.css, support.constant.color.w3c-standard-color-name.css, constant.other.database-name.sql, variable.parameter.keyframe-list.css, parameter.variable.function.elixir	#ffcf99	—
punctuation.definition.string.begin, punctuation.definition.string.end, string, variable.other.quoted.double, meta.jsx.children, JSXNested	#a8e6cf	—
meta.embedded.line	—
string.regexp, punctuation.section.regexp	#c6e59d
constant.numeric, constant.length.units.css, constant.percentage.units.css, keyword.other.unit.em.css, keyword.other.unit.percentage.css, keyword.other.unit.rem.css, keyword.other.unit.px.css	#f3e1a6	—
support.class, meta.class, entity.name.namespace, entity.name.type, entity.name.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.class.ruby, entity.other.inherited-class.ruby, entity.other.inherited-class, entity.name.type.module, meta.module.ruby, variable.other.constant, comment.line.type.yard, entity.name.scope-resolution.cpp, entity.name.scope-resolution.template.call.cpp, entity.name.scope-resolution.parameter.cpp, entity.name.scope-resolution.function.call.cpp, markup.heading, constant.other.reference.link.markdown, string.other.link.title.markdown, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector.css, entity.name.namespace.rust, entity.name.type.enum.ts, variable.other.readwrite.alias.ts, support.class.dart	#b8c0ff
constant.other.symbol.ruby, constant, constant.language.symbol, constant.other.symbol.hashkey.ruby, markup.underline.link.markdown, markup.underline.link, support, support.constant, support.variable, meta.property-name, meta.link.inline.markdown, support.type.property-name.json, meta.object-literal.key.ts, meta.object-literal.key.js, entity.name.tag, entity.name.tag.html, punctuation.separator.key-value.css, punctuation.terminator.rule.css, entity.name.tag.yaml, constant.other.symbol.hashkey.parameter.function.rbs	#9edfd6
variable.other.readwrite.class, variable.other.readwrite.instance, punctuation.definition.variable, variable.other.readwrite.global, variable.other.property	#f2b6a0
constant.language, variable.language.this	#f2a7c6	—
variable, markup.list, variable.object.property.ts, variable.other.constant.object.ts, variable.other.constant.js, variable.other.constant.object.js	#8fd3ff
markup.italic, markup.italic.markdown, punctuation.definition.italic.markdown	—	italic
markup.bold, markup.bold.markdown, punctuation.definition.bold.markdown	—	bold
support.type, storage.type.struct, storage.type.ts, support.type.primitive.ts, storage.type.class.ts, storage.type.class.js, storage.type.function.js, storage.type.js, storage.type.function.arrow.js, constant.language.null.js, support.type.builtin.rbs	#ffc4a6	—
meta.definition.method, meta.method.declaration, meta.function.method.with-arguments.ruby, meta.function.method.without-arguments.ruby, entity.name.function, entity.name.function.member, entity.name.function.preprocessor, support.function	#d7b4ff	—
meta.function-call	#d9e1ea	—
meta.attribute.rust	#e3b8ff	—
invalid, invalid.broken, invalid.deprecated, invalid.illegal, invalid.unimplemented	#ff9f9f
meta.diff, meta.diff.header, punctuation.definition.to-file.diff, punctuation.definition.from-file.diff, punctuation.definition.range.diff	#8fd3ff	—
markup.deleted, punctuation.definition.deleted.diff	#ff9f9f
markup.changed	#ffcf99
markup.inserted, punctuation.definition.inserted.diff	#a8e6cf	—