Hello,
We have dozens of Syncthing devices in our network. Sometimes it is hard to differentiate between for which one we have the GUI open just by IP/Name.
So we would like to be able to change GUI elements.
I know this is possible by changing files before building the application but I would like know if there is a way to do this with instances where Syncthing has already been deployed. Something as simple as setting a custom color/logo would suffice.
Thanks, Colin
Please check https://docs.syncthing.net/dev/web.html. You can replace the whole GUI, including all the HTML, JS, and CSS files like that. However, I would personally suggest to add just a custom CSS theme file, where you would enforce your changes.
To put it simply, if you follow the link above and use a folder ~/dev/syncthing/gui to store the files, simply create a CSS file in a subfolder, such as ~/dev/syncthing/gui/<name-of-your-custom-theme>/assets/css/theme.css and add your custom styles there. What is not included there will just follow the Default gui theme.
After that, you will be able to select your custom GUI in Syncthing. Just remember to restart the application once you have created the new theme files.
Thanks for your reply man.
I’ve read that article but I assumed those files were only available pre-build as I was unable to find them on my device after installation.
I honestly would not blame you for calling me stupid at this point but where is this ~/dev/syncthing/gui folder located after building and deploying Syncthing? I can’t for the life of me find it anywhere.
For reference I’ve installed Syncthing on a RaspberryPi’s all with Debian (RaspberryPiOs) using this guide: https://jakemakes.eu/syncthing-on-raspberry-pi-2-make-your-own-cloud-storage/
I’ve searched in /dev/ but also tried ~/dev/ (which doesn’t exist). I’ve also searched for a folder by that name but no luck.
You can also just put your custom gui dir into syncthing’s configuration directory, usually ~/.config/syncthing, and it will be used.
Holy shit you guys managed to get an idiot like me to get it working. Thank you all so much!
I was confused by the fact that the gui folder does not exists anywhere on the device and the .css files are also nowhere to be found even though the documentation says to look inside gui/default/.
So here’s how to do it on a Pi for everyone that got here through Google:
/home/pi/.config/syncthing/gui/ note that the username here is pi and should be changed if the username is not pi.Default folder from the the repository. Currently located here: syncthing/gui at main · syncthing/syncthing · GitHub
default folder to /home/pi/.config/syncthing/gui/ BUT also give it a custom name. So for example my theme is called “Pink”. Therefore my folder structure is:/home/pi/.config/syncthing/gui/Pink/assets/*
/home/pi/.config/syncthing/gui/Pink/syncthing/*
/home/pi/.config/syncthing/gui/Pink/vendor/*
/home/pi/.config/syncthing/gui/Pink/index.html
/home/pi/.config/syncthing/gui/Pink/modal.html
Adjust anything you want inside the folder. The logo can be found at syncthing/gui/Pink/assets/img/logo-horizontal.svg. Most of the interface colors can be found at /home/pi/.config/syncthing/gui/default/assets/css/theme.css. To minimize compatibility issues delete the files that you have not modified. Any file that is not found in the custom folder will be retrieve from the default theme.
Restart Syncthing and the custom theme should now be selectable in the settings > GUI menu.
Again thank you for the help 
It is good to hear that you have got the custom GUI working.
However, I would personally strongly recommend to leave the actually required theme.css and logo-horizontal.svg only, and remove everything else.
The reason is that when Syncthing gets updated, it also often comes with updated versions of those files (especially HTML and JS). If you keep your own and force Syncthing to use them like that, then you may encounter incompatibility issues between the old GUI files and future versions of Syncthing.
Great advice. I’ll edit my post.
This all work good and I can choose in the drop down my special theme. If I try to make a user defined design I have to play with all the hex color codes, but its difficult without the relation in the GUI.
Is there a description, which parameter related to the part in the GUI?
The code is on github, there are no “special parameters” to tweak. We just use bootstrap so you can tweak whatever bootstrap allows you to.
I would suggest just using developer tools in your Web browser to check which element is which, and then modify the CSS accordingly. For testing purposes, you can also modify the code on the fly directly in the browser.
Which tool you are using?
We just use a text editor to develop the ui, there is no “tool”.
I have done in the same way but without knowledge of the different parameters in relation to the GUI. I have to change any values and look what is the result to know which parameters have which relation to the GUI elements.
Yes, some things require you to know what you are doing.
Therefore I ask for a map, which paramter change which element in the GUI. Otherwise I must change any parameter to see which element is changed. This needs a lot of time.
I’m not even sure what you mean by parameters or a map in this context, but I don’t think there is one.
For example, if I taking the theme.css from the dark theme as a template for a user-defined theme, I can adjust the hex codes for the color scheme to have e.g. a blue background.
If I have created a user-defined theme, I can select it via the GUI. If I change parameters, I can immediately see the result by reloading the GUI page, what has changed and how it looks like. That’s quite a guessing game though.
Just as an example: In the theme.css is the parameter set for the element
.dropdown-menu {
border-color: #424242 !important;
border-width: 2px !important;
background-color: #222 !important;
}
If I change the code 424242 or 222 to any other values, which part is changed in the GUI?
Therefore I ask for a description or something similar in order to be able to change this more specifically.
I am just going to leave these links here.
https://developers.google.com/web/tools/chrome-devtools https://developer.mozilla.org/docs/Tools/Page_Inspector
A thing you are asking for does not exist.
We use bootstrap and bootstrap has it’s own elements with their own classes with colors, there is no “map” or “list of things you can tweak”, as bootstrap css is 1000s of lines of code.
I guess you can go read the 1000s of lines and build your own map. The dark theme was built by someone who went around, inspected every element in the UI and built their own “map”, until it looked like they wanted.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.