Last active
July 14, 2021 22:04
-
-
Save Gamer92000/1cfd6d036ea21165ee647892566adb29 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
%PROGRAMFILES%\Teamspeak\html\client_ui
%PROGRAMFILES(X86)%\Teamspeak\html\client_ui
<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!
Program Files
directory.version 5.0.0-beta31
.