ecode: Allow switching UI Color Scheme dynamically without restarting the editor. Also remember the preferred UI Color Scheme.

bin/assets/ui/breeze.css

@@ -40,49 +40,12 @@
 	--floating-icon: #eff0f188;
 }
 
-@media (prefers-color-scheme: light) {
-
-:root {
-	--primary: #3daee9;
-	--back: #eff0f1;
-	--font: #232627;
-	--font-hint: #232627;
-	--button-back: #fcfcfc;
-	--button-border: #b3b4b5;
-	--button-radius: 2dp;
-	--base-horizontal-padding: 5dp;
-	--base-vertical-padding: 5dp;
-	--border-width: 1dp;
-	--list-back: #ffffff;
-	--separator: #cbcdcd;
-	--item-hover: #93cee9;
-	--scroll-button: #cbcdcd;
-	--slider-back: #e9e9e9;
-	--slider-button: #cbcdcd;
-	--slider-border: #e6e6e6;
-	--scrollbar-border: #e6e6e6;
-	--scrollbar-button: #cbcdcd;
-	--scrollbar-hback-hover: #e9e9e9;
-	--tab-back: #eff0f1;
-	--tab-line: #e6e6e6;
-	--tab-active: #fcfcfc;
-	--tab-hover: #93cee9;
-	--tab-close: #e6e6e6;
-	--tab-close-hover: #e49aa2;
-	--icon: #232627;
-	--icon-active: #3daee9;
-	--icon-back-hover: #e6e6e6;
-	--icon-line-hover: #232627;
-	--icon-back-alert: #e49aa2;
-	--menu-back: #eff0f1;
-	--menu-font: #232627;
-	--menu-border: #b3b4b5;
-	--menu-font-active: #fcfcfc;
-	--menu-font-disabled: #a8a9aa;
-	--win-icon: #232627;
-	--floating-icon: #cbcdcd;
-}
-
+pushbutton::icon,
+selectbutton::icon,
+tableview::cell::icon,
+treeview::cell::icon,
+treeview::cell::expander,
+listview::cell::icon,
 Menu::Item:selected,
 Menu::CheckBox:selected,
 Menu::SubMenu:selected,
@@ -95,23 +58,13 @@ 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::item:hover > Menu::SubMenu::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:selectedpressed > SelectButton::icon {
-	color: var(--menu-font-active);
-	tint: var(--menu-font-active);
-}
-
-tableview::cell::text,
-treeview::cell::text,
-listview::cell::text {
-	color: var(--font);
-}
-
+SelectButton:selectedpressed > SelectButton::icon,
 tableview::row:selected tableview::cell::text,
 treeview::row:selected treeview::cell::text,
 listview::row:selected listview::cell::text,
@@ -133,41 +86,10 @@ listview::row:hover listview::cell::expander,
 tableview::header::column:hover,
 treeview::header::column:hover,
 listview::header::column:hover {
-	color: var(--menu-font-active);
-	tint: var(--menu-font-active);
-}
-
-Tab:selected,
-Tab:hover,
-Tab:pressed {
-	color: var(--font);
-}
-
-pushbutton::icon,
-selectbutton::icon,
-tableview::cell::icon,
-treeview::cell::icon,
-treeview::cell::expander,
-listview::cell::icon {
 	color: var(--font);
 	tint: var(--font);
 }
 
-Tab:not(:selected):hover {
-	color: var(--menu-font-active);
-}
-
-Tooltip {
-	background-color: var(--font)!important;
-	color: var(--back)!important;
-}
-
-Splitter::separator {
-	background-color: var(--back);
-}
-
-}
-
 CheckBox,
 ComboBox,
 ComboBox::DropDownList::ListBox::item,
@@ -189,7 +111,10 @@ TextView,
 Tooltip,
 MenuBar::button,
 Window::title,
