Added Settings -> Window -> UI Theme -> Syntax Color Scheme to use the editor color scheme globally for the UI Theme colors, having a single color palette for the whole UI and making much easier to style the UI, this solves SpartanJ/ecode#661, since now we support one UI theme for each existing syntax color scheme. Still a WIP, I'll continue improving it during the development of 0.7.5, but it's ready to use.

This commit is contained in:
Martín Lucas Golini
2026-01-18 01:38:27 -03:00
parent ddb412f42d
commit f180e58e56
22 changed files with 434 additions and 127 deletions
+25
View File
@@ -1,5 +1,6 @@
[eepp]
background = #282a36
widget_background = #1e202c
text = #e1e1e6
caret = #93DDFA
selection = #394484
@@ -42,6 +43,7 @@ link_hover = transparent,shadow,underline
[spartan]
background = #201f1f
widget_background = #252524
text = #cfcfcf
caret = #93DDFA
selection = #4e4e8f
@@ -84,6 +86,7 @@ link_hover = transparent,shadow,underline
[onedark]
background = #282c34
widget_background = #1e222a
text = #e1e1e6
caret = #93DDFA
selection = #394484
@@ -126,6 +129,7 @@ link_hover = transparent,shadow,underline
[lite]
background = #2e2e32
widget_background = #252529
text = #e1e1e6
caret = #93DDFA
selection = #48484f
@@ -157,6 +161,7 @@ link_hover = transparent,underline
[fall]
background = #343233
widget_background = #2a2829
text = #c4b398
caret = #61efce
accent = #ffd152
@@ -179,6 +184,7 @@ function = #61efce
[summer]
background = #fbfbfb
widget_background = #f6f6f5
text = #404040
caret = #fc1785
accent = #fc1785
@@ -210,6 +216,7 @@ notice = #8abdff
[dracula]
background = #282a36
widget_background = #1e202c
text = #7b81a6
caret = #f8f8f0
accent = #8be9fd
@@ -232,6 +239,7 @@ function = #50fa7b
[gruvbox dark]
background = #282828
widget_background = #1e1e1e
text = #928374
caret = #fbf1c7
accent = #ebdbb2
@@ -254,6 +262,7 @@ function = #8ec07c
[gruvbox material dark]
background = #1d2021
widget_background = #181b1c
text = #d4be98
caret = #fbf1c7
accent = #ebdbb2
@@ -277,6 +286,7 @@ minimap_background = #1d2021AA
[liqube]
background = #13171e
widget_background = #181c23
text = #abb2bf
caret = #abb2bf
accent = #ffffff
@@ -301,6 +311,7 @@ preprocessor = #98c875
[monodark]
background = #080808
widget_background = #0d0d0d
text = #707070
caret = #ffffff
accent = #d0d0d0
@@ -323,6 +334,7 @@ function = #a0a0a0
[monokai]
background = #272822
widget_background = #22231d
text = #9ea191
caret = #F8F8F0
accent = #F8F8F2
@@ -345,6 +357,7 @@ function = #A6E22E
[winter]
background = #282a36
widget_background = #1e202c
text = #aab3e6
caret = #f5faff
accent = #ffb86c
@@ -367,6 +380,7 @@ function = #8be9fd
[github]
background = #fbfbfb
widget_background = #f6f6f6
text = #404040
caret = #181818
accent = #0366d6
@@ -399,6 +413,7 @@ suggestion_scrollbar = #3daee9
[solarized light]
background = #fdf6e3
widget_background = #f3ecd9
text = #657b83
caret = #657b83
accent = #002b36
@@ -431,6 +446,7 @@ notice = #8abdff
[cold lime]
background = #073642
widget_background = #11404c
text = #00d1d1
caret = #f053f3
accent = #f053f3
@@ -475,6 +491,7 @@ function = #01A870
[vscode dark]
background = #1F1F1F
widget_background = #2f343e
text = #cccccc
caret = #FFFFFF
accent = #76BCFF
@@ -497,6 +514,7 @@ function = #D1D1A2
[zenburn]
background = #404040
widget_background = #363636
text = #dcdccc
caret = #f8f8f0
accent = #dcdccc
@@ -519,6 +537,7 @@ function = #efef8f
[nord]
background = #2E3440
widget_background = #242a36
text = #D8DEE9
caret = #D8DEE9
accent = #88C0D0
@@ -541,6 +560,7 @@ function = #88C0D0
[only dark]
background = #242424
widget_background = #292929
text = #fffff0
caret = #69FF94
accent = #ff0fff
@@ -565,6 +585,7 @@ function = #bf9eee
[moe]
background = #f7f9f9
widget_background = #f2f4f4
text = #404040
caret = #ff5971
accent = #ff5971
@@ -597,6 +618,7 @@ suggestion_scrollbar = #ff5971
[solarobj]
background = #fdf6e3
widget_background = #f8f1de
text = #b2ada1
caret = #b2ada1
accent = #6c71c4
@@ -630,6 +652,7 @@ suggestion_scrollbar = #6c71c4
[catppuccin macchiato]
background = #24273a
widget_background = #292d40
text = #cad3f5
caret = #f4dbd6
selection = #394484
@@ -672,6 +695,7 @@ link_hover = #91d7e3,transparent,shadow,underline
[geany]
background = #ffffff
widget_background = #fafafa
text = #000000
caret = #000000
selection = #c0c0c0
@@ -714,6 +738,7 @@ link_hover = #007f00,transparent,underline
[jEdit]
background = #ffffff
widget_background = #fafafa
text = #000000
caret = #000000
selection = #ccccff
+50 -98
View File
@@ -12,8 +12,9 @@
--base-vertical-padding: 5dp;
--border-width: 1dp;
--list-back: #232629;
--separator: #383a3d;
--separator: #31363b;
--item-hover: #284150;
--list-row-active: #eff0f1;
--slider-back: #676a6e;
--slider-button: #31363b;
--slider-border: #787b80;
@@ -26,6 +27,7 @@
--tab-hover: #334e5e;
--tab-close: #909396;
--tab-close-hover: #863d47;
--tab-font-active: white;
--tab-font-inactive: #c0c5cc;
--icon: #b6bbc2;
--icon-active: white;
@@ -56,21 +58,13 @@ tableview::cell::icon,
treeview::cell::icon,
treeview::cell::expander,
listview::cell::icon,
Menu::Item:selected,
Menu::CheckBox:selected,
Menu::SubMenu:selected,
Menu::RadioButton:selected,
Menu::Item:hover > Menu::Item::text,
Menu::Item:hover > Menu::Item::shortcut,
Menu::CheckBox:hover > Menu::CheckBox::text,
Menu::CheckBox:hover > Menu::CheckBox::shortcut,
Menu::RadioButton:hover > Menu::RadioButton::text,
Menu::RadioButton:hover > Menu::RadioButton::shortcut,
Menu::SubMenu:hover > Menu::SubMenu::text,
Menu::item:hover > Menu::Item::icon,
Menu::SubMenu:hover > Menu::SubMenu::icon,
Menu::item:hover > Menu::CheckBox::icon,
Menu::item:hover > Menu::RadioButton::icon,
tableview::header::column:hover,
treeview::header::column:hover,
listview::header::column:hover {
color: var(--font);
tint: var(--font);
}
PushButton:pressed > PushButton::icon,
SelectButton:pressed > SelectButton::icon,
SelectButton:selected > SelectButton::icon,
@@ -83,21 +77,9 @@ treeview::row:selected treeview::cell::icon,
listview::row:selected listview::cell::icon,
tableview::row:selected tableview::cell::expander,
treeview::row:selected treeview::cell::expander,
listview::row:selected listview::cell::expander,
tableview::row:hover tableview::cell::text,
treeview::row:hover treeview::cell::text,
listview::row:hover listview::cell::text,
tableview::row:hover tableview::cell::icon,
treeview::row:hover treeview::cell::icon,
listview::row:hover listview::cell::icon,
tableview::row:hover tableview::cell::expander,
treeview::row:hover treeview::cell::expander,
listview::row:hover listview::cell::expander,
tableview::header::column:hover,
treeview::header::column:hover,
listview::header::column:hover {
color: var(--font);
tint: var(--font);
listview::row:selected listview::cell::expander {
color: var(--list-row-active);
tint: var(--list-row-active);
}
CheckBox,
@@ -136,6 +118,7 @@ TextInput,
TextInputPassword,
ComboBox::DropDownList,
SpinBox::input, {
selection-color: var(--list-row-active);
selection-back-color: var(--primary);
}
@@ -684,16 +667,16 @@ Window {
}
Window::decoration {
background-color: var(--back);
background-color: var(--separator);
}
Window::border::left,
Window::border::right {
background-color: var(--back);
background-color: var(--separator);
}
Window::border::bottom {
background-color: var(--back);
background-color: var(--separator);
}
DropDownList,
@@ -758,6 +741,7 @@ PopUpMenu {
}
MenuBar::Button {
background-color: transparent;
padding-left: 6dp;
padding-right: 6dp;
min-height: 18dp;
@@ -766,6 +750,8 @@ MenuBar::Button {
MenuBar::Button:selected,
MenuBar::Button:hover {
background-color: var(--primary);
color: var(--menu-font-active);
tint: var(--menu-font-active);
}
Menu::Item,
@@ -818,12 +804,21 @@ Menu::SubMenu:disabled > Menu::SubMenu::icon {
tint: var(--menu-font-disabled);
}
Menu::Item:hover > Menu::Item::text,
Menu::CheckBox:hover > Menu::Item::text,
Menu::RadioButton:hover > Menu::Item::text,
Menu::SubMenu:hover > Menu::Item::text,
Menu::Item:selected > Menu::Item::text,
Menu::CheckBox:selected > Menu::CheckBox::text,
Menu::RadioButton:selected > Menu::RadioButton::text,
Menu::SubMenu:selected > Menu::SubMenu::text,
Menu::Item:selected > Menu::Item::icon,
Menu::CheckBox:selected > Menu::CheckBox::icon,
Menu::RadioButton:selected > Menu::RadioButton::icon,
Menu::SubMenu:selected > Menu::SubMenu::icon,
Menu::Item:selected > Menu::Item::shortcut,
Menu::CheckBox:selected > Menu::CheckBox::shortcut,
Menu::RadioButton:selected > Menu::RadioButton::shortcut,
Menu::SubMenu:selected > Menu::SubMenu::shortcut,
ListBox::item:hover {
color: var(--menu-font-active);
tint: var(--menu-font-active);
}
Menu::Separator {
@@ -841,6 +836,10 @@ Menu::SubMenu::Arrow {
foreground-image: poly(line, var(--icon), "5dp 3dp, 10dp 8dp", 1dp), poly(line, var(--icon), "5dp 13dp, 10dp 8dp", 1dp);
}
Menu::SubMenu:hover > Menu::SubMenu::arrow {
foreground-image: poly(line, var(--menu-font-active), "5dp 3dp, 10dp 8dp", 1dp), poly(line, var(--menu-font-active), "5dp 13dp, 10dp 8dp", 1dp);
}
Menu::Item::icon,
Menu::SubMenu::icon,
Menu::CheckBox::icon,
@@ -890,7 +889,7 @@ Table > ScrollBar {
}
Splitter::separator {
background-color: var(--back);
background-color: var(--separator);
}
Splitter::separator:selected,
@@ -938,7 +937,7 @@ listview::header::column:hover,
tableview::rowheader::row:hover,
treeview::rowheader::row:hover,
listview::rowheader::row:hover {
background-color: var(--tab-hover);
background-color: var(--item-hover);
}
tableview::row,
@@ -948,7 +947,7 @@ treeview::row {
tableview::row:hover,
treeview::row:hover {
background-color: var(--tab-hover);
background-color: var(--item-hover);
}
tableview::row:selected,
@@ -1069,7 +1068,7 @@ tab::icon {
tab:selected > tab::icon,
tab:not(:selected):hover > tab::icon {
tint: var(--menu-font-active);
tint: var(--tab-font-active);
}
console {
@@ -1081,6 +1080,11 @@ console {
border-bottom-width: var(--border-width);
}
ImageViewer > TextView {
text-stroke-width: 1dp;
text-stroke-color: var(--back);
}
/* Reserved classes used by themes */
.appbackground {
background-color: var(--back);
@@ -1091,11 +1095,6 @@ TextInput.table_cell_edit {
padding-bottom: 0!important;
}
ImageViewer > TextView {
text-stroke-width: 1dp;
text-stroke-color: var(--back);
}
@media (prefers-color-scheme: light) {
:root {
@@ -1113,6 +1112,7 @@ ImageViewer > TextView {
--list-back: #ffffff;
--separator: #cbcdcd;
--item-hover: #93cee9;
--list-row-active: #eff0f1;
--slider-back: #e9e9e9;
--slider-button: #cbcdcd;
--slider-border: #e6e6e6;
@@ -1125,6 +1125,7 @@ ImageViewer > TextView {
--tab-hover: #93cee9;
--tab-close: #e6e6e6;
--tab-close-hover: #e49aa2;
--tab-font-active: white;
--tab-font-inactive: #444;
--icon: #232627;
--icon-active: #3daee9;
@@ -1148,55 +1149,6 @@ ImageViewer > TextView {
droppable-hovering-color: #00000020;
}
Menu::Item:selected,
Menu::CheckBox:selected,
Menu::SubMenu:selected,
Menu::RadioButton:selected,
Menu::Item:hover > Menu::Item::text,
Menu::Item:hover > Menu::Item::shortcut,
Menu::CheckBox:hover > Menu::CheckBox::text,
Menu::CheckBox:hover > Menu::CheckBox::shortcut,
Menu::RadioButton:hover > Menu::RadioButton::text,
Menu::RadioButton:hover > Menu::RadioButton::shortcut,
Menu::SubMenu:hover > Menu::SubMenu::text,
Menu::item:hover > Menu::Item::icon,
Menu::SubMenu:hover > Menu::SubMenu::icon,
Menu::item:hover > Menu::CheckBox::icon,
Menu::item:hover > Menu::RadioButton::icon,
PushButton:pressed > PushButton::icon,
SelectButton:pressed > SelectButton::icon,
SelectButton:selected > SelectButton::icon,
SelectButton:selected:pressed > SelectButton::icon,
tableview::row:selected tableview::cell::text,
treeview::row:selected treeview::cell::text,
listview::row:selected listview::cell::text,
tableview::row:selected tableview::cell::icon,
treeview::row:selected treeview::cell::icon,
listview::row:selected listview::cell::icon,
tableview::row:selected tableview::cell::expander,
treeview::row:selected treeview::cell::expander,
listview::row:selected listview::cell::expander,
tableview::row:selected tableview::cell checkbox,
treeview::row:selected treeview::cell checkbox,
listview::row:selected listview::cell checkbox,
tableview::row:hover tableview::cell::text,
treeview::row:hover treeview::cell::text,
listview::row:hover listview::cell::text,
tableview::row:hover tableview::cell::icon,
treeview::row:hover treeview::cell::icon,
listview::row:hover listview::cell::icon,
tableview::row:hover tableview::cell::expander,
treeview::row:hover treeview::cell::expander,
listview::row:hover listview::cell::expander,
tableview::row:hover tableview::cell checkbox,
treeview::row:hover treeview::cell checkbox,
listview::row:hover listview::cell checkbox,
tableview::header::column:hover,
treeview::header::column:hover,
listview::header::column:hover {
tint: var(--menu-font-active);
}
Tab:selected,
Tab:hover,
Tab:pressed {
@@ -1204,7 +1156,7 @@ Tab:pressed {
}
Tab:not(:selected):hover {
color: var(--menu-font-active);
color: var(--tab-font-active);
}
tab::icon,
@@ -1213,7 +1165,7 @@ tab:selected > tab::icon, {
}
tab:not(:selected):hover > tab::icon {
tint: var(--menu-font-active);
tint: var(--tab-font-active);
}
}