teamspeak.css

/*    TeamSpeak (5) Theme    */
/*  developed by Gamer92000  */


@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300,600;1,300&display=swap');

:root {  /*  variables to change  */
      --custom-color-light-grey: #353844;                            /*  |  These color values             */
      --custom-color-dark-grey: #252A33;                             /*  |  may be changed!                */
      --custom-color-accent-light: RGB(240,147,7);                   /*  |  Do not use translucent colors  */
      --custom-color-accent-dark: rgb(199, 128, 21);                 /*  |  here or a pleasant result      */
      --custom-color-accent-really-dark: rgb(80, 56, 20);            /*  |  can not be guaranteed          */
      --custom-color-off-white: #e0e0e0;                             /* this color is used for icons not currently hovered or selected */
      --custom-color-secondary-text: #bebebe;                        /* this color is used for the global chat and all  */
      --custom-value-show-scrollbar: inherit;                        /* possible values are `none` to hide the scrollbars or `inherit` to show them */
      --custom-value-scrollbar-width: 3px;                           /* set this to 0 px if the scrollbar is hidden! */
      --custom-value-font: 'Roboto Condensed', sans-serif;           /* If you choose a font that is not preinstalled on the system you can either install it or easier import it like seen above */
      --custom-value-font-weight: 300;                               /* Make sure the font is installed / imported with the desired font weight */

      --custom-color-chat-bubble-own: rgb(20,25,35);
      --custom-color-chat-bubble-foreign: var(--custom-color-light-grey);
}

:root {
    --tsv-bg: var(--custom-color-light-grey) !important;
    --tsv-shaded-bg: var(--custom-color-dark-grey) !important;
    --tsv-contrast-bg: var(--custom-color-dark-grey) !important;
    --tsv-icon-base: var(--custom-color-off-white) !important;
    --tsv-icon-tint: var(--custom-color-accent-light) !important;
    --tsv-icon-tint2: var(--custom-color-accent-light) !important;
    --tsv-icon-base-contrast: var(--custom-color-light-grey) !important;
    --tsv-tint: var(--custom-color-accent-light) !important;
    --tsv-tint2: var(--custom-color-accent-dark) !important;
    --tsv-button-bg: var(--custom-color-accent-light) !important;
    --tsv-button-hover-bg: var(--custom-color-accent-dark) !important;
    --ts-menu-action-color: var(--custom-color-accent-dark) !important;
    --tsv-context-menu-item-selection: var(--custom-color-accent-really-dark) !important; /* broken ?! */
    --tsv-border-radius: 8px !important;
    --tsv-border-radius-large: 12px !important;
    --tsv-separation-border: none !important;
    --tsv-separation-border-color: transparrent !important;
    --tsv-separation-border-strong-color: transparrent !important;
    --tsv-separation-border-strong: none !important;
    --tsv-separation-border-width: 0px !important;
    --tsv-scrollbar-bg: none !important;
    --tsv-hex-scale: none !important;
    --tsv-icon-folder: var(--custom-color-accent-light) !important;
    --tsv-font-subtitle-color: var(--custom-color-secondary-text) !important;
    --ts-primary-accent-color: var(--custom-color-accent-light) !important;
    --tsv-chat-link-color: var(--custom-color-accent-dark) !important;
    --tsv-chat-self-bg: var(--custom-color-chat-bubble-own) !important;
    --tsv-chat-remote-bg: var(--custom-color-chat-bubble-foreign) !important;
    --tsv-chat-self-font-color: var(--custom-color-secondary-text) !important;
    --tsv-chat-remote-font-color: var(--custom-color-secondary-text) !important;
    --tsv-error-light-color: var(--custom-color-accent-light) !important;
    --tsv-chat-mention-bg: var(--custom-color-accent-really-dark) !important;
    --tsv-content-branding-fancy-bg: var(--tsv-content-branding-bg) !important;
}

.ts-toggle-inner {
    background: var(--tsv-tint2) !important;
}

.tsv-button-plain {
    color: var(--tsv-tint) !important;
}

.tsv-button-plain:hover {
    color: var(--tsv-tint2) !important;
}

.tsv-is-destructive svg g * {
    fill: var(--custom-color-accent-dark) !important;
}

.tsv-server-info-default-banner {
    opacity: 1 !important;
}

.tsv-tab-item.tsv-bar-item.tsv-tab-item-active {
    width: 100% !important;
    border-radius: var(--tsv-border-radius) !important;
}

.tsv-body:not(.tsv-pinned-message-message) , .ts-background-hexes-container {
    border-radius: var(--tsv-border-radius-large) !important;
}

.tsv-tab-item.tsv-bar-item.tsv-tab-item-active::before {
    background: transparent !important;
}

.tsv-icon-client-talking circle {
    fill: var(--tsv-tint) !important;
}

.ts-toggle-inner.checked::after {
    background: var(--tsv-tint) !important;
}

.tsv-icon-client-normal circle , .tsv-icon-client-voiceless circle {
    fill: var(--custom-color-accent-really-dark) !important;
}

.tsv-server-info-grid-item.clickable:hover {
    background: var(--custom-color-accent-really-dark) !important;
}

.tsv-highlight.tsv-header::before {
    -webkit-mask: none !important;
}

.tsv-header.unrelated::before, .tsv-server-info-default-banner, .tsv-tab-item.tsv-bar-item.tsv-tab-item-active, .ts-chat-input-container-content, .tsv-search-bar, .tsv-location-bar, .ts-tree , .ts-widget-section-header > .title::before , .ts-widget-section-header > .title::after , .tsv-dashboard-widget , .tsv-client-badge-showcase, .tsv-client-info-groups-container, .tsv-client-info-groups-container {
    background: var(--tsv-bg) !important;
}

