Dark css for tiktok desktop version.
目前为
/* ==UserStyle==
// @name Dark Tiktok | CSS
// @description Dark css for tiktok desktop version.
// @version 0.1.1
@namespace https://www.tiktok.com/*
==/UserStyle== */
@-moz-document domain("tiktok.com"){
/* 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;
transition: .4s ease-in-out;
}
.header-inbox.jsx-1737374796 .header-inbox-icon.jsx-1737374796{
transition: .4s ease-in-out;
}
.header-inbox.jsx-1737374796 .header-inbox-icon.jsx-1737374796:hover{
color: #812100!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;
}
.scroll-container.jsx-1067475104{
top:-18px;
}
/* comment like icons */
img[src*="like"] {
filter: saturate(5);
}
img[src*="unlike"] {
filter: brightness(5) saturate(0);
}
.like-container.jsx-1998704864 {
background: transparent!important;
}
/* video like icons */
/* will add later */
/* Links */
.user-username.jsx-3166634257{
transition: .4s ease-in-out;
}
.user-username.jsx-3166634257:hover{
color: #812100!important;
}
/* header */
.menu-right.jsx-2365341634 {
width:100px;
position: absolute;
right:60px;
top:20px
}
/*.header-container.jsx-1217828260{
height:0px;
}*/
.header-container[class~=header-container]{
height:0px;
}
/* header */
.menu-right.jsx-2365341634 {
width:100px;
position: absolute;
right:60px;
top:20px
}
.header-container.jsx-2537748390{
height:0px;
}
/* Comment Box */
[class~=comment-post-outer-wrapper]{
border-radius:25px;
}
[class~=comment-input-outside-container]{
filter:invert(.065);
}
[class~=comment-post-outside-container]{
background:#0000!important;
margin: 0px 0px!important;
padding:0px 0px!important;
border-top: none!important;
}
/* Search box */
.search-container.jsx-1785357321 {
position: absolute;
left:34px;
top:20px;
background:#ffffff1a!important;
border-radius: 25px;
padding-left:5px;
}
input:not([type="checkbox"]):not([type="submit"]), textarea {
border: none!important;
}
/* text */
.engagement-text-v23{
filter:brightness(100);
}
/* 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;
}
[class~=report-text]{
background-color:#0000001a !important;
border-radius:6px;
}
.main-body.middle {
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.*/
[class~=bottom-wrapper]{
display:none;
}
/* remove suggested accounts */
[class~=hidden-bottom-line] {
display: none;
}
/* remove App advert in bottom right corner */
[class~=app-promotion] {
display:none!important;
}
[class~=to-top]{
display:none!important;
}
/* 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;
}
/*feedback icon*/
[class~=feedback]{
filter: brightness(0.1);
transition: .5s ease-in-out;
}
[class~=feedback]:hover{
filter: brightness(1);
}
/*Right-click Functionality*/
/*
[class~=event-delegate-mask]{
height: 10px!important;
width: 10px!important;
display: flex!important;
position: fixed!important;
pointer-events: none!important;
}
*/
}
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址