Lockscreen dialog theme

Themes
1

Hi,

after upgrading from 20.04 to 22.04 I noticed that the dialog to unlock a locked screen does no longer follow the configured dark theme. The following screenshots show the dialog as it appeared in 20.04 as well as the dialog after upgrading to 22.04.

Lockscreen
Lockscreen659×774 236 KB

Is there any way to make the dialog follow the configured dark theme?

2

The theme you are using must have a .lock-dialog class defined (same class as mate screensaver). If it doesnt then you will get the vanilla gtk colours

e g. This is the definition for the default pocillo theme

3

OK - I’m using Arc Design. With Pocillo the dialog is indeed dark. Where can I find the definition for Arc so that I can check for .log-dialog? Also, if it’s missing what would be a good way to fix it? As long as the .log-dialog definition is missing in the upstream packages it doesn’t make sense to tweak it locally.

4

The upstream for Arc is now here GitHub - jnsh/arc-theme: A flat theme with transparent elements (actively maintained fork)

Fixing it there will ensure all future versions of Debian/Ubuntu and other distros will benefit.

Obviously this would not resolve in 22.04 unless the newly upstreamed fix is SRU’d.

5

OK - after playing a bit with it I noticed that the different widget sets behave differently. Arc-Dark has a dark lock dialog while Arc-Darker shows a light dialog. Maybe this is intended as also other widget are still light. If so and I would like to customize locally, how can that be accomplished without modifying the provided theme?

6

You can override all themes CSS by creating and updating the local file gtk.css

~/.config/gtk-3.0/gtk.css

7

Thanks for your help. Finally I managed to customize the dialog so that it looks as in my screenshot above.

8

Could you please share your gtk.css contents? This will help others as well. Cheers.

9

Here you go. This might not be the optimal solution but it yields the desired outcome.

.lock-dialog {
border: 1px solid rgba(188, 189, 191, 0.2);
border-radius: 0px;
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.2), 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 10.8px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.05);
background-clip: padding-box;
background-color: #383c4a;
}

.lock-dialog frame > border {
border-style: none;
}
.lock-dialog label {
color: #f0f0f0;
}

.lock-dialog entry {
color: #ffffff;
border-color: #ffffff;
background-color: transparent;
border-left: none;
border-top: none;
border-right: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

.lock-dialog button:not(:disabled) {
color: #f0f0f0;
box-shadow: none;
background-color: transparent;
}
.lock-dialog button:not(:disabled):drop(active), .lock-dialog button:not(:disabled):hover {
box-shadow: none;
background-color: rgba(82, 148, 226, 0.12);
}
.lock-dialog button:not(:disabled):focus {
box-shadow: none;
background-color: rgba(82, 148, 226, 0.12);
}
.lock-dialog button:not(:disabled):active {
box-shadow: none;
background-image: radial-gradient(circle, rgba(82, 148, 226, 0.16) 10%, transparent 0%);
}

2 Likes