hello I would like to create my own theme but first of all do we have the right?
Because when I modify the files (.css they become as before …)
And then also I can’t find everything I see in the DevTools (CSS level too) 
Most variables for changing the coloring of TS5 are within the main .js file found in C:\Program Files\TeamSpeak\html\client_ui.
You can get more in-depth you by editing the other css/js files
1 Like
I can’t change the dark blue color in the background.
So you mean we can modify it from js files ?
Just use !important on your custom file. It will force the css engine to use your value.
Also I would recommend using 1.css as this is guaranteed to always be loaded.
I don’t understand how and where to use the: !important
To modify the theme it is also necessary to modify files other than the css ?
Or could someone show me an example in screenshot or video ? 
So just go to the TeamSpeak installation folder and there to html\client_ui.
In there is a file called 1.css. This is the one you want to edit append to.
Any css value can be set to important to override other changes of that value.
It can be done like this:
property: value !important;
Changing the colors is possible by just changing the root variables:
:root {
--tsv-shaded-bg: #252A33 !important;
}
Check out this:
Or my version I currently use / work on:
https://gist.githubusercontent.com/Gamer92000/1cfd6d036ea21165ee647892566adb29/raw/3f6ca40fea4698548e637183487322120f39be73/teamspeak.css
3 Likes
oh ok thank man 
I modify all the colors possible in the 1.css with the (!important) next to it but it changes everything except the background and all the other things that are the most important to change 
I do not understand anything anymore
the classes are pretty much everywhere the same… its a litte problem but the fix is that you should somtimes use the exact path to that element you want to color (dev-tools > right click on element > copy > copy selector)
example:
#fab-android > path {
color: red;
background-color: pink;
}
1 Like
Pretty awsome to see how i started this little topic,
also i made an update to my theme, you can use it freely as a template ^^
*edit: uploading it later, cant find it or might have forgotten to back it up after resetting my pc.
1 Like
You can debug the whole client when starting it with a specific argument.
Execute this command in the ts clients folder: TeamSpeak.exe --remote-debugging-port=9988
Open Chrome type http://localhost:9988 and press on “Teamspeak client UI” after that you can search the dom and css using the chrome dev tools like a normal webpage. For more info: Qt WebEngine Debugging and Profiling | Qt WebEngine 5.15.14
1 Like