-ListView::cell {
+ListView::cell,
+tableview::cell::text,
+treeview::cell::text,
+listview::cell::text {
 	color: var(--font);
 }
 
@@ -1017,6 +942,113 @@ ScrollBarMini::hbutton:hover {
 	background-color: var(--back);
 }
 
+@media (prefers-color-scheme: light) {
+
+:root {
+	--primary: #3daee9;
+	--back: #eff0f1;
+	--font: #232627;
+	--font-hint: #232627;
+	--button-back: #fcfcfc;
+	--button-border: #b3b4b5;
+	--button-radius: 2dp;
+	--base-horizontal-padding: 5dp;
+	--base-vertical-padding: 5dp;
+	--border-width: 1dp;
+	--list-back: #ffffff;
+	--separator: #cbcdcd;
+	--item-hover: #93cee9;
+	--scroll-button: #cbcdcd;
+	--slider-back: #e9e9e9;
+	--slider-button: #cbcdcd;
+	--slider-border: #e6e6e6;
+	--scrollbar-border: #e6e6e6;
+	--scrollbar-button: #cbcdcd;
+	--scrollbar-hback-hover: #e9e9e9;
+	--tab-back: #eff0f1;
+	--tab-line: #e6e6e6;
+	--tab-active: #fcfcfc;
+	--tab-hover: #93cee9;
+	--tab-close: #e6e6e6;
+	--tab-close-hover: #e49aa2;
+	--icon: #232627;
+	--icon-active: #3daee9;
+	--icon-back-hover: #e6e6e6;
+	--icon-line-hover: #232627;
+	--icon-back-alert: #e49aa2;
+	--menu-back: #eff0f1;
+	--menu-font: #232627;
+	--menu-border: #b3b4b5;
+	--menu-font-active: #fcfcfc;
+	--menu-font-disabled: #a8a9aa;
+	--win-icon: #232627;
+	--floating-icon: #cbcdcd;
+}
+
+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:selectedpressed > SelectButton::icon {
+	color: var(--menu-font-active);
+	tint: var(--menu-font-active);
+}
+
+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: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(--menu-font-active);
+	tint: var(--menu-font-active);
+}
+
+Tab:selected,
+Tab:hover,
+Tab:pressed {
+	color: var(--font);
+}
+
+Tab:not(:selected):hover {
+	color: var(--menu-font-active);
+}
+
+Tooltip {
+	background-color: var(--font)!important;
+	color: var(--back)!important;
+}
+
+}
 
 @media screen and (min-pixel-density: 1.1) and (max-pixel-density: 1.99) {
 

include/eepp/ui/css/stylesheet.hpp

@@ -45,6 +45,8 @@ class EE_API StyleSheet {
 
 	static size_t nodeHash( const std::string& tag, const std::string& id );
 
+	void resetCache();
+
   protected:
 	std::vector<std::shared_ptr<StyleSheetStyle>> mNodes;
 	std::unordered_map<size_t, StyleSheetStyleVector> mNodeIndex;

include/eepp/ui/uiscenenode.hpp

@@ -185,7 +185,7 @@ class EE_API UISceneNode : public SceneNode {
 
 	void reloadStyle( const bool& disableAnimations = false );
 
-	bool onMediaChanged();
+	bool onMediaChanged( bool forceReApplyStyles = false );
 
 	virtual void onChildCountChange( Node* child, const bool& removed );
 
@@ -202,6 +202,8 @@ class EE_API UISceneNode : public SceneNode {
 	void onWidgetDelete( Node* node );
 
 	void resetTooltips( Node* node );
+
+	CSS::MediaFeatures getMediaFeatures() const;
 };
 
 }} // namespace EE::UI

include/eepp/ui/uistyle.hpp

@@ -77,6 +77,8 @@ class EE_API UIStyle : public UIState {
 
 	bool hasProperty( const CSS::PropertyId& propertyId ) const;
 
+	void resetGlobalDefinition();
+
   protected:
 	UIWidget* mWidget;
 	std::shared_ptr<CSS::StyleSheetStyle> mElementStyle;

include/eepp/ui/uiwidget.hpp

@@ -164,7 +164,8 @@ class EE_API UIWidget : public UINode {
 	UIStyle* getUIStyle() const;
 
 	void reloadStyle( const bool& reloadChilds = true, const bool& disableAnimations = false,
-					  const bool& reportStateChange = true );
+					  const bool& reportStateChange = true,
+					  const bool& forceReApplyProperties = false );
 
 	void beginAttributesTransaction();
 
@@ -229,7 +230,8 @@ class EE_API UIWidget : public UINode {
 
 	void setMaxHeightEq( const std::string& maxHeightEq );
 
-	void reportStyleStateChangeRecursive( bool disableAnimations = false );
+	void reportStyleStateChangeRecursive( bool disableAnimations = false,
+										  bool forceReApplyStyles = false );
 
 	void createTooltip();
 
@@ -314,7 +316,7 @@ class EE_API UIWidget : public UINode {
 
 	void alignAgainstLayout();
 
-	void reportStyleStateChange( bool disableAnimations = false );
+	void reportStyleStateChange( bool disableAnimations = false, bool forceReApplyStyles = false );
 
 	std::string getLayoutWidthPolicyString() const;
 

src/eepp/ui/css/stylesheet.cpp

@@ -24,6 +24,10 @@ size_t StyleSheet::nodeHash( const std::string& tag, const std::string& id ) {
 	return seed;
 }
 
+void StyleSheet::resetCache() {
+	mNodeCache.clear();
+}
+
 bool StyleSheet::addStyleToNodeIndex( StyleSheetStyle* style ) {
 	const std::string& id = style->getSelector().getSelectorId();
 	const std::string& tag = style->getSelector().getSelectorTagName();
@@ -135,10 +139,8 @@ bool StyleSheet::updateMediaLists( const MediaFeatures& features ) {
 	bool updateStyles = false;
 
 	for ( auto iter = mMediaQueryList.begin(); iter != mMediaQueryList.end(); iter++ ) {
-		if ( ( *iter )->applyMediaFeatures( features ) ) {
+		if ( ( *iter )->applyMediaFeatures( features ) )
 			updateStyles = true;
-			break;
-		}
 	}
 
 	return updateStyles;

src/eepp/ui/uicodeeditor.cpp

@@ -93,7 +93,7 @@ const std::map<KeyBindings::Shortcut, std::string> UICodeEditor::getDefaultKeybi
 		{ { KEY_KP_PLUS, KEYMOD_DEFAULT_MODIFIER }, "font-size-grow" },
 		{ { KEY_MINUS, KEYMOD_DEFAULT_MODIFIER }, "font-size-shrink" },
 		{ { KEY_KP_MINUS, KEYMOD_DEFAULT_MODIFIER }, "font-size-shrink" },
-		{ { KEY_0, KEYMOD_DEFAULT_MODIFIER }, "font-size-reset" },
+		{ { KEY_0, KEYMOD_DEFAULT_MODIFIER | KEYMOD_SHIFT }, "font-size-reset" },
 		{ { KEY_KP_DIVIDE, KEYMOD_DEFAULT_MODIFIER }, "toggle-line-comments" },
 	};
 }
@@ -228,10 +228,12 @@ void UICodeEditor::draw() {
 	}
 
 	if ( mLineBreakingColumn ) {
-		Float lineBreakingOffset = start.x + getGlyphWidth() * mLineBreakingColumn;
-		primitives.setColor( Color( mLineBreakColumnColor ).blendAlpha( mAlpha ) );
-		primitives.drawLine( { { lineBreakingOffset, start.y },
-							   { lineBreakingOffset, start.y + mSize.getHeight() } } );
+		Float lineBreakingOffset = startScroll.x + getGlyphWidth() * mLineBreakingColumn;
+		if ( lineBreakingOffset >= start.x ) {
+			primitives.setColor( Color( mLineBreakColumnColor ).blendAlpha( mAlpha ) );
+			primitives.drawLine( { { lineBreakingOffset, start.y },
+								   { lineBreakingOffset, start.y + mSize.getHeight() } } );
+		}
 	}
 
 	if ( mHighlightMatchingBracket ) {

src/eepp/ui/uiscenenode.cpp

@@ -686,28 +686,30 @@ Drawable* UISceneNode::findIconDrawable( const std::string& iconName, const size
 	return nullptr;
 }
 
-bool UISceneNode::onMediaChanged() {
-	if ( !mStyleSheet.isMediaQueryListEmpty() ) {
-		MediaFeatures media;
-		media.type = media_type_screen;
-		media.width = mWindow->getWidth();
-		media.height = mWindow->getHeight();
-		media.deviceWidth = mWindow->getDesktopResolution().getWidth();
-		media.deviceHeight = mWindow->getDesktopResolution().getHeight();
-		media.color = 8;
-		media.monochrome = 0;
-		media.colorIndex = 256;
-		media.resolution = static_cast<int>( getDPI() );
-		media.pixelDensity = PixelDensity::getPixelDensity();
-		media.prefersColorScheme =
-			mColorSchemePreference == ColorSchemePreference::Dark ? "dark" : "light";
+CSS::MediaFeatures UISceneNode::getMediaFeatures() const {
+	CSS::MediaFeatures media;
+	media.type = media_type_screen;
+	media.width = mWindow->getWidth();
+	media.height = mWindow->getHeight();
+	media.deviceWidth = mWindow->getDesktopResolution().getWidth();
+	media.deviceHeight = mWindow->getDesktopResolution().getHeight();
+	media.color = 8;
+	media.monochrome = 0;
+	media.colorIndex = 256;
+	media.resolution = static_cast<int>( getDPI() );
+	media.pixelDensity = PixelDensity::getPixelDensity();
+	media.prefersColorScheme =
+		mColorSchemePreference == ColorSchemePreference::Dark ? "dark" : "light";
+	return media;
+}
 
-		if ( mStyleSheet.updateMediaLists( media ) ) {
-			mRoot->reportStyleStateChangeRecursive();
+bool UISceneNode::onMediaChanged( bool forceReApplyStyles ) {
+	if ( !mStyleSheet.isMediaQueryListEmpty() ) {
+		if ( mStyleSheet.updateMediaLists( getMediaFeatures() ) ) {
+			mRoot->reportStyleStateChangeRecursive( false, forceReApplyStyles );
 			return true;
 		}
 	}
-
 	return false;
 }
 
@@ -864,7 +866,12 @@ ColorSchemePreference UISceneNode::getColorSchemePreference() const {
 void UISceneNode::setColorSchemePreference( const ColorSchemePreference& colorSchemePreference ) {
 	if ( mColorSchemePreference != colorSchemePreference ) {
 		mColorSchemePreference = colorSchemePreference;
-		onMediaChanged();
+		if ( !mStyleSheet.isMediaQueryListEmpty() ) {
+			if ( mStyleSheet.updateMediaLists( getMediaFeatures() ) ) {
+				mStyleSheet.resetCache();
+				mRoot->reloadStyle( true, true, true, true );
+			}
+		}
 	}
 }
 

src/eepp/ui/uistyle.cpp

@@ -54,11 +54,15 @@ void UIStyle::setStyleSheetProperty( const StyleSheetProperty& property ) {
 	}
 }
 
+void UIStyle::resetGlobalDefinition() {
+	mGlobalDefinition =
+		mWidget->getUISceneNode()->getStyleSheet().getElementStyles( mWidget, false );
+}
+
 void UIStyle::load() {
 	removeStructurallyVolatileWidgetFromParent();
 
-	mGlobalDefinition =
-		mWidget->getUISceneNode()->getStyleSheet().getElementStyles( mWidget, false );
+	resetGlobalDefinition();
 
 	unsubscribeNonCacheableStyles();
 

src/eepp/ui/uiwidget.cpp

@@ -645,11 +645,13 @@ void UIWidget::alignAgainstLayout() {
 	setPosition( pos );
 }
 
-void UIWidget::reportStyleStateChange( bool disableAnimations ) {
+void UIWidget::reportStyleStateChange( bool disableAnimations, bool forceReApplyStyles ) {
 	if ( NULL != mStyle && !mStyle->isChangingState() ) {
 		bool hasAnimDisabled = mStyle->getDisableAnimations();
 		if ( disableAnimations )
 			mStyle->setDisableAnimations( disableAnimations );
+		if ( forceReApplyStyles )
+			mStyle->setForceReapplyProperties( true );
 		mStyle->onStateChange();
 		if ( disableAnimations )
 			mStyle->setDisableAnimations( hasAnimDisabled );
@@ -1007,7 +1009,7 @@ UIStyle* UIWidget::getUIStyle() const {
 }
 
 void UIWidget::reloadStyle( const bool& reloadChilds, const bool& disableAnimations,
-							const bool& reportStateChange ) {
+							const bool& reportStateChange, const bool& forceReApplyProperties ) {
 	createStyle();
 
 	if ( NULL != mStyle ) {
@@ -1019,14 +1021,15 @@ void UIWidget::reloadStyle( const bool& reloadChilds, const bool& disableAnimati
 			while ( NULL != child ) {
 				if ( child->isWidget() )
 					child->asType<UIWidget>()->reloadStyle( reloadChilds, disableAnimations,
-															reportStateChange );
+															reportStateChange,
+															forceReApplyProperties );
 
 				child = child->getNextNode();
 			}
 		}
 
 		if ( reportStateChange )
-			reportStyleStateChange( disableAnimations );
+			reportStyleStateChange( disableAnimations, forceReApplyProperties );
 	}
 }
 
@@ -1223,14 +1226,15 @@ bool UIWidget::checkPropertyDefinition( const StyleSheetProperty& property ) {
 	return true;
 }
 
-void UIWidget::reportStyleStateChangeRecursive( bool disableAnimations ) {
+void UIWidget::reportStyleStateChangeRecursive( bool disableAnimations, bool forceReApplyStyles ) {
 	Node* childLoop = getFirstChild();
 	while ( childLoop != NULL ) {
 		if ( childLoop->isWidget() )
-			childLoop->asType<UIWidget>()->reportStyleStateChangeRecursive( disableAnimations );
+			childLoop->asType<UIWidget>()->reportStyleStateChangeRecursive( disableAnimations,
+																			forceReApplyStyles );
 		childLoop = childLoop->getNextNode();
 	}
-	reportStyleStateChange( disableAnimations );
+	reportStyleStateChange( disableAnimations, forceReApplyStyles );
 }
 
 UIWidget* UIWidget::querySelector( const std::string& selector ) {

src/tools/codeeditor/appconfig.cpp

@@ -70,6 +70,9 @@ void AppConfig::load( std::string& confPath, std::string& keybindingsPath,
 	ui.panelPosition = panelPositionFromString( ini.getValue( "ui", "panel_position", "left" ) );
 	ui.serifFont = ini.getValue( "ui", "serif_font", "assets/fonts/NotoSans-Regular.ttf" );
 	ui.monospaceFont = ini.getValue( "ui", "monospace_font", "assets/fonts/DejaVuSansMono.ttf" );
+	ui.colorScheme = ini.getValue( "ui", "ui_color_scheme", "dark" ) == "light"
+						 ? ColorSchemePreference::Light
+						 : ColorSchemePreference::Dark;
 	editor.trimTrailingWhitespaces = ini.getValueB( "editor", "trim_trailing_whitespaces", false );
 	editor.forceNewLineAtEndOfFile =
 		ini.getValueB( "editor", "force_new_line_at_end_of_file", false );
@@ -135,6 +138,8 @@ void AppConfig::save( const std::vector<std::string>& recentFiles,
 	ini.setValue( "ui", "panel_position", panelPositionToString( ui.panelPosition ) );
 	ini.setValue( "ui", "serif_font", ui.serifFont );
 	ini.setValue( "ui", "monospace_font", ui.monospaceFont );
+	ini.setValue( "ui", "ui_color_scheme",
+				  ui.colorScheme == ColorSchemePreference::Light ? "light" : "dark" );
 	ini.setValueB( "editor", "trim_trailing_whitespaces", editor.trimTrailingWhitespaces );
 	ini.setValueB( "editor", "force_new_line_at_end_of_file", editor.forceNewLineAtEndOfFile );
 	ini.setValueB( "editor", "auto_detect_indent_type", editor.autoDetectIndentType );

src/tools/codeeditor/appconfig.hpp

@@ -24,6 +24,7 @@ struct UIConfig {
 	PanelPosition panelPosition{ PanelPosition::Left };
 	std::string serifFont;
 	std::string monospaceFont;
+	ColorSchemePreference colorScheme{ ColorSchemePreference::Dark };
 };
 
 struct WindowConfig {

src/tools/codeeditor/codeeditor.cpp

@@ -490,8 +490,28 @@ void App::panelPosition( const PanelPosition& panelPosition ) {
 	}
 }
 
+void App::setUIColorScheme( const ColorSchemePreference& colorScheme ) {
+	if ( colorScheme == mUIColorScheme )
+		return;
+	mUIColorScheme = mConfig.ui.colorScheme = colorScheme;
+	mUISceneNode->setColorSchemePreference( colorScheme );
+}
+
 UIMenu* App::createWindowMenu() {
 	mWindowMenu = UIPopUpMenu::New();
+	UIPopUpMenu* colorsMenu = UIPopUpMenu::New();
+	colorsMenu->addRadioButton( "Light", mUIColorScheme == ColorSchemePreference::Light )
+		->setId( "light" );
+	colorsMenu->addRadioButton( "Dark", mUIColorScheme == ColorSchemePreference::Dark )
+		->setId( "dark" );
+	colorsMenu->addEventListener( Event::OnItemClicked, [&]( const Event* event ) {
+		if ( !event->getNode()->isType( UI_TYPE_MENUITEM ) )
+			return;
+		UIMenuItem* item = event->getNode()->asType<UIMenuItem>();
+		setUIColorScheme( item->getId() == "light" ? ColorSchemePreference::Light
+												   : ColorSchemePreference::Dark );
+	} );
+	mWindowMenu->addSubMenu( "UI Prefers Color Scheme", findIcon( "color-scheme" ), colorsMenu );
 	mWindowMenu->add( "UI Scale Factor (Pixel Density)", findIcon( "pixel-density" ) );
 	mWindowMenu->add( "UI Font Size", findIcon( "font-size" ) );
 	mWindowMenu->add( "Editor Font Size", findIcon( "font-size" ) );
@@ -1620,6 +1640,7 @@ void App::toggleSettingsMenu() {
 
 void App::createSettingsMenu() {
 	mSettingsMenu = UIPopUpMenu::New();
+	mSettingsMenu->setId( "settings_menu" );
 	mSettingsMenu->add( "New", findIcon( "document-new" ), getKeybind( "create-new" ) );
 	mSettingsMenu->add( "Open File...", findIcon( "document-open" ), getKeybind( "open-file" ) );
 	mSettingsMenu->add( "Open Folder...", findIcon( "document-open" ),
@@ -2141,8 +2162,12 @@ void App::init( const std::string& file, const Float& pidelDensity,
 		PixelDensity::setPixelDensity( eemax( mWindow->getScale(), mConfig.window.pixelDensity ) );
 
 		mUISceneNode = UISceneNode::New();
-		if ( colorScheme == "light" )
-			mUISceneNode->setColorSchemePreference( ColorSchemePreference::Light );
+		mUIColorScheme = mConfig.ui.colorScheme;
+		if ( !colorScheme.empty() ) {
+			mUIColorScheme =
+				colorScheme == "light" ? ColorSchemePreference::Light : ColorSchemePreference::Dark;
+		}
+		mUISceneNode->setColorSchemePreference( mUIColorScheme );
 
 		mFont = loadFont( "sans-serif", mConfig.ui.serifFont, "assets/fonts/NotoSans-Regular.ttf" );
 		mFontMono =
@@ -2423,6 +2448,7 @@ void App::init( const std::string& file, const Float& pidelDensity,
 			{ "download-cloud", 0xec58 },
 			{ "layout-left", 0xee94 },
 			{ "layout-right", 0xee9b },
+			{ "color-scheme", 0xebd4 },
 		};
 		for ( const auto& icon : icons )
 			iconTheme->add( UIGlyphIcon::New( icon.first, iconFont, icon.second ) );
@@ -2530,7 +2556,7 @@ EE_MAIN_FUNC int main( int argc, char* argv[] ) {
 
 	appInstance = eeNew( App, () );
 	appInstance->init( file.Get(), pixelDenstiyConf ? pixelDenstiyConf.Get() : 0.f,
-					   prefersColorScheme ? prefersColorScheme.Get() : "dark" );
+					   prefersColorScheme ? prefersColorScheme.Get() : "" );
 	eeSAFE_DELETE( appInstance );
 
 	Engine::destroySingleton();

src/tools/codeeditor/codeeditor.hpp

@@ -126,6 +126,7 @@ class App : public UICodeEditorSplitter::Client {
 	std::unique_ptr<FileLocator> mFileLocator;
 	std::unique_ptr<NotificationCenter> mNotificationCenter;
 	std::string mLastFileFolder;
+	ColorSchemePreference mUIColorScheme;
 
 	void saveAllProcess();
 
@@ -247,6 +248,8 @@ class App : public UICodeEditorSplitter::Client {
 	void syncProjectTreeWithEditor( UICodeEditor* editor );
 
 	void createProjectTreeMenu( const FileInfo& file );
+
+	void setUIColorScheme( const ColorSchemePreference& colorScheme );
 };
 
 #endif // EE_TOOLS_CODEEDITOR_HPP