microsoft / wslg

Enabling the Windows Subsystem for Linux to include support for Wayland and X server related scenarios
MIT License
10.06k stars 302 forks source link

[Help wanted] Default window decorations color #37

Open itspers opened 3 years ago

itspers commented 3 years ago

Big chance its not WSLg issue, but maybe somebody will able to tell where to look:

Most apps respect current GTK_THEME and use window decorations from it. But some, most important JetBrains IDEs won't and for example xcalc.

What part of this magic system is responsible to choose what window decoration theme to use? Can i force it to use some dark theme by default?

win-decorations
kidcats commented 3 years ago

when I use JetBrains IDEs, I find that there is no full screen model in view tool. Can you use the full screen model?

itspers commented 3 years ago

when I use JetBrains IDEs, I find that there is no full screen model in view tool. Can you use the full screen model?

no, but it wasn't there in 'old' xserver mode as well, im not sure if its linux versions of Jetbrains apps or particular problem with WSL...

kidcats commented 3 years ago

when I use JetBrains IDEs, I find that there is no full screen model in view tool. Can you use the full screen model?

no, but it wasn't there in 'old' xserver mode as well, im not sure if its linux versions of Jetbrains apps or particular problem with WSL...

so sad .i hope jetbrains or microsoft can solve this.

spronovo commented 3 years ago

Thanks for the suggestion. Who paints the window decoration depends on the application. If the app let the window manager paint it, than it's the window manager inside of Weston that paints it (the right side window). We're currently just using the default theme, was was good enough for the preview :-)... we would like to eventually add a theme that more closely resemble Windows itself and to synchronize it with your Windows themes, but that is some ways out.

Other application can decide to paint those area themselves instead (the left case)... in that case any system level themes will have no effect and instead this is controlled entirely by the application itself (or the framework it uses).

itspers commented 3 years ago

we would like to eventually add a theme that more closely resemble Windows itself and to synchronize it with your Windows themes, but that is some ways out.

This will be also not ideal solution. Vcxsrv/x410/gWsl using Windows native decorations in such cases without CSD and it results to same white window headers if you using light windows theme.

@spronovo is it theoretically possible to ssh somehow to running distro and install-switch theme? Or it not worth trying and need only to make own build from sources?

spronovo commented 3 years ago

The system distro is mounted as read-only... so any changes you make it to are discarded when WSL is restarted. The servicing model we have for the system distro is a simple throwaway and replace with the new one... if we allowed you to persist data in it you would be loosing it on update. If you want a truly custom experience, building your own system distro is one way to go... but you'll need to keep rebuilding as we provide updates if you want to benefit from those fixes and improvement.

NyxCode commented 3 years ago

Apart from theming, which would be super nice, the window decoration does not integrate well into windows. For example, I would have expected being able to drag it to the edge of the screen to resize it or drag it when the window is maximized to exit fullscreen.

Would it be possible to render the window decoration (unless the application renders its own) in windows, maybe through the RDP client? Wouldn't we get theming & better windows integration for "free" then?

itspers commented 3 years ago

Apart from theming, which would be super nice, the window decoration does not integrate well into windows. For example, I would have expected being able to drag it to the edge of the screen to resize it or drag it when the window is maximized to exit fullscreen.

Would it be possible to render the window decoration (unless the application renders its own) in windows, maybe through the RDP client? Wouldn't we get theming & better windows integration for "free" then?

No, because https://github.com/microsoft/wslg/issues/37#issuecomment-826703442

It will be same as now on all existing xservers - or dark or light, without respect for application content at all

lirannl commented 3 years ago

How did you get your gtk apps to use a different gtk theme at all? I couldn't make a difference even though I set GTK_THEME in /etc/profile...

erickvieira commented 3 years ago

How did you get your gtk apps to use a different gtk theme at all? I couldn't make a difference even though I set GTK_THEME in /etc/profile...

Via gnome tweaks, maybe.

$ sudo apt install gnome-tweaks $ gnome-tweaks &

Then you can download a custom theme from Gnome Look and select it on tweaks window.

kidcats commented 3 years ago

How did you get your gtk apps to use a different gtk theme at all? I couldn't make a difference even though I set GTK_THEME in /etc/profile...

Via gnome tweaks, maybe.

$ sudo apt install gnome-tweaks $ gnome-tweaks &

Then you can download a custom theme from Gnome Look and select it on tweaks window.

but i can not select the theme in gnome-tweaks after installed gnome-tweaks,can you tell me how did you do that

dcharlespyle commented 3 years ago

Microsoft-Edge-Dev for Linux now is another one of the apps that no longer displays its window decorations like previous builds of the app once did. Now, Edge for Linux no longer displays its own window decorations in Wayland in WSLg since its last build.

onomatopellan commented 3 years ago

VSCode also looks great when you change the titlebar style to custom

image

alpfilho commented 2 years ago

