BoxLang Theme

Name: BoxLang Theme
Author: Ortus Solutions

Publisher: Ortus SolutionsThemes in package: 2

Modern dark and light themes for BoxLang development

GitHub

Color themes

VS Code preview

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

BoxLang Theme — BoxLang Light (Muted)

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#F0FFFE
activityBar.border#44DF88
activityBar.foreground#26BD51
activityBar.inactiveForeground#5F9EA0
activityBarBadge.background#2E8B57
activityBarBadge.foreground#FFFFFF
editor.background#FFFFFF
editor.findMatchBackground#14A2A45F
editor.findMatchHighlightBackground#00CED130
editor.foreground#2F4F4F
editor.lineHighlightBackground#F0FFFF
editor.selectionBackground#2E8B5740
editor.selectionHighlightBackground#2E8B5720
editor.wordHighlightBackground#00CED120
editor.wordHighlightStrongBackground#00CED140
editorBracketHighlight.foreground1#2E8B57
editorBracketHighlight.foreground2#7C5CFA
editorBracketHighlight.foreground3#06B6D4
editorBracketHighlight.foreground4#FF6B35
editorBracketMatch.background#2E8B5740
editorBracketMatch.border#44DF88
editorCursor.foreground#2E8B57
editorIndentGuide.activeBackground#2E8B57
editorIndentGuide.background#9DEDED
editorLineNumber.activeForeground#0A0A0A
editorLineNumber.foreground#5FA07C
editorWhitespace.foreground#B0E0E6
list.activeSelectionBackground#2E8B5740
list.activeSelectionForeground#2F4F4F
list.focusBackground#2E8B5740
list.hoverBackground#2E8B5730
list.inactiveSelectionBackground#2E8B5720
panel.background#F0FFFF
panel.border#E0FFFF
panelTitle.activeForeground#2E8B57
panelTitle.inactiveForeground#5F9EA0
sideBar.background#F1FBF7
sideBar.border#C5F9DA
sideBar.foreground#3FA6A6
sideBarSectionHeader.background#E0FFFF
sideBarSectionHeader.foreground#2F4F4F
sideBarTitle.foreground#5AA32F
statusBar.background#F0FFFE
statusBar.border#C5F9DA
statusBar.foreground#2F4F4F
statusBarItem.activeBackground#2E8B5740
statusBarItem.hoverBackground#2E8B5730
tab.activeBackground#A0FFB5
tab.activeBorder#2E8B57
tab.activeForeground#505050
tab.border#E0FFFF
tab.inactiveBackground#F0FFFF
tab.inactiveForeground#5F9EA0
terminal.background#F5FBF7
terminal.foreground#2F4F4F
terminalCursor.background#F0FFFE
terminalCursor.foreground#2E8B57
titleBar.activeBackground#F0FFFE
titleBar.activeForeground#2F4F4F
titleBar.border#C5F9DA
titleBar.inactiveBackground#F0FFFE
titleBar.inactiveForeground#5F9EA0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8B9CAD	italic
identifier, variable.other, entity.name.variable	#4EC14E	bold
variable, string constant.other.placeholder	#1EAE72	—
constant.other.color	#3A7C7C	—
invalid, invalid.illegal	#DC143C	—
keyword, storage.type, storage.modifier	#3C90C3	italic
keyword.control, constant.other.color, punctuation, meta.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	#309521	—
entity.name.tag.boxlang, entity.name.tag.bx, entity.name.tag.cfml, punctuation.definition.tag.boxlang, punctuation.definition.tag.begin.boxlang, punctuation.definition.tag.end.boxlang	#02C77F	bold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#483D8B	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#483D8B	—
meta.block variable.other	#3FACCD	—
support.other.variable, string.other.link	#2EAAD0	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#A28CD2	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#6B8E23	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#00768B	—
support.type	#A220DA	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#4682B4	—
entity.other.attribute-name	#036F71	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#26DA20	italic
string.regexp	#4682B4	—

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