Need help with dark theme

[LucasStf]

Expected Behavior

1 : Change the color of the Text tabpage to White.
2 : Change the color of items in the MenuBar to White.
3 : Change the background color of the TreeGridView

Actual Behavior

GTK :

WPF :

Code that Demonstrates the Problem

The code of the TreeGridView

 var treeGridView = new TreeGridView()
            {
                ID = "treeGridView",
            };

            treeGridView.Columns.Add(new GridColumn
            {
                HeaderText = "File",
                DataCell = new TextBoxCell(0),
                MinWidth = 100,
            });

            treeGridView.Columns.Add(new GridColumn
            {
                HeaderText = "Extension",
                DataCell = new TextBoxCell(1),
                MinWidth = 100
            });

            //create an event when the user click an item in the treegridview
            treeGridView.MouseUp += (sender, e) =>
            {
                var item = treeGridView.SelectedItem;
                if (item != null)
                {
                    //show a menu to let the user choose what to do with the file
                    var menu = new ContextMenu();
                    menu.Items.Add(new ButtonMenuItem
                    {
                        Text = "New File",
                        Command = new Command((sender2, e2) =>
                        {
                            var createFile = new Create_File(form);
                            createFile.Show();
                        })
                    });

                    menu.Items.Add(new ButtonMenuItem
                    {
                        Text = "Save File",
                        Command = new Command((sender2, e2) =>
                        {
                            Backend.File_Save.SaveFile(form, controllerProject.get_path(), Backend.utils.GetSelectedItemTreeGridView(form));
                        })
                    });

                    menu.Items.Add(new ButtonMenuItem
                    {
                        Text = "Rename File",
                        Command = new Command((sender2, e2) =>
                        {
                            var renameFile = new Rename_file(form);
                            renameFile.Show();
                        })
                    });

                    menu.Items.Add(new ButtonMenuItem
                    {
                        Text = "Delete File",
                        Command = new Command((sender2, e2) =>
                        {
                            var deleteFile = new Delete_file(form);
                            deleteFile.Show();
                        })
                    });

                    menu.Show(treeGridView, treeGridView.PointFromScreen(Mouse.Position));
                }
            };


            var panel = new Panel
            {
                ID = "panel_left",
                Content = treeGridView,
            };

The code of the MenuBar :

#region Project
            // create a few commands that can be used for the menu
            var open_project = new Command { MenuText = "Open" };
            
            open_project.Executed += async (sender, e) =>
            {
                await Backend.Project.project.OpenProject(form);
            };

            var create_project = new Command { MenuText = "Create" };
            create_project.Executed += (sender, e) =>
            {
                var CreateProject = new Create_project();
                CreateProject.Show();
            };

            var save_project = new Command { MenuText = "Save" };
            #endregion

            #region File
            var save_file = new Command { MenuText = "Save" };
            var rename_file = new Command { MenuText = "Rename" };
            var create_file = new Command { MenuText = "Create" };
            var remove_file = new Command { MenuText = "Remove" };

            #endregion

            var whiteTheme = new Command { MenuText = "White Theme" };
            whiteTheme.Executed += (sender, e) => theme.SetWhiteTheme();

            var draculaTheme = new Command { MenuText = "Dracula Theme" };
            draculaTheme.Executed += (sender, e) => theme.SetDraculaTheme();

            var quitCommand = new Command { MenuText = "Quit", Shortcut = Application.Instance.CommonModifier | Keys.Q };
            quitCommand.Executed += (sender, e) => Application.Instance.Quit();

            var aboutCommand = new Command { MenuText = "About..." };
            aboutCommand.Executed += (sender, e) => new AboutDialog().ShowDialog(form);

            #region MenuBar
            // create menu
            var menu = new MenuBar
            {
                Items =
                {
					// File submenu
					new SubMenuItem { Text = "&Project", Items = { open_project, create_project, save_project } },
                    new SubMenuItem { Text = "&File", Items = { save_file, rename_file, create_file, remove_file } },
                    new SubMenuItem { Text = "&Settings", Items = { whiteTheme, draculaTheme } },
                    new SubMenuItem { Text = "&About", Items = { aboutCommand } }
                },
            };
            
            #endregion

The code of the creation of a new tabpage :

var rightPanel = MainForm.rightPanel;

            // Create a new TabPage with the TableLayout as content
            var tabPage = new TabPage()
            {
                Content = CreateEditor.Create(fileContent),
                Text = file_name,
                //Padding = new Padding(10),
                //BackgroundColor = project_infos.main_color,
            };

            ((TabControl)rightPanel.Content).Pages.Add(tabPage);

Specifications

• Version: 2.7.5
• Platform(s): WPF and GTK
• Operating System(s): Arch linux with Gnome and Windows 10

[cwensley]

Hey @LucasStf, I'm not sure how I can help with the code you provided. What does theme.SetWhiteTheme(); and theme.SetDraculaTheme(); do? You need to use WPF styles to get a dark theme on Windows, not sure about GTK.

[LucasStf]

@cwensley This two functions are just updating the background color of the main form, the rich text area etc.. I've created them to just easily switch between theme's.

So this is why I'm blocked, when I set a dark theme, the MenuBar items are in black, so black labels on a black background is not something amazing.

Same with the name of tabpages, theirs are in black too by default.

So I'm trying to figure out how to change the text color of the tabpage Text, and the MenuBar items.

[harry-cpp]

You should not be manually setting colors from code on the Gtk backend unless you really need to, instead if you want to customise your app you are supposed to provide a Gtk theme which is a bit longer topic to explain.

Now if you just want to enable the dark mode for the Gtk backend, you can do it simply by specifying Gtk.Settings.Default.ApplicationPreferDarkTheme to true / false.

[Serg-Norseman]

Yes. But at the same time, if the application can have customizable user themes in spite of the system light or dark themes, this is impossible to implement.

[harry-cpp]

@Serg-Norseman I don't understand what you are talking about, can you rephrase it?

[Serg-Norseman]

Sorry for interfering with this topic.
I only regretted that we do not have access to customize those elements that are written in first message. I also need the functions to customize the text color of the tabs, the text and background of menus and toolbars, grids.

[LucasStf]

@harry-cpp I already tried to apply a custom GTK theme (Dracula theme and Nordic) to my application using cssProvider but it doesn't work my app was still in full white.
My code was

using Eto.Forms;
using System;

var cssProvider = new Gtk.CssProvider();
cssProvider.LoadFromPath("gtk.css");
Gtk.StyleContext.AddProviderForScreen(Gdk.Screen.Default, cssProvider, Gtk.StyleProviderPriority.User);

namespace GSCoder.Gtk
{
    internal class Program
    {
        [STAThread]
        public static void Main(string[] args)
        {
            new Application(Eto.Platforms.Gtk).Run(new MainForm());
        }
    }
}

And with : Gtk.Settings.Default.ApplicationPreferDarkTheme = true i have this error :

[harry-cpp]

You need to init gtk / eto.forms first:

using Eto.Forms;
using System;

// You need to not use .Gtk for the namespace name
// otherwise C# will complain about accessing Gtk namespace.
//
// Alternatibly you can change the Gtk namespace itself by doing
// using GtkN = Gtk; and then use GtkN.Settings
namespace GSCoder.GtkApp 
{
    internal class Program
    {
        [STAThread]
        public static void Main(string[] args)
        {
            var app = new Application(Eto.Platforms.Gtk);
            Gtk.Settings.Default.ApplicationPreferDarkTheme = true;
            app.Run(new MainForm());
        }
    }
}

[LucasStf]

@harry-cpp Thank you i have now a dark theme on windows with GTK 👍