Greasy Fork is available in English.
Dark css for tiktok desktop version.
/* ==UserStyle==
// @name Dark Tiktok | CSS
// @description Dark css for tiktok desktop version.
// @version 0.3.3
// @license MIT
@namespace https://www.tiktok.com/*
@preprocessor stylus
@var checkbox timerEnable "Subtle video timer" 1
@var checkbox CleanSidenav "Clean sidenav" 1
@var checkbox NewLayout "New layout mode" 1
==/UserStyle== */
@-moz-document domain("tiktok.com"){
:root {
--violent-red: #812100;
--tiktok-red: #fe2c55;
--tiktok-Text: #808080;
--Tiktok-background:#000;
--debug-1:#40bd56;
--debug-2:#bd4040;
--text-1: #6c6c6c;
--text-2: #999;
--text-3: #808080;
}
/* _________Background coloring_________ */
Body{
background:var(--Tiktok-background)!important;
}
[class*=DivScrollContainer-StyledScroll] {
background:var(--Tiktok-background)!important;
}
[class*=DivContentContaine], [class*=DivCommentListContainer]{
background:var(--Tiktok-background)!important;
}
/* _________Video Comment styling_________ */
[class*=DivBottomCommentContainer]{
background:var(--Tiktok-background)!important;
}
/* _________Text styling_________ */
[class*=H2ShareTitle], H2 {
color: var(--tiktok-Text)!important;
}
Body{
color: var(--tiktok-Text)!important;
}
[class*=PUserDesc], [class*=H4UserTitle], [class*=H2CountInfos],[class*=StrongText],[class*=DraftEditor],[class*=ButtonCopyLink], p, a{
color: var(--tiktok-Text)!important;
}
[class*=InputElement]{
color: var(--tiktok-Text)!important;
}
/* _________Navbar_________ */
[class*=DivHeaderWrapperMain], [class*=DivHeaderContainer]{
background:var(--Tiktok-background)!important;
}
[class*=DivHeaderCenterContainer]{
background-color:#15151547;
border-radius:10px;}
[class*=StyledIcon],[class*=StyledInboxIcon],[class*=StyledUploadIcon]{
transition: .4s ease-in-out;
}
[class*=StyledIcon]:hover,[class*=StyledInboxIcon]:hover,[class*=StyledUploadIcon]:hover{
color: var(--violent-red)!important;
}
if NewLayout {
[class*=DivHeaderWrapperMain]{
background:var(--debug-2)!important;
top:-100px;
position:absolute}
[class*=DivHeaderContainer]{
background:transparent!important;
box-shadow: 0px 1px 1px #0000;
height:0px;}
[class*=DivScrollContainer-StyledScroll]{
top:0px;
left:450px;}
[class*=DivBodyContainer]{
margin-top: 0px;}
[class*=DivHeaderRightContainer]{
position:absolute;
top:130px;
left:1300px;}
[class*=DivHeaderCenterContainer]{
right:350px;
top:145px
}
}
/* _________remove Tiktok Logo_________ */
[class*=StyledLinkLogo]{display:none !important;}
/* _________remove get app area_________ */
[class*=DivBottomContainer]{display:none !important;}
/* _________Cleanup side navbar_________ */
if CleanSidenav {[class*=DivDiscoverContainer],[class*=DivFooterContainer],[class*=DivUserContainer]:last-child{
display:none !important;}
}
/* _________Video_________ */
[class*=DivReportText]{background:transparent}
if timerEnable {
[class*=DivVideoControlContainer], [class*=DivVideoControlTop]{
width: 100%;
height: 24px;
padding-inline: 16px;
position: absolute;
opacity: 1;
transition: opacity 0.3s ease 0s;
bottom: 28px;
cursor: initial;
display: flex;
-webkit-box-align: center;
align-items: center;
left: 50%;
transform: translateX(-50%);
max-width: 140vh;}
[class*=DivVideoControlContainer], [class*=DivVideoControlTop]{bottom: -12px;}
[class*=DivSeekBarTimeContainer]{Display:none;}
}
.tiktok-1jxhpnd-DivContainer {
background-color:transparent;
}
/* _________Link styling_________ */
h4{
transition: .4s ease-in-out;}
h4:hover {
color: var(--violent-red)!important;}
[class*=H2MainNavText],[class*=H2ShareTitle],[class*=SpanLiked],[class*=PPost],[class*=PShowMoreText],[class*=SpanUniqueId],[class*=StrongText],[class*=DivMainContent] > h4 > a,[class*=StyledUserLinkName]
,[class*=PReplyActionText]
{
transition: .4s ease-in-out;
}
[class*=H2MainNavText]:hover,[class*=H2ShareTitle]:hover,[class*=SpanLiked]:hover,[class*=PPost]:hover, [class*=PShowMoreText]:hover,[class*=SpanUniqueId]:hover,[class*=StrongText]:hover,[class*=DivMainContent] > h4 > a:hover,[class*=StyledUserLinkName]:hover,[class*=PReplyActionText]:hover{
color: var(--violent-red)!important;
}
/* */
[class*=DivBottomCommentContainer]{
background:#171717b5!important;
margin: 0px 0px;
padding: 0px 0px;}
[class*=DivInputAreaContainer]{
background:#17171736!important;
background-color:transparent!important;
border-radius:5px;
}
[class*=DraftEditor]{
color:white;
}
[class~=comment-input-outside-container]{
filter:invert(.065);
}
[class*=DivPostButton]{
color: rgb(254, 44, 85)!important;
width:40px;
line-height: 39px;
text-align: left;
padding-left:12px;
margin-right: 4px;
}
img[src*="like"] {
filter: saturate(5);
}
img[src*="unlike"] {
filter: brightness(5) saturate(0);
}
[class*=DivLikeWrapper]{
color:#fff6;}
}
/**EDIT 2022 Aug 13th**/
[class*=DivAuthor]{
color:var(--text-1)!important;
}
[class*=DivDate]{
color:var(--text-2)!important;
}
[class*=DivOtherInfo]{
color:var(--text-2)!important;
}
[class*=DivTitle]{
color:var(--text-2)!important;
}
[class*=StyledLink] {
filter: saturate(5) contrast(50%);
}
[class*=DivOtherInfo] > svg{
filter: saturate(5) contrast(0%);
}
[class*=SpanUploadText]{
color:var(--text-3)!important;
transition: .4s ease-in-out;
}
[class*=SpanUploadText]:hover{
color:var(--violent-red)!important;
}
[class*=DivUpload] {
min-width: 100px;
padding: 0 16px;
height: 36px;
border: 1px solid #4c4c4cb8;
transition: .4s ease-in-out;
}
[class*=DivUpload]:hover {
color:var(--violent-red)!important;
}
[class*=DivUploadContainer] {
border: 1px solid #4c4c4c00;
}
[class*=SpanText]{
color:var(--text-1)!important;
}
[class*=SpanReplyButton]{
background-color:#aaaaaa24;
color:var(--text-1)!important;
border-radius: 3px;
padding: 3px;
transition: .4s ease-in-out;
}
[class*=SpanReplyButton]:hover{
font-size: 14.5px;
color:black!important;
background-color: var(--violent-red)!important;
}
[class*=SpanReplyUser]{
color:var(--text-1)!important;
}
[class*=DivPostButton]{
transition: .4s ease-in-out;
}
[class*=DivPostButton]:hover{
background-color: #7474742e!important;
}
[class*=DivMentionButton]{
transition: .4s ease-in-out;
}
[class*=DivMentionButton]:hover{
background-color: #7474742e!important}
[class*=DivEmojiButton]{
transition: .4s ease-in-out;
}
[class*=DivEmojiButton]:hover{
background-color: #7474742e!important
}
}