Chronicom Theme
Publisher: Anggara SuwartanaThemes in package: 2
A cozy dark-blue/light-blue development-friendly 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#BAD5F5
- activityBar.foreground#1E599B
- activityBarBadge.background#C38400
- activityBarBadge.foreground#E4F0FF
- badge.background#c59418
- badge.foreground#E4F0FF
- banner.background#021f3f
- breadcrumb.background#d7e6fa
- button.background#E19F20
- button.border#C28500
- commandCenter.activeForeground#1E599B
- commandCenter.border#a5c2e6
- commandCenter.foreground#406fac
- debugToolBar.background#e19d20
- debugToolBar.border#C28500
- disabledForeground#99b3d9
- dropdown.background#f4f7fd
- dropdown.border#c6dcf7
- editor.background#e7f0fd
- editor.lineHighlightBackground#dfebfc
- editor.lineHighlightBorder#d7e6fa
- editorGroupHeader.tabsBackground#BAD5F5
- editorGutter.background#d7e6fa
- editorHoverWidget.background#cee1f9
- editorHoverWidget.border#a5c2e6
- editorRuler.foreground#ffbfbf
- editorStickyScroll.background#d7e6fa7c
- editorStickyScrollHover.background#b5cfef
- editorUnnecessaryCode.opacity#000000b4
- editorWidget.background#cee1f9
- focusBorder#a5c2e6
- foreground#1E599B
- icon.foreground#1E599B
- input.background#f4f7fd
- input.border#c6dcf7
- list.activeSelectionBackground#c6dcf7
- list.activeSelectionForeground#B98900
- list.hoverBackground#b5cfef
- list.hoverForeground#406fac
- list.inactiveFocusOutline#1E599B
- list.inactiveSelectionBackground#c6dcf7
- list.inactiveSelectionForeground#B98900
- menu.background#cee1f9
- menu.border#a5c2e6
- menu.foreground#1E599B
- menu.separatorBackground#a5c2e6
- panel.background#dfebfc
- panelTitle.activeForeground#1E599B
- quickInput.background#dfebfc
- scrollbar.shadow#1e589b2a
- settings.focusedRowBackground#d7e6fa
- settings.headerForeground#1E599B
- settings.numberInputBackground#f4f7fd
- settings.rowHoverBackground#dfebfc
- settings.textInputBackground#f4f7fd
- sideBar.background#d5e6fc
- sideBar.border#c6dcf7
- sideBarSectionHeader.background#b5cfef
- statusBar.background#5B6C93
- statusBar.debuggingBackground#B98900
- statusBar.noFolderBackground#5B6C93
- statusBarItem.remoteBackground#CE6B82
- tab.activeBackground#d7e6fa
- tab.activeBorderTop#A46C00
- tab.border#a5c2e6
- tab.hoverBackground#dfebfc
- tab.inactiveBackground#c6dcf7
- tab.unfocusedHoverBorder#e0ceb5
- tab.unfocusedInactiveForeground#00000070
- titleBar.activeBackground#BAD5F5
- titleBar.activeForeground#1E599B
- widget.border#d7e6fa
- widget.shadow#94b5de
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| meta.import string.quoted | #99793a | bold |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, storage.modifier | #7A63B3 | bold |
| storage.modifier | — | italic bold |
| keyword, storage.type, keyword.operator.new, keyword.operator.expression.instanceof, keyword.operator.expression.typeof | #b16fce | bold |
| keyword.operator, punctuation.terminator, punctuation.separator.comma, punctuation.accessor, constant.language.import-export-all, punctuation.decorator, punctuation.separator.key-value | #717788 | bold |
| keyword.control.trycatch, keyword.control.flow, storage.modifier.async | #CE6B82 | — |
| keyword.control.conditional | #C586C0 | bold |
| variable.other, variable.other.object, source entity.name.type, source meta.class entity.other.inherited-class, source meta.type.parameters entity.name.type, source meta.parameters meta.type.annotation, source meta.class meta.method.declaration meta.return.type entity.name.type, source meta.parameters meta.type.annotation entity.name.type, source meta.field.declaration meta.type.annotation entity.name.type, support.type | #4d99f0 | bold |
| variable.language | #A067B8 | bold |
| source meta.decorator meta.function-call entity.name.function, punctuation.decorator | — | bold underline |
| variable.object.property, variable.other.property, variable.other.constant.property, support.type.property-name | #e6a119 | bold |
| variable.object.property | #795101 | bold |
| entity.name.function | #c59418 | bold |
| string.quoted, meta.template.expression | #959aaa | bold |
| string.template | #a7878c | bold |
| punctuation.definition.string | #959aaa | bold |
| support.constant, constant.language, constant.numeric, constant.other, meta.property-value | #9e9e3b | bold |
| support.type.property-name.json, punctuation.separator.dictionary.key-value.json | #4d99f0 | bold |
| comment | #a3a317 | italic bold |
| source.sql, source.sql constant.other.database-name | #5079b5 | — |
| source.sql constant.other.table-name | #6f96cd | — |
| source.sql keyword | #3463a2 | — |
| source.sql support.function, source.sql storage.type | #7A63B3 | — |
| text.html.php punctuation.section.embedded | #A88540 | bold |
| source.php storage.type | #7A63B3 | — |
| source.php keyword.control | #CE6B82 | — |
| source.php meta.class.body variable.other | #4D99F0 | — |
| source.php support.function.constructor | #A3A317 | bold |
| source.php support.function | #aa8bcf | bold |
| source.php support.class, source.php variable.other.global | #ACD3FF | — |
| source.php source.sql support.function, source.php source.sql storage.type | #7A63B3 | — |
| text.html.markdown | #4d99f0 | bold |
| text.html.markdown markup.italic | #5F8AD2 | italic bold |
| text.html.markdown markup.bold | #5F8AD2 | bold |
| text.html.markdown markup.list markup.bold | #5F8AD2 | italic bold |
| text.html.markdown markup.heading | #99793a | bold |
| text.html.markdown string.other.link | #e6a119 | bold |
| text.html.markdown markup.underline.link | #5F8AD2 | italic bold |
| text.html.markdown markup.list string.other.link | #e6a119 | italic bold |
| text.html.markdown markup.list | — | italic bold |
| text.html.markdown markup.fenced_code.block | #BEA5A9 | bold |
| source.yaml | #5F8AD2 | bold |
| source.yaml entity.name.tag | #1E599B | bold |
| text.html entity.name.tag, text.html punctuation.definition.tag, source.js meta.tag, source.tsx meta.tag | #4977BD | bold |
| text.html.derivative, source.js meta.tag meta.jsx.children, source.tsx meta.tag meta.jsx.children | #a7878c | bold |
| text.html entity.other.attribute-name, source.js meta.tag entity.other.attribute-name, source.tsx meta.tag entity.other.attribute-name | #1E599B | bold |
| text.html meta.attribute.class string.quoted.double | #6D98E0 | bold |
| text.html meta.attribute.id string.quoted.double | #E56DB4 | bold |
| source.css, source.css entity.other.attribute-name.class, source.sass, source.sass entity.other.attribute-name.class | #7A63B3 | bold |
| source.css variable, source.sass variable, source.css entity.other.attribute-name.placeholder, source.sass entity.other.attribute-name.placeholder | #5F8AD2 | bold |
| source.css entity.other.attribute-name.placeholder, source.sass entity.other.attribute-name.placeholder | #579dcc | bold |
| source.css entity.name.tag, source.sass entity.name.tag | #E56DB4 | — |
| source.css support.function, source.sass support.function | #D8A31A | — |
| source.css entity.other.attribute-name.id, source.sass entity.other.attribute-name.id | #C586C0 | — |
| source.css entity.other.attribute-name.pseudo-element, source.css meta.attribute-selector entity.other.attribute-name, source.css support.type.vendored.property-name, source.sass entity.other.attribute-name.pseudo-element, source.sass meta.attribute-selector entity.other.attribute-name, source.sass support.type.vendored.property-name | #A067B8 | bold |
| source.css support.type.property-name, source.sass support.type.property-name | #515FA9 | bold |
| source.vue text.html, source.vue entity.name.tag, source.vue punctuation.definition.tag | #02af8f | bold |
| source.vue entity.other.attribute-name | #008A61 | bold |
| source.vue meta.attribute.directive entity.other.attribute-name | #008A61 | italic bold |
| source.vue meta.attribute.directive punctuation.attribute-shorthand.event, source.vue meta.attribute.directive punctuation.attribute-shorthand.bind | #D8A31A | italic bold |
| source.vue support.constant, source.vue constant.language, source.vue constant.numeric, source.vue constant.other | #9e9e3b | bold |