Dark css for tiktok desktop version.
/* ==UserStyle==
//@name Dark Tiktok
//@description Dark css for tiktok desktop version.
//@include http://www.tiktok.com/*
//@version 0.0.2
@namespace github.com/aalvarado
==/UserStyle== */
/* misc 1*/
article,
aside,
body,
blockquote,
code,
dd,
dl,
dt,
fieldset,
footer,
h1, h2, h3, h4, h5, h6
header,
#header,
hr,
html,
label,
li,
main,
nav,
ol,
option,
p,
pre,
section,
select,
table,
tbody,
td,
th,
tr,
ul {
background-image: none!important;
background-color: #000!important;
color: #808080!important;
text-shadow: none!important;
}
div {
background-color: #000!important;
color: #808080!important;
text-shadow: none!important;
}
.video-card-browse, .mute-icon.jsx-1860515201, .report-text.jsx-895047106 {
background-color: transparent!important;
}
canvas,
svg,
embed#plugin {
-webkit-filter: invert(100%) brightness(35%) hue-rotate(180deg);
filter: invert(100%) brightness(35%) hue-rotate(180deg);
}
input[type="checkbox"] {
filter: invert(100%) hue-rotate(180deg);
}
input:not([type="checkbox"]):not([type="submit"]),
textarea,
button,
span {
background-image: none!important;
background-color: transparent!important;
color: #808080!important;
}
input:not([type="checkbox"]):not([type="submit"]),
textarea {
border: 1px solid #808080!important;
}
a {
background-image: none!important;
background-color: transparent!important;
color: #6d6d6d!important;
border: 0px!important;
text-decoration: none!important;
}
a:hover,
a:hover span,
input[type="submit"]:hover,
select:hover {
background-image: none!important;
background-color: transparent!important;
color: #812100!important;
border: 0px!important;
text-decoration: none!important;
}
#sidebar {
display: none!important;
}
.icons.like {
background-image: url("https://s16.tiktokcdn.com/tiktok/falcon/_next/static/images/like-inactive-d771e860459cfdd012d82f9c44791ace.svg")!important;
}
.icons.like.liked {
background-image: url("https://s16.tiktokcdn.com/tiktok/falcon/_next/static/images/like-active-a94d81c0caafc0f8530c132e6182fa68.svg")!important;
}
.icons.comment {
background-image: url("https://s16.tiktokcdn.com/tiktok/falcon/_next/static/images/comment-85150c34ed75254a6a731ff76d676890.svg")!important;
}
.header-container,
.header-container * {
background:transparent!important;
border:none!important;
}
.header-container .menu-wrapper {
background-color: #000!important;
}
/* logo removal, if you'd like to re-add the logo you can but the actual logo is pitch black and blends with the background.
The colours of the logo, ie) the red abd blue are visible and clash with the blackness.*/
/* Text "TikTok" */
.logo-container .logo-text.jsx-1009840709, .logo-container-drawer .logo-text.jsx-1009840709{
display:none !important;
}
/* icon */
.logo-container .logo-icon.jsx-1009840709, .logo-container-drawer .logo-icon.jsx-1009840709{
display:none !important;
}
/* If you can find a way to replace the actual logo with another svg image here is a link to one that doesn't have the red/blue accents. ( https://gist.github.com/UglyBoiDesu/b53d6d63d73e4600d748196fff325141 )
I don't know how to replace it. sorry.
Use the filter property with the invert value with .5 or 1 to make said svg grey or white. you can then change its color with another filter property or just edit the svg i gave you in a program like inkscape into a custom color if you dont wanna use filter and css to change its color.*/
/* misc 2 */
.image-card div:not(.card-footer),
.video-card-browse div {
background-color:transparent!important;
}
.card-footer {
background:rgba(0, 0, 0, 0) linear-gradient(rgba(22, 24, 35, 0) 2.92%, rgba(22, 24, 35, 0.5) 98.99%) repeat scroll 0% 0%!important;
}
.menu-right.jsx-2365341634{
background-color:transparent !important;
}
.header-container.middle.jsx-2041358087 .header-content.jsx-2041358087{
width:100%;
height:6.6%;
background-color:transparent !important;
position: fixed !important;
right: 10px ;
padding-left:20px !important;
}
.main-body.middle {
padding-top:0!important;
}
.side-bar.jsx-3866147749, .side-scroll-wrapper.jsx-3322756911 {
height:100% !important;
padding-top: 0 !important;
}
/* Legal information, about and language selection area.
You should change you language before applying css
or you could just delete this section.*/
.side-bar.jsx-3866147749 .bottom-wrapper.jsx-3866147749{
display:none;
}
/* remove suggested accounts */
.side-bar.jsx-3866147749 .user-list-skeleton.hidden-bottom-line.jsx-3866147749, .side-bar.jsx-3866147749 .user-list.hidden-bottom-line.jsx-3866147749 {
display: none;
}
/* width/Height */
::-webkit-scrollbar {
width: 4px;
height:4px;
}
/* Track */
::-webkit-scrollbar-track {
background: #000;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #000;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #000;
}