Color Scheme Map

[NullPlane]

May you create a Map for color schemes (UI-CSS & Syntax Highlighting),
There's a few entries I just couldn't find in the editor.

[BUG] I did notice that for some reason menu-font-active does not work if preferred color scheme is dark (once bright and dark are implemented) or only one (no prefers) is implemented and there is no differentiation between bright and dark.

If you wish I may provide my schemes someday, but I'd have to do a lot of
refactoring and I'd have to publish them here.

[SpartanJ]

May you create a Map for color schemes (UI-CSS & Syntax Highlighting),

You mean add a documentation for that? Sure.

There's a few entries I just couldn't find in the editor.

Feel free to ask.

[BUG] I did notice that for some reason menu-font-active does not work if preferred color scheme is dark (once bright and dark are implemented) or only one (no prefers) is implemented and there is no differentiation between bright and dark.

It works but it's not doing what you think. That's because the variable is only used to tint the icon colors and no the font color. But you can edit the CSS as you please though. For the light theme it was being used also to set the font color on mouse hover to a huge range of elements but I did just remove it a couple of days ago, but the selector is still valid as a general rule if you need it.

Usually base font color should be consistent over all elements.

If you wish I may provide my schemes someday, but I'd have to do a lot of refactoring and I'd have to publish them here.

That would be awesome! :)

[SpartanJ]

BTW the breeze.css is very easy to follow. If you need more information about the elements you can use the inspect tool that the editor provides: Settings -> Window -> Inspect Elements

[NullPlane]

BUCKET #661 and THIS

Mappings for CSS exist, hooray 🎉. However, nobody did that for colorschemes (highlighting) yet so, I thought, I'd make one.
This is everything as far as I've found it for the docs. I am not sure, it was quite a few things. Hope, I didn't mix things up.
Just tell if something's missing.

---

Colorschemes Map

The following keys are valid for the default set of syntax highlighting options in ecode.