.tsv-bar, .tsv-window, .tsv-header::before, .tsv-view, .ts-about-settings .ts-widget , .ts-privacy-settings-view .ts-widget , .ts-identities-root .ts-widget , .ts-notifications-root .ts-widget , .ts-keybinds-settings .ts-widget , .ts-audio-settings .ts-widget , .ts-appearance-settings .ts-widget , .ts-account-settings-view .ts-widget {
	  background: var(--tsv-contrast-bg) !important;
}

.ts-about-settings.tsv-view , .ts-privacy-settings-view.tsv-view , .ts-identities-root.tsv-view , .ts-notifications-root.tsv-view , .ts-keybinds-settings.tsv-view , .ts-audio-settings.tsv-view , .ts-appearance-settings.tsv-view , .ts-account-settings-view.tsv-view {
	  background: transparent !important;
}

.ts-server-tree-item-background-no-image {
    opacity: .7 !important;
}

.tsv-chat-room-info .tsv-server-info-grid .tsv-server-info-grid-left, .tsv-chat-room-info .tsv-server-info-grid .tsv-server-info-grid-item {
    background: var(--tsv-bg) !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ts-primary-font-color) !important;
}

body, * {
    font-family: var(--custom-value-font) !important;
}

*:not(strong) {
    font-weight: var(--custom-value-font-weight) !important;
}

::-webkit-scrollbar {
    display: var(--custom-value-show-scrollbar);
    width: var(--custom-value-scrollbar-width) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--tsv-tint) !important;
}

.tsv-item-active-indicator {
    right: calc(var(--custom-value-scrollbar-width) - var(--tsv-separation-border-width)) !important;
}

.tsv-item-active-indicator::after {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    left: -2px;
    top: -6px;
    border: 6px solid transparent;
    border-right-color: var(--tsv-bg);
}

.ts-slider-segment-value.ts-slider-segment-value-on {
    background: linear-gradient(to right, var(--custom-color-accent-light), var(--custom-color-accent-light)) border-box !important;
}

.ts-slider-segment-value.ts-slider-segment-value-off {
    background: linear-gradient(to right, var(--custom-color-accent-really-dark), var(--custom-color-accent-really-dark)) border-box !important;
}

.ts-checkbox-checkmark-path {
    stroke: var(--tsv-tint) !important;
}

.ts-card {
    background: var(--tsv-bg) !important;
}

.tsv-icon-contact-status-favorite path {
    fill: transparent;
}

.tsv-icon-contact-status-favorite + div {
  -webkit-mask: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 26 26" style="enable-background:new 0 0 26 26;"><style type="text/css">.st0{fill:none;}.st1{fill-rule:evenodd;clip-rule:evenodd;}</style><rect id="contact_mask" class="st0" width="26" height="26"/><circle class="st1" cx="12" cy="12" r="10.9"/><polygon points="19.4,13.5 21.4,17.6 25.9,18.2 22.7,21.4 23.4,25.9 19.4,23.8 15.4,25.9 16.2,21.4 12.9,18.2 17.4,17.6"/></svg>') !important;
  width: 24px !important;
  height: 24px !important;
  /* top: .5px !important; */
  left: calc(50% + 1px) !important;
  position: absolute !important;
  transform: translate(-50%,0) scale(1) !important;
}

.tsv-icon-contact-status-favorite + div::after {
  content: "";
  background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 26 26" style="enable-background:new 0 0 26 26;"><style type="text/css">.st0{fill:none;}</style><rect id="contact_mask" class="st0" width="26" height="26"/><polygon style="fill: RGB(240,147,7)" points="19.4,13.5 21.4,17.6 25.9,18.2 22.7,21.4 23.4,25.9 19.4,23.8 15.4,25.9 16.2,21.4 12.9,18.2 17.4,17.6"/></svg>');
  display: inline-block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 24px;
  height: 24px
}

.tsv-action:hover .tsv-icon-contact-status-favorite + div {
  transform: translate(-50%,0) scale(1.2) !important;
}

.room-users-title {
  top: 1px !important;
}

Disclaimer!

This is not (yet) officially supported by TeamSpeak!

I am not responsible for any damages done to you TeamSpeak installation!

How to install this theme!

Head to this directory:

OS	Location
Windows 64bit	%PROGRAMFILES%\Teamspeak\html\client_ui
Windows 32bit	%PROGRAMFILES(X86)%\Teamspeak\html\client_ui
Linux / Mac	<TeamSpeak Install Dir>/html/client_ui

There you will find a file called 1.css.
This file is the only style file always loaded by the client so the one you want to edit.

Append the entire content of this gist to the end of that file and save it.

Now you just need to reload the client by simply pressing Ctrl + Shift + R or restart it to apply the changes.

How to customize this theme!

Of course you can just play around with all the values to build a theme to your liking.

The easiest is just to change the values in the :root block commented with /* variables to change */
It is theoretically possible to set linear gradients or images but this will most likely result in unintended results.

How to remove this theme!

If you do not like the changes simply go to 1.css and remove the added lines again.

Notes!

• On Windows you need elevated privileges to change any file in the Program Files directory.
• You may edit and share this theme freely. But as long as you share it without any changes to the actual content (design variables excluded) I may be credited as the author.
• This theme will most likely be removed by any TeamSpeak update and needs to be reinstalled
• I can not guarantee that this theme will work flawlessly now or in the future. It was developed for version 5.0.0-beta31.
• If you find any problems with this theme feel free to leave a comment.
• Reloading instead of restarting seems to increase RAM usage as resources are not cleared but still reloaded. Keep this in mind!