From ad28a3fdbfb0cd3590e4cc727501a16f9e5a28b9 Mon Sep 17 00:00:00 2001 From: Luke Schneider Date: Wed, 27 Sep 2023 21:54:34 -0500 Subject: [PATCH] Better light theme (Style) support, and a Default light theme (as a secondary option) 1) Added ForegroundViewport as a new color. It is used in the main game viewport (ViewportWidgetButton), and the viewport for rendering of particles and materials. It is needed because the default foreground in a Light theme is black, but black does not work well in a viewport. A new color seemed appropriate. 2) Fixed the profiler window to use the Foreground color in multiple text elements, instead of Color.White (or no default TitleColor). This includes the Row class, Asset class, SingleChart class, Timeline Class, and more. 3) Added a second theme/Style (DefaultLight) to include with the engine. It uses RGB float values because those were easier to transfer from the saved values that I had created (and they're easier for me to edit if necessary). I tried to emulate how the Default theme is created/loaded/etc as closely as possible. --- Source/Editor/GUI/Row.cs | 2 +- Source/Editor/Options/OptionsModule.cs | 66 ++++++++++++++++++- Source/Editor/Options/ThemeOptions.cs | 5 +- .../Viewport/Widgets/ViewportWidgetButton.cs | 4 +- Source/Editor/Windows/Profiler/Assets.cs | 5 ++ Source/Editor/Windows/Profiler/CPU.cs | 7 ++ Source/Editor/Windows/Profiler/GPU.cs | 7 ++ Source/Editor/Windows/Profiler/MemoryGPU.cs | 4 ++ Source/Editor/Windows/Profiler/Network.cs | 6 ++ Source/Editor/Windows/Profiler/SingleChart.cs | 6 +- Source/Editor/Windows/Profiler/Timeline.cs | 4 +- Source/Engine/Scripting/Scripting.cs | 1 + Source/Engine/UI/GUI/Style.cs | 6 ++ 13 files changed, 111 insertions(+), 12 deletions(-) diff --git a/Source/Editor/GUI/Row.cs b/Source/Editor/GUI/Row.cs index 8dad8b20d..4526e60ac 100644 --- a/Source/Editor/GUI/Row.cs +++ b/Source/Editor/GUI/Row.cs @@ -95,7 +95,7 @@ namespace FlaxEditor.GUI rect.Width -= leftDepthMargin; Render2D.PushClip(rect); - Render2D.DrawText(style.FontMedium, text, rect, Color.White, column.CellAlignment, TextAlignment.Center); + Render2D.DrawText(style.FontMedium, text, rect, Style.Current.Foreground, column.CellAlignment, TextAlignment.Center); Render2D.PopClip(); x += width; diff --git a/Source/Editor/Options/OptionsModule.cs b/Source/Editor/Options/OptionsModule.cs index 68aa11626..da293ec47 100644 --- a/Source/Editor/Options/OptionsModule.cs +++ b/Source/Editor/Options/OptionsModule.cs @@ -208,13 +208,20 @@ namespace FlaxEditor.Options // If a non-default style was chosen, switch to that style string styleName = themeOptions.SelectedStyle; - if (styleName != "Default" && themeOptions.Styles.TryGetValue(styleName, out var style) && style != null) + if (styleName != "Default" && styleName != "LightDefault" && themeOptions.Styles.TryGetValue(styleName, out var style) && style != null) { Style.Current = style; } else { - Style.Current = CreateDefaultStyle(); + if (styleName == "LightDefault") + { + Style.Current = CreateLightStyle(); + } + else + { + Style.Current = CreateDefaultStyle(); + } } } @@ -233,6 +240,7 @@ namespace FlaxEditor.Options Foreground = Color.FromBgra(0xFFFFFFFF), ForegroundGrey = Color.FromBgra(0xFFA9A9B3), ForegroundDisabled = Color.FromBgra(0xFF787883), + ForegroundViewport = Color.FromBgra(0xFFFFFFFF), BackgroundHighlighted = Color.FromBgra(0xFF54545C), BorderHighlighted = Color.FromBgra(0xFF6A6A75), BackgroundSelected = Color.FromBgra(0xFF007ACC), @@ -271,6 +279,60 @@ namespace FlaxEditor.Options return style; } + /// + /// Creates the light style (2nd default). + /// + /// The style object. + public Style CreateLightStyle() + { + // Metro Style colors + var options = Options; + var style = new Style + { + Background = new Color(0.92f, 0.92f, 0.92f, 1f), + LightBackground = new Color(0.84f, 0.84f, 0.88f, 1f), + DragWindow = new Color(0.0f, 0.26f, 0.43f, 0.70f), + Foreground = new Color(0.0f, 0.0f, 0.0f, 1f), + ForegroundGrey = new Color(0.30f, 0.30f, 0.31f, 1f), + ForegroundDisabled = new Color(0.45f, 0.45f, 0.49f, 1f), + ForegroundViewport = new Color(1.0f, 1.0f, 1.0f, 1f), + BackgroundHighlighted = new Color(0.59f, 0.59f, 0.64f, 1f), + BorderHighlighted = new Color(0.50f, 0.50f, 0.55f, 1f), + BackgroundSelected = new Color(0.00f, 0.46f, 0.78f, 0.78f), + BorderSelected = new Color(0.11f, 0.57f, 0.88f, 0.65f), + BackgroundNormal = new Color(0.67f, 0.67f, 0.75f, 1f), + BorderNormal = new Color(0.59f, 0.59f, 0.64f, 1f), + TextBoxBackground = new Color(0.75f, 0.75f, 0.81f, 1f), + TextBoxBackgroundSelected = new Color(0.73f, 0.73f, 0.80f, 1f), + CollectionBackgroundColor = new Color(0.25f, 0.25f, 0.25f, 1f), + ProgressNormal = new Color(0.03f, 0.65f, 0.12f, 1f), + + // Fonts + FontTitle = options.Interface.TitleFont.GetFont(), + FontLarge = options.Interface.LargeFont.GetFont(), + FontMedium = options.Interface.MediumFont.GetFont(), + FontSmall = options.Interface.SmallFont.GetFont(), + + // Icons + ArrowDown = Editor.Icons.ArrowDown12, + ArrowRight = Editor.Icons.ArrowRight12, + Search = Editor.Icons.Search12, + Settings = Editor.Icons.Settings12, + Cross = Editor.Icons.Cross12, + CheckBoxIntermediate = Editor.Icons.CheckBoxIntermediate12, + CheckBoxTick = Editor.Icons.CheckBoxTick12, + StatusBarSizeGrip = Editor.Icons.WindowDrag12, + Translate = Editor.Icons.Translate32, + Rotate = Editor.Icons.Rotate32, + Scale = Editor.Icons.Scale32, + Scalar = Editor.Icons.Scalar32, + + SharedTooltip = new Tooltip() + }; + + return style; + } + /// public override void OnInit() { diff --git a/Source/Editor/Options/ThemeOptions.cs b/Source/Editor/Options/ThemeOptions.cs index 243918939..a033b34da 100644 --- a/Source/Editor/Options/ThemeOptions.cs +++ b/Source/Editor/Options/ThemeOptions.cs @@ -63,13 +63,14 @@ namespace FlaxEditor.Options private void ReloadOptions(ComboBox obj) { var themeOptions = (ThemeOptions)ParentEditor.Values[0]; - var options = new string[themeOptions.Styles.Count + 1]; + var options = new string[themeOptions.Styles.Count + 2]; options[0] = "Default"; + options[1] = "LightDefault"; int i = 0; foreach (var styleName in themeOptions.Styles.Keys) { - options[i + 1] = styleName; + options[i + 2] = styleName; i++; } _combobox.ComboBox.SetItems(options); diff --git a/Source/Editor/Viewport/Widgets/ViewportWidgetButton.cs b/Source/Editor/Viewport/Widgets/ViewportWidgetButton.cs index 481bc3f1b..544489208 100644 --- a/Source/Editor/Viewport/Widgets/ViewportWidgetButton.cs +++ b/Source/Editor/Viewport/Widgets/ViewportWidgetButton.cs @@ -112,7 +112,7 @@ namespace FlaxEditor.Viewport.Widgets if (Icon.IsValid) { // Draw icon - Render2D.DrawSprite(Icon, iconRect, style.Foreground); + Render2D.DrawSprite(Icon, iconRect, style.ForegroundViewport); // Update text rectangle textRect.Location.X += iconSize; @@ -120,7 +120,7 @@ namespace FlaxEditor.Viewport.Widgets } // Draw text - Render2D.DrawText(style.FontMedium, _text, textRect, style.Foreground * (IsMouseOver ? 1.0f : 0.9f), TextAlignment.Center, TextAlignment.Center); + Render2D.DrawText(style.FontMedium, _text, textRect, style.ForegroundViewport * (IsMouseOver ? 1.0f : 0.9f), TextAlignment.Center, TextAlignment.Center); } /// diff --git a/Source/Editor/Windows/Profiler/Assets.cs b/Source/Editor/Windows/Profiler/Assets.cs index e2a65d496..39c5644c8 100644 --- a/Source/Editor/Windows/Profiler/Assets.cs +++ b/Source/Editor/Windows/Profiler/Assets.cs @@ -63,6 +63,7 @@ namespace FlaxEditor.Windows.Profiler // Table var headerColor = Style.Current.LightBackground; + var textColor = Style.Current.Foreground; _table = new Table { Columns = new[] @@ -73,22 +74,26 @@ namespace FlaxEditor.Windows.Profiler CellAlignment = TextAlignment.Near, Title = "Resource", TitleBackgroundColor = headerColor, + TitleColor = textColor, }, new ColumnDefinition { Title = "Type", CellAlignment = TextAlignment.Center, TitleBackgroundColor = headerColor, + TitleColor = textColor, }, new ColumnDefinition { Title = "References", TitleBackgroundColor = headerColor, + TitleColor = textColor, }, new ColumnDefinition { Title = "Memory Usage", TitleBackgroundColor = headerColor, + TitleColor = textColor, FormatValue = v => Utilities.Utils.FormatBytesCount((ulong)v), }, }, diff --git a/Source/Editor/Windows/Profiler/CPU.cs b/Source/Editor/Windows/Profiler/CPU.cs index fd4061276..df4d5b59b 100644 --- a/Source/Editor/Windows/Profiler/CPU.cs +++ b/Source/Editor/Windows/Profiler/CPU.cs @@ -93,6 +93,7 @@ namespace FlaxEditor.Windows.Profiler // Table var headerColor = Style.Current.LightBackground; + var textColor = Style.Current.Foreground; _table = new Table { Columns = new[] @@ -103,36 +104,42 @@ namespace FlaxEditor.Windows.Profiler CellAlignment = TextAlignment.Near, Title = "Event", TitleBackgroundColor = headerColor, + TitleColor = textColor, }, new ColumnDefinition { Title = "Total", TitleBackgroundColor = headerColor, FormatValue = FormatCellPercentage, + TitleColor = textColor, }, new ColumnDefinition { Title = "Self", TitleBackgroundColor = headerColor, FormatValue = FormatCellPercentage, + TitleColor = textColor, }, new ColumnDefinition { Title = "Time ms", TitleBackgroundColor = headerColor, FormatValue = FormatCellMs, + TitleColor = textColor, }, new ColumnDefinition { Title = "Self ms", TitleBackgroundColor = headerColor, FormatValue = FormatCellMs, + TitleColor = textColor, }, new ColumnDefinition { Title = "Memory", TitleBackgroundColor = headerColor, FormatValue = FormatCellBytes, + TitleColor = textColor, }, }, Parent = layout, diff --git a/Source/Editor/Windows/Profiler/GPU.cs b/Source/Editor/Windows/Profiler/GPU.cs index 4ed18691a..e6a93df72 100644 --- a/Source/Editor/Windows/Profiler/GPU.cs +++ b/Source/Editor/Windows/Profiler/GPU.cs @@ -64,6 +64,7 @@ namespace FlaxEditor.Windows.Profiler // Table var headerColor = Style.Current.LightBackground; + var textColor = Style.Current.Foreground; _table = new Table { Columns = new[] @@ -74,35 +75,41 @@ namespace FlaxEditor.Windows.Profiler CellAlignment = TextAlignment.Near, Title = "Event", TitleBackgroundColor = headerColor, + TitleColor = textColor, }, new ColumnDefinition { Title = "Total", TitleBackgroundColor = headerColor, + TitleColor = textColor, FormatValue = (x) => ((float)x).ToString("0.0") + '%', }, new ColumnDefinition { Title = "GPU ms", TitleBackgroundColor = headerColor, + TitleColor = textColor, FormatValue = (x) => ((float)x).ToString("0.000"), }, new ColumnDefinition { Title = "Draw Calls", TitleBackgroundColor = headerColor, + TitleColor = textColor, FormatValue = FormatCountLong, }, new ColumnDefinition { Title = "Triangles", TitleBackgroundColor = headerColor, + TitleColor = textColor, FormatValue = FormatCountLong, }, new ColumnDefinition { Title = "Vertices", TitleBackgroundColor = headerColor, + TitleColor = textColor, FormatValue = FormatCountLong, }, }, diff --git a/Source/Editor/Windows/Profiler/MemoryGPU.cs b/Source/Editor/Windows/Profiler/MemoryGPU.cs index 20a7898e0..e894ef0e2 100644 --- a/Source/Editor/Windows/Profiler/MemoryGPU.cs +++ b/Source/Editor/Windows/Profiler/MemoryGPU.cs @@ -64,6 +64,7 @@ namespace FlaxEditor.Windows.Profiler // Table var headerColor = Style.Current.LightBackground; + var textColor = Style.Current.Foreground; _table = new Table { Columns = new[] @@ -74,18 +75,21 @@ namespace FlaxEditor.Windows.Profiler CellAlignment = TextAlignment.Near, Title = "Resource", TitleBackgroundColor = headerColor, + TitleColor = textColor, }, new ColumnDefinition { Title = "Type", CellAlignment = TextAlignment.Center, TitleBackgroundColor = headerColor, + TitleColor = textColor, }, new ColumnDefinition { Title = "Memory Usage", TitleBackgroundColor = headerColor, FormatValue = v => Utilities.Utils.FormatBytesCount((ulong)v), + TitleColor = textColor, }, }, Parent = layout, diff --git a/Source/Editor/Windows/Profiler/Network.cs b/Source/Editor/Windows/Profiler/Network.cs index dbee0e8e7..b29173e76 100644 --- a/Source/Editor/Windows/Profiler/Network.cs +++ b/Source/Editor/Windows/Profiler/Network.cs @@ -205,6 +205,7 @@ namespace FlaxEditor.Windows.Profiler private static Table InitTable(ContainerControl parent, string name) { var headerColor = Style.Current.LightBackground; + var textColor = Style.Current.Foreground; var table = new Table { Columns = new[] @@ -215,28 +216,33 @@ namespace FlaxEditor.Windows.Profiler CellAlignment = TextAlignment.Near, Title = name, TitleBackgroundColor = headerColor, + TitleColor = textColor, }, new ColumnDefinition { Title = "Count", TitleBackgroundColor = headerColor, + TitleColor = textColor, }, new ColumnDefinition { Title = "Data Size", TitleBackgroundColor = headerColor, + TitleColor = textColor, FormatValue = FormatCellBytes, }, new ColumnDefinition { Title = "Message Size", TitleBackgroundColor = headerColor, + TitleColor = textColor, FormatValue = FormatCellBytes, }, new ColumnDefinition { Title = "Receivers", TitleBackgroundColor = headerColor, + TitleColor = textColor, }, }, Splits = new[] diff --git a/Source/Editor/Windows/Profiler/SingleChart.cs b/Source/Editor/Windows/Profiler/SingleChart.cs index e14480bee..29780150a 100644 --- a/Source/Editor/Windows/Profiler/SingleChart.cs +++ b/Source/Editor/Windows/Profiler/SingleChart.cs @@ -105,7 +105,7 @@ namespace FlaxEditor.Windows.Profiler if (_selectedSampleIndex != -1) { float selectedX = Width - (_samples.Count - _selectedSampleIndex - 1) * PointsOffset; - Render2D.DrawLine(new Float2(selectedX, 0), new Float2(selectedX, chartHeight), Color.White, 1.5f); + Render2D.DrawLine(new Float2(selectedX, 0), new Float2(selectedX, chartHeight), Style.Current.Foreground, 1.5f); } int samplesInViewCount = Math.Min((int)(Width / PointsOffset), _samples.Count) - 1; @@ -138,8 +138,8 @@ namespace FlaxEditor.Windows.Profiler var headerRect = new Rectangle(0, chartHeight, Width, TitleHeight); var headerTextRect = new Rectangle(2, chartHeight, Width - 4, TitleHeight); Render2D.FillRectangle(headerRect, style.BackgroundNormal); - Render2D.DrawText(style.FontMedium, Title, headerTextRect, Color.White * 0.8f, TextAlignment.Near, TextAlignment.Center); - Render2D.DrawText(style.FontMedium, _sample, headerTextRect, Color.White, TextAlignment.Far, TextAlignment.Center); + Render2D.DrawText(style.FontMedium, Title, headerTextRect, Style.Current.ForegroundGrey, TextAlignment.Near, TextAlignment.Center); + Render2D.DrawText(style.FontMedium, _sample, headerTextRect, Style.Current.Foreground, TextAlignment.Far, TextAlignment.Center); } private void OnClick(ref Float2 location) diff --git a/Source/Editor/Windows/Profiler/Timeline.cs b/Source/Editor/Windows/Profiler/Timeline.cs index a61ca1d05..59a7a0e26 100644 --- a/Source/Editor/Windows/Profiler/Timeline.cs +++ b/Source/Editor/Windows/Profiler/Timeline.cs @@ -90,7 +90,7 @@ namespace FlaxEditor.Windows.Profiler if (_nameLength < bounds.Width + 4) { Render2D.PushClip(bounds); - Render2D.DrawText(style.FontMedium, _name, bounds, Color.White, TextAlignment.Center, TextAlignment.Center); + Render2D.DrawText(style.FontMedium, _name, bounds, Style.Current.Foreground, TextAlignment.Center, TextAlignment.Center); Render2D.PopClip(); } } @@ -115,7 +115,7 @@ namespace FlaxEditor.Windows.Profiler var style = Style.Current; var rect = new Rectangle(Float2.Zero, Size); Render2D.PushClip(rect); - Render2D.DrawText(style.FontMedium, Name, rect, Color.White, TextAlignment.Center, TextAlignment.Center, TextWrapping.WrapChars); + Render2D.DrawText(style.FontMedium, Name, rect, Style.Current.Foreground, TextAlignment.Center, TextAlignment.Center, TextWrapping.WrapChars); Render2D.PopClip(); } } diff --git a/Source/Engine/Scripting/Scripting.cs b/Source/Engine/Scripting/Scripting.cs index 68da64bf7..e2e6b514a 100644 --- a/Source/Engine/Scripting/Scripting.cs +++ b/Source/Engine/Scripting/Scripting.cs @@ -266,6 +266,7 @@ namespace FlaxEngine Foreground = Color.FromBgra(0xFFFFFFFF), ForegroundGrey = Color.FromBgra(0xFFA9A9B3), ForegroundDisabled = Color.FromBgra(0xFF787883), + ForegroundViewport = Color.FromBgra(0xFFFFFFFF), BackgroundHighlighted = Color.FromBgra(0xFF54545C), BorderHighlighted = Color.FromBgra(0xFF6A6A75), BackgroundSelected = Color.FromBgra(0xFF007ACC), diff --git a/Source/Engine/UI/GUI/Style.cs b/Source/Engine/UI/GUI/Style.cs index fac65e22f..5e8b1c57f 100644 --- a/Source/Engine/UI/GUI/Style.cs +++ b/Source/Engine/UI/GUI/Style.cs @@ -104,6 +104,12 @@ namespace FlaxEngine.GUI [EditorOrder(110)] public Color ForegroundDisabled; + /// + /// The foreground color in viewports (usually have a dark background) + /// + [EditorOrder(115)] + public Color ForegroundViewport; + /// /// The background highlighted color. ///