Still looking bad in wsl kernel 5.10.60.1

image

kimmoeklund commented 2 years ago

I was wondering the same with fresh Win11 install. Thanks @spronovo explaining what the issue is and regards to the team, keep up the good work!

JetBrains users, I suggest you go and vote for this one: https://youtrack.jetbrains.com/issue/JBR-3206

darkguy2008 commented 2 years ago

@alpfilho how did you get Gitkraken to open like that and be able to move it? Mine is stuck at 0,0 without the titlebar so I'm unable to move it with AltDrag ( see https://github.com/microsoft/wslg/issues/324 ).

image

I know WSLg is using Wayland but isn't it possible to make it work such as the rendered window is the window itself without the WM (just like when you install X with no WM and then start xterm - i.e. no window borders) and then apply Windows's decorations? If WMs can do that in X I'd assume it could be possible in Wayland too, although I've never used a distro with it but I would assume it's fairly possible.

Edit: After installing xfce4-terminal and mousepad, it appeared somewhere else I could move it afterwards. Crazy. I think WSLg should also respect the display order so apps appear in the primary monitor instead.

aaharr commented 2 years ago

I'm not seeing a way to change the default Weston theme? Maintaining a custom build sounds like more work than squinting at the light theme.

User input:

If someone knows a way to do either of these in dot files, short of building things from source, please do let me know.

ariaieboy commented 2 years ago

please upvote this on youtrack https://youtrack.jetbrains.com/issue/WI-65906

delucca commented 2 years ago

Anyone was able to find a workaround this? Or at least a way to use fullscreen for those applications (Jetbrains IDEs especially)

MrStillwater commented 2 years ago

For Chrome you can set 'Preferred Ozone platform' to 'Wayland' in chrome://flags This might work for Edge as well.

dcharlespyle commented 2 years ago

For Chrome you can set 'Preferred Ozone platform' to 'Wayland' in chrome://flags This might work for Edge as well.

Edge in Linux does not appear to have the option available. But it works for Chrome.

Edited to add: The flags are not available to the user to set them in Edge-Dev in edge://flags but I can run the browser from the command line, as below, and it will work similarly.

microsoft-edge-dev -enable-features=UseOzonePlatform -ozone-platform=wayland

MrStillwater commented 2 years ago

It seems like the long-term solution is for apps/environments to support Wayland directly. Nautilus, gedit, etc. look great!

Here's the latest re: Jetbrains IDEs: https://youtrack.jetbrains.com/issue/JBR-3206

xsrvmy commented 1 year ago

FWIW, the problem is applications that don't have a CSD option rather than no wayland support. I assume VSCode wouldn't do this with CSD enabled even without ozone wayland.

sharpjs commented 1 year ago

How hard is it for WSLg to just match the (Windows) system theme? There are going to be non-CSD apps for a long, long time.

sarim commented 1 year ago

I was researching about this issue a bit and found this article: Explains the situation really well. https://news.itsfoss.com/wayland-core-protocol-issue/

Technically WSLg-weston is doing Server Side Decorations (for non-gnome applications) right? Otherwise we wouldn't have any titlebar. Where that code comes from? Because from google it seems like weston doesn't have SSD. So WSLg's weston fork adds that functionality? Guidance about which file to look at for SSD Drawing code would be very helpful :3

MamiyaOtaru commented 1 year ago

You can change this by building your own version of the WSLg System Distro. Instructions here: https://github.com/microsoft/wslg/blob/main/CONTRIBUTING.md

Once everything is downloaded, before compiling, you'll need to change a few files in wslg/vendors/weston/shared (cairo-util.c and frame.c) The patch is below (first chunk is frame color, second chunk is frame text color, third chunk is button color). Also edit the pngs for the titlebar buttons in wslg/vendors/weston/data (I just inverted them). Whole thing can be seen at https://github.com/MamiyaOtaru/weston-mirror/commit/248f0883b2298a93add9aace2036466f5b165af4

Compile your new System Distro and use it per the instructions at the first link above

wslgDarkMode I launched kwrite with XDG_SESSION_TYPE=X11 QT_QPA_PLATFORM=xcb kwrite to show the SSD since I already have Qt and GTK apps configured to use CSD. Solution in this post is for apps where that isn't possible, like xeyes :D

diff -u ./shared/cairo-util.c ./dark/cairo-util.c
--- ./shared/cairo-util.c   2023-02-17 13:08:21.716641386 -0700
+++ ./dark/cairo-util.c 2023-02-13 15:30:32.492007835 -0700
@@ -372,12 +372,12 @@

    if (flags & THEME_FRAME_ACTIVE) {
        pattern = cairo_pattern_create_linear(16, 16, 16, 112);
-       cairo_pattern_add_color_stop_rgb(pattern, 0.0, 1.0, 1.0, 1.0);
-       cairo_pattern_add_color_stop_rgb(pattern, 0.2, 0.8, 0.8, 0.8);
+       cairo_pattern_add_color_stop_rgb(pattern, 0.0, 0.08, 0.09, 0.098);
+       cairo_pattern_add_color_stop_rgb(pattern, 0.2, 0.16, 0.175, 0.191);
        cairo_set_source(cr, pattern);
        cairo_pattern_destroy(pattern);
    } else {
-       cairo_set_source_rgba(cr, 0.75, 0.75, 0.75, 1);
+       cairo_set_source_rgba(cr, 0.165, 0.18, 0.196, 1);
    }
 }

@@ -567,14 +567,14 @@

        if (flags & THEME_FRAME_ACTIVE) {
            cairo_move_to(cr, x + 1, y  + 1);
-           cairo_set_source_rgb(cr, 1, 1, 1);
+           cairo_set_source_rgb(cr, 0, 0, 0);
            SHOW_TEXT(cr);
            cairo_move_to(cr, x, y);
-           cairo_set_source_rgb(cr, 0, 0, 0);
+           cairo_set_source_rgb(cr, 1, 1, 1);
            SHOW_TEXT(cr);
        } else {
            cairo_move_to(cr, x, y);
-           cairo_set_source_rgb(cr, 0.4, 0.4, 0.4);
+           cairo_set_source_rgb(cr, 0.6, 0.6, 0.6);
            SHOW_TEXT(cr);
        }
    }
diff -u ./shared/frame.c ./dark/frame.c
--- ./shared/frame.c    2023-02-17 13:08:08.496645466 -0700
+++ ./dark/frame.c  2023-02-13 15:22:09.211776901 -0700
@@ -232,11 +232,11 @@
        cairo_stroke_preserve(cr);

        if (button->press_count) {
-           cairo_set_source_rgb(cr, 0.7, 0.7, 0.7);
+           cairo_set_source_rgb(cr, 0.08, 0.09, 0.098);
        } else if (button->hover_count) {
-           cairo_set_source_rgb(cr, 1.0, 1.0, 1.0);
+           cairo_set_source_rgb(cr, 0.21, 0.225, 0.241);
        } else {
-           cairo_set_source_rgb(cr, 0.88, 0.88, 0.88);
+           cairo_set_source_rgb(cr, 0.16, 0.175, 0.191);
        }

        cairo_fill (cr);
sharpjs commented 1 year ago

Thank you, @MamiyaOtaru! I had hoped the solution was something as simple as that. Next step is for someone [smarter than me] to make it configurable, or even automatic.

ghost commented 1 year ago

This should be a built-in. Do you accept PRs?

cazzoo commented 1 year ago

I confirm this should be configuration (or should use windows color scheme automatically to detect)

pingu6 commented 9 months ago

any update on this?

ayanamist commented 9 months ago

Any guys who keep eyes on this issue, should found the problem comes from weston which is part of wayland but not wslg itself

seagle0128 commented 9 months ago

any update, pls?

pkkid commented 6 months ago

Any guys who keep eyes on this issue, should found the problem comes from weston which is part of wayland but not wslg itself

I'm confused by this, because the windows that force white borders are X11 windows, not Wayland windows.

sarim commented 6 months ago

@pkkid technically XWayland, not the actual X11. as wslg is a wayland system. So at the end its weston that ends up drawing the window.

diskree commented 3 months ago

Isn't it possible to use a regular window frame in WSLg? I would like to see a frame with buttons like this

image

Splines commented 2 months ago

I've just recently found out about WSLg. The description in the documentation seemed very promising. And indeed, not having to install an X11 server like VcXsrv is really neat. Snapping the window to corners also works for me on Win10. Thanks for making all of this possible!

When I first heard about WSLg, I was hoping for a more integrated experience into Windows also with regards to the look and feel. My dream scenario would be that apps that don't render their own title bar get assigned the default Windows title bar, e.g. the one we have at the top of the Windows Explorer in the color that you choose in the Windows system settings. This would feel much better than the WSL title bar we get right now that seems to come from the last century (just my personal opinion). The one right now is also smaller in terms of its height (compared to the Windows title bar) making it harder to grab if you're used to the Windows title bar. (Another thing is the mouse cursor that is too small inside the WSL-rendered GUIs. But that's something for another issue.)

I'm not at all familiar with all of these protocols involved in making the WSLg magic happen. From a naïve point of view, I expect that some layer in Windows will draw the window in the end, so I hope it's possible that it can "simply" stick the default Windows title bar to it. But of course, things might be way more complex. I haven't used X410 before but from the screenshots showcased on their website, this feels like a better integration also with regards to the title bar (window manager).

Collection of links that ask for more native look and feel in WSLg or are related to it

pscheit commented 2 months ago

X410 works fine. I then ended up VcXsrv which had less quirks with my software (PHPStorm from Jetbrains). Others might have a different experience with it :)