key	element	translation*	fallback/default (unspec)	syntax
background	background color of editor area	--back, --tab-active, --term-back-color	❌	❌
widget_background	background for panels and widgets that may spawn inside the editor	--list-back, --list-row-active, --menu-back, --menu-font-active	gutter_background	❌
gutter_background	background for gutter area (contains line numbers)	❌	background	❌
text	text/code color for default visual text in the editor	--font, --term-font-color, --icon-line-hover, --menu-font	❌	❌
caret	caret color (blinking cursor)	❌	❌	❌
selection	background color for selected text ranges	--item-hover, --tab-hover, --icon-back-hover	❌	❌
line_highlight	background color of code line where caret is (current line) and selected lines (bg outside of selection box/text)	--button-back, --separator, --slider-button, --scrollbar-border, --tab-back	❌	❌
selection_region	highlighted regions in batch operations such as find/replace	--scrollbar-hback-hover	selection	❌
matching_bracket	background highlighting of matchable operators such as bracket pairs or quotes	❌	selection	❌
matching_selection	selecting text will highlight the same string sequence reoccurring in the document. Background color for reoc. text.	❌	selection	❌
matching_search	background color for highlighted search/find results	❌	❌	❌
line_number	color of line numbers in the gutter (inactive)	--button-border, --slider-back, --tab-line, --menu-border	❌	❌
line_number2	color of the active line number(s) (see line_highlight)	--font-hint, --slider-border, --tab-close, --tab-font-inactive, --icon-line, --menu-font-disabled, --floating-icon, --disabled-color	❌	❌
whitespace	color of visual whitespace markers (if enabled)	❌	selection	❌
line_break_column	color of the line breaking column (code length marker)	--disabled-border	selection	❌
suggestion	color control for unselected suggestion items (autocomplete/lsp popup)	❌	❌	foreground,background
suggestion_selected	color control for selected suggestion items	❌	❌	foreground,background
suggestion_scrollbar	scrollbar in suggestion box if list is large enough	--scrollbar-button	line_highlight	❌
minimap_background	background of the right code minimap area	❌	background	transparency suggested (e.g. #282828AA)
minimap_visible_area	in the code minimap, there is a rectangle marking the currently visible section. background of said rectangle.	droppable-hovering-color	❌	❌
minimap_current_line	the color of line_highlight on the minimap	❌	❌	❌
minimap_hover	the responsive color change when hovering mouse pointer over minimap_visible_area	❌	❌	❌
minimap_selection	color of selection on the minimap	--highlight-primary	❌	❌
minimap_highlight	color of search/find highlights (matching_search) on the minimap	❌	❌	❌
error	color of message and wavy underline in error feedback (lsp, lint, ...)	--tab-close-hover, --icon-back-alert, --theme-error	❌	❌
warning	color of message and wavy underline in warnings	--theme-warning	❌	❌
notice	color of message in informative notices	❌	❌	❌
normal	all canonical text/default code in code files (identifiers, variables, ...)	❌	❌	❌
symbol	operators, separators, symbols, punctuation in code	--icon	normal	❌
comment	code comments; inline & multiline	❌	❌	❌
keyword	keywords in comments (if, for, while, static, ...)	❌	❌	❌
keyword2 dep.; type	types, declarations, primitives (char, int, float, ...)	--primary, --font-highlight, --tab-font-active, --icon-active	❌	❌
keyword3 dep.; parameter	arguments/parameters in callable methods	❌	symbol	❌
number	numeric value ($1$, $3.1415$, $0\mathrm x282828\mathrm{AA}$, ...)	❌	❌	❌
literal	boolean literals and special constants resembling a valuable meaning ($\mathtt{True}$, $\mathtt{Null}$, $\mathtt{undefined}$,...)	❌	❌	❌
string	string literals ("Goodbye, World!", ...)	❌	❌	❌
operator	mathematical, logical or language-agnostic operators (+-*/=!=&&||)	❌	❌	❌
function	the name of a function (often before () parentheses)	--theme-success	❌	❌
link	color of a callable/clickable hyperlink	❌	function	❌
link_hover	colors and theming when hyperlink is hovered by mouse pointer	❌	function	list color-code $\rightarrow$ transparency $\rightarrow$ shaded $\rightarrow$ underlined (modifiers enabled with adding the respective keyword); e.g. #282828,transparent,shadow,underline
preprocessor	color of preprocessor directives (#include, {$R *.dfm}, ...)	❌	❌	❌

Plugins may use custom keys.

Operators/Valid values

Next to the colors, every highlighted object can be suited with an array of modifiers to change the appearance of the text or object. These are entered in a comma-separated list without spacing.

Available modifiers are:

• bold
• italic
• underline
  • alt. underlined
• strikethrough
• shadow (outline)
• regular (explicitly unstyled)
• outline(<color>, <thickness>)
  • e.g. outline(#cccccc, 0.7)

Tip

$\mathtt{color\_code,modifier_1,\ldots,modifier_n}$

e.g. link_hover = #4CE0BC,bold,underline,outline(#ffffff, 0.1)

Translations

See #661; a syntax colorscheme may be translated to the editor.

[SpartanJ]

BTW if you have any cool color scheme, feel free to share it, I could add it with the default themes.

[NullPlane]

Can't wait!! I am a noob if it comes to UX design and I am striving
to shore something up since a long time. I want to make Grayskale a
project though like others do such that people can port it to their fav app.
However, Idk how to do specifications, how to get contrasts just right and
find the right shades for the right place and I fixate too much being a little
too perfectionist. If u know the route, I'd really appreciate every tip.

[NullPlane]

Oh! And alternatively, there is this scheme which I have previously "edited out" and made into the table...
I don't know whether YOU prefer the table. I always like tabular data but the markdown tables are slightly
crammed bc they r bound to a fixed width/maximums in GitHub so Idk whether you want to keep the
translations in... Here is the unedited view just if you prefer it.

---

Window/UI

• type → --primary: Primary accent color used throughout the UI (buttons on hover, selected items, active elements)
• background → --back: Main background color for windows, panels, and the application
• text → --font: Main text color for all UI elements
• text → --term-font-color: Terminal text color
• type → --font-highlight: Highlighted text color
• line_number2 → --font-hint: Hint text color (placeholder text)

Buttons

• line_highlight → --button-back: Button background color
• line_number → --button-border: Button border color

Lists & spawnable panels

• widget_background → --list-back: Background for lists, dropdowns, text inputs, and panels
• widget_background → --list-row-active: Active/selected row text color
• line_highlight → --separator: Separator lines between UI elements
• selection → --item-hover: Hover state for list items and interactive elements

Sliders

• line_number → --slider-back: Slider track background
• line_highlight → --slider-button: Slider thumb/button
• line_number2 → --slider-border: Slider border

Scrollbars

• line_highlight → --scrollbar-border: Scrollbar border
• suggestion_scrollbar → --scrollbar-button: Scrollbar thumb/button
• selection_region → --scrollbar-hback-hover: Scrollbar hover background

Tabs

• line_highlight → --tab-back: Inactive tab background
• line_number → --tab-line: Tab border/separator lines
• background → --tab-active: Active tab background
• selection → --tab-hover: Tab hover background
• line_number2 → --tab-close: Tab close button color
• error → --tab-close-hover: Tab close button hover color
• type → --tab-font-active: Active tab text color
• line_number2 → --tab-font-inactive: Inactive tab text color

Icons

• symbol → --icon: Default icon color
• type → --icon-active: Active/selected icon color
• selection → --icon-back-hover: Icon background on hover
• line_number2 → --icon-line: Icon line color
• text → --icon-line-hover: Icon line color on hover
• error → --icon-back-alert: Alert icon background (e.g., window close)

Menus & dialogs

• widget_background → --menu-back: Menu/dialog background
• text → --menu-font: Menu text color
• line_number → --menu-border: Menu border color
• widget_background → --menu-font-active: Active menu item text color
• line_number2 → --menu-font-disabled: Disabled menu item text color

Term

• background → --term-back-color: Terminal background
• line_number2 → --floating-icon: Floating icon color

Status & outputs

• minimap_selection → --highlight-primary: Primary highlight color
• line_number2 → --disabled-color: Disabled element color
• line_break_column → --disabled-border: Disabled element border
• error → --theme-error: Error status color
• warning → --theme-warning: Warning status color
• function → --theme-success: Success status color
• minimap_visible_area → droppable-hovering-color: Drag & drop hover indicator

[NullPlane]

The rest is great! I'll move this table into the documentation later. Thank you very much for documenting it!

I'll re-open the discussion until it is in there. Sorry, I am a bit quick to close stuff :)

[SpartanJ]

Thanks again! I've added it to the documentation. It looks kinda weird, I'll improve it later but it's a start. Feel free to send PRs directly to improve it.