Creating custom GUI

Support
1

Windows 10, Syncthing v1.29.7. Created C:\Users\Dave\AppData\Local\Syncthing\gui\dave\theme.css Selected “Actions/Settings/GUI/Theme/Dave” Restarted Syncthing. CSS theme reverted to default and dave\theme.css ignored.

dave\theme.css contains:

#globalChanges {
	& .modal-dialog {
		max-height: 90%;
		width: auto;
		overflow: auto;
		resize: both;
	}
	& .modal-header {
		z-index: 10;
		position: sticky;
		top: 0;
	}
	& .modal-footer {
		position: absolute;
		top: 0;
		right: 0;
	}
}

Question #1: why is this theme ignored? Question #2: how can I combine effect of themes “Dark” and “Dave”?

2

How do you run Syncthing? In other words, do you use the bare executable or some kind of a wrapper (e.g. SyncTrayzor or Syncthing Tray?). I’ve just tried applying a custom theme the same was as you described, and the theme sticks here, even after restart.

If you want to keep things simple, you could just copy and paste the content of https://github.com/syncthing/syncthing/blob/main/gui/dark/assets/css/theme.css into your CSS file.

3

The undocumented secret to customized GUI CSS in Windows 10 is:

mkdir C:\Users\xxxxxxxx\AppData\Local\Syncthing\gui\yyyyyyyy\assets\css

Go to ...\css and create file theme.css. Then, restart the Syncthing GUI, select the GUI theme yyyyyyyy, and it works !

FYI, I chose this CSS to make the global-changes dialog resizable:

#globalChanges {
	& .modal-dialog {
		max-height: 90%;
		width: auto;
		overflow: auto;
		resize: both;
	}
	& .modal-header {
		z-index: 10;
		position: sticky;
		top: 0;
		background-color: inherit;
	}
}