https://github.com/electron/electron/blob/master/docs/api/native-theme.md
electron.nativeTheme.themeSource = 'dark';
When changing to dark mode, the native scrollbars stay light. Is there another step required to get them to display dark?
In the shot below, the left shows my browser window, right is the dev tools. Dev tools has the dark scrollbar, so the support is there somewhere.
Ugh this was soooo complicated to work out. There are two things you need to do:
Use the color-scheme CSS/meta tag to indicate to Chrome that your page is happy being rendered in light and dark mode. I think this also changes the default User Agent stylesheet to dark mode in dark mode. This really seems like a stupid design.
I only tested the meta tag, and it's probably the best option: add this to your <head>:
<meta name="color-scheme" content="light dark">
(dark light works too, supposedly the order encodes the author's preference but I seriously doubt it has any effect.)
Dark scrollbars are still an experimental feature in Chrome, so you need to enable the feature flag. You can do this with the following flag when you create windows:
new BrowserWindow({
webPreferences: {
enableBlinkFeatures: "CSSColorSchemeUARendering",
},
...
}),
The corresponding flag under chrome://flags is called Web Platform Controls Dark Mode (yeay consistency).
You can probably also do it using app.commandLine.addSwitch("enable-features", "CSSColorSchemeUARendering"); but I think the above method is cleaner.
With that I finally have dark scrollbars.
Related
I switched the Chrome/Electron DevTools Theme to Dark (in the DevTools Settings, under Preferences), so that it doesn't glare late at night.
But the console text is rendered black still, which is difficult to read on the dark backgrounds for Errors or Warnings:
Is there a setting for the DevTools themselves that I should look into, or is this an Issue I should raise in VS Code? Or Electron?
I'm unsure when, but it's been fixed. Here is Code 1.42
Thank you.
I am designing a electron app that is geared to look like a browser (i.e., google chrome), with tabs on the navigation bar.
I want to keep the windows style buttons in the top right for closing, maximizing and minimizing and the border with Windows color.
Currently I am using a frameless electron window and attempting to replicate the Windows 10 GUI but I am coming into a few roadblocks.
How do I get the window color?
When un-focused Windows 10 gives a window a 1px transparent grey border. Any transparent border I create is overlayed against electron's window background and is not transparent.
Where can I find the windows resources to replicate the top right window buttons? I want this to look like windows, not a custom GUI.
Then come the difficulties of replicating this approach for something like the Aero Glass style of Windows 7. Is there a better way to do this? Say perhaps draw directly onto the window border in a way I am not aware of, or is this the only approach?
You have to get this information via a native module that accesses the winAPI. There are packages that will help you if your not familiar with writing the binding yourselfe.
https://www.npmjs.com/package/winapi
https://www.npmjs.com/package/win32api
You can make the window transperent and then add a margin to the html/body instead of using a border when unfocused. check the electron docs for how to make the window transperent.
You will need to consider the diffrences in DPI Windows7 / Windows 10 and also any further change on the windows 10 lifetime, they will definitly change the appearance over the years. Otherwise you could extract the SVG's and styling from here https://codepen.io/agrimsrud/pen/WGgRPP MS did not publish the files so there is no way to get the original ones.
If you want native windows you should not make the window frameless, i think adding the tab support for windows which actually exists should be added to electron. Maybe create a Issue on GitHub, i think the devs there can give you some better hints on how to archive what you want.
My application is an overlay (alwaysOnTop) for a full screen game and when the user clicks on my overlay it takes focus and shows the taskbar on top of their game as well. Taking focus is fine, but I can't have the taskbar show.
It says in the BrowserWindow docs:
not a toolbox window which can not be focused on
Implying that it is possible to create a window which cannot be focused on.
Does anyone know how to create a toolbox window, or to simply avoid having the taskbar showing when clicking on the electron window?
I should mention I've tried setAlwaysOnTop and skipTaskbar. I also have transparent: true and frame: false.
The overlay I've created is the "Safelane, Midlane, Offlane" buttons. When I run the application it shows on top of the full screen app (Dota 2) like this:
After clicking on the interface the taskbar appears. It would be fine that the full screen app (Dota) loses focus, the task bar appears on top which breaks the continuity of the experience:
I would like the experience to stay like the first image--when the user clicks on anything in my overlay, the taskbar should not show.
Electron GitHub Issue
Additional Solution Info -- After using Gaafar's solution below
Setting kiosk: true in the setup does not seem to allow it to render transparent. Using setKiosk(true) within a setTimeout after the window has been opened seemed to work.
I also found that any windows using kiosk or fullscreen with transparency had rendering issue. It would render multiple times on top of itself and could not unrender items (display: none in css would do nothing). The way I fixed this was by using Electron Window Manager creating a single kiosk window with nothing in it and creating other non-kiosk windows with the HTML / CSS interfaces. The result:
All of the interfaces can be interacted with, mouse and keyboard.
Rendering happens as it does regularly in electron.
The fullscreen application below receives input through any transparent areas.
Taskbar never shows up on any input.
skipTaskbar: true is to prevent showing your app in the taskbar.
To hide the taskbar altogether use fullscreen or kiosk mode instead
fullscreen: true
or
kiosk: true
EDIT:
There are some issues open where fullscreen or kiosk modes prevent the transparency of the window.
A solution that works for me is to run with these flags --enable-transparent-visuals --disable-gpu
issue & solution: https://github.com/electron/electron/issues/2170#issuecomment-145942717
showInActive();
set your BrowserWindows, focusable: false
Im gonna post a solution some might be facing with full screening, I was facing this issue and wandering here and there, this StackOverflow post kept coming up.
So Im posting it here so people getting similar problems can get help.
When fullscreening taskbar getting in way.
When you fullscreen using mainWindow.setFullScreen(true) taskbar will get in way when you are on home (all windows minimized) in windows.
Here is the solution:
ipcMain.on("fullscreenon",()=>{
mainWindow.setAlwaysOnTop(true, 'screen-saver');
mainWindow.setFullScreen(true);
})
//The order of the commands is important below
//don't setAlwaysOnTop() before getting out of fullscreen.
ipcMain.on("fullscreenoff",()=>{
mainWindow.setFullScreen(false);
mainWindow.setAlwaysOnTop(true, 'floating')
})
Basically, by default setFullscreen uses the level: "floating". We need a higher level, "screen-saver" is the highest level I think.
OK, I would like to keep Sidebar, Toolbar and Message Window active when working in Geany, in normal mode, but I would also like to hide all these elements when switching to fullscreen mode.
Is there any way to reduce fullscreen mode to just a code editor area?
I'd be grateful for your help.
When changing to fullscreen there is no hook to hide other widgets. But: View->Toggle All Additional Widgets should do the deal.
I`m using Delphi XE3. When using the custom styles (e.g. Carbon) that are available since Delphi XE2, there is a visible white flickering when moving the mouse over the borders of the TComboBoxEx control (MouseExit/Enter).
Steps to reproduce: Create a new VCL Forms app, drop a TComboBoxEx on the form, select e.g. Carbon in project options --> Application\Appearance and start the application
Is this a known problem/bug and is any solution known?
Thank you
This Border flicker issue is not the product of using Delphi VCL Styles.
(The same problem can be observed without using VCL styles)
The culprit here is the Desktop Window Manager which is an essential part of Windows Visual Styles and Themes.
The reason why you are seeing this issue and others may not, is because you have at some point changed the default Windows Theme (aero theme) or you've changed a specific Visual effect property of your selected theme.
You perhaps also have intentionally or unintentionally disabled the Desktop Window Manager since it runs as a Windows service.
To be more exact, the issue is resolved if you enable the Desktop composition feature.
This feature is only available in Aero themes(default) but not in Basic or Classic, tho sometimes it can appear to be available even when it is not.
Control Panel --> System --> Advanced System Settings --> Advanced --> Performance Settings --> Visual Effects
When desktop composition is enabled, individual windows no longer draw
directly to the screen or primary display device as they did in
previous versions of Windows. Instead, their drawing is redirected to
off-screen surfaces in video memory, which are then rendered into a
desktop image and presented on the display.
As you might have guessed, the functionality of this function is to basically act as a Buffer which in a very neat way explains the border flickering when this option is turned off.
Important Fact
Desktop composition feature can only be enabled if your current theme is an Aero theme and using Windows Visual Styles.(It is by default enabled for every Aero Theme)
Visual Styles are enabled by default in Aero Themes, you can check that it is enabled by making sure that the Use Visual Styles on Windows feature is enabled in the Performance Settings. When the Classic or Basic Themes are in effect the desktop composition feature is never in play and cannot be enabled. (Classic theme has been deprecated since Windows 8)
Sometimes in Windows 7, the Desktop composition feature can show itself in the Performance Options even when using a Basic or Classic Theme but do not be fooled, this is an internal bug.
Steps to reproduce this bug :
Start With default Windows Aero Theme
Go into Performance Settings as described above
Uncheck the Desktop composition from the list
Mouse over the border of TComboBoxEx, it should now be flickering as
you enter/leave.
But what happens if I uncheck Use Visual Styles on Windows checkbox? Why does this solve the flickering issue?
This will cause the Desktop Window Manager(DWM) to disable themes all together for all Windows Controls. What this means is that controls will be drawn using an older rendering style as oppose to using the newer Aero rendering style.
You can turn off Visual Styles for individual controls without turning it off globally with the following method SetWindowTheme(Handle, nil, nil)
This is also why the flickering issue for TComboBoxEx border is resolved when Visual Styles are disabled.
It's also worth mentioning that since Windows 8 you cannot disable Visual Styles anymore because as I said the Classic theme is deprecated.
Regarding the solution, I don't think you've got much of a choice really. Given how much freedom is left to the user when it comes to modifying the visual effects of Windows themes, this sort of thing is bound to happen. At least you can be certain that this issue does not happen on the default Windows Theme.