☰

Dark Tiktok | CSS

Dark css for tiktok desktop version.

  1. /* ==UserStyle==
  2. // @name         Dark Tiktok | CSS
  3. // @description  Dark css for tiktok desktop version.
  4. // @version      0.3.3
  5. // @license MIT
  6. @namespace https://www.tiktok.com/*
  7. @preprocessor   stylus
  8. @var checkbox timerEnable "Subtle video timer" 1
  9. @var checkbox CleanSidenav "Clean sidenav" 1
  10. @var checkbox NewLayout "New layout mode" 1
  11. ==/UserStyle== */
  12. @-moz-document domain("tiktok.com"){
  13.  
  14. :root {
  15.     --violent-red: #812100;
  16.     --tiktok-red: #fe2c55;
  17.     --tiktok-Text: #808080;
  18.     --Tiktok-background:#000;
  19.     --debug-1:#40bd56;
  20.     --debug-2:#bd4040;
  21.     --text-1: #6c6c6c;
  22.     --text-2: #999;
  23.     --text-3: #808080;
  24. }
  25. /* _________Background coloring_________ */
  26. Body{
  27.     background:var(--Tiktok-background)!important;
  28. }
  29. [class*=DivScrollContainer-StyledScroll] {
  30.     background:var(--Tiktok-background)!important;
  31. }
  32. [class*=DivContentContaine], [class*=DivCommentListContainer]{
  33.     background:var(--Tiktok-background)!important;
  34. }
  35.  
  36. /* _________Video Comment styling_________ */
  37. [class*=DivBottomCommentContainer]{
  38.     background:var(--Tiktok-background)!important;
  39. }
  40. /* _________Text styling_________ */
  41. [class*=H2ShareTitle], H2 {
  42.     color: var(--tiktok-Text)!important;
  43. }
  44. Body{
  45.     color: var(--tiktok-Text)!important;
  46. }
  47. [class*=PUserDesc], [class*=H4UserTitle], [class*=H2CountInfos],[class*=StrongText],[class*=DraftEditor],[class*=ButtonCopyLink], p, a{
  48.     color: var(--tiktok-Text)!important;
  49. }
  50. [class*=InputElement]{
  51.     color: var(--tiktok-Text)!important;
  52. }
  53.  
  54. /* _________Navbar_________ */
  55. [class*=DivHeaderWrapperMain], [class*=DivHeaderContainer]{
  56. background:var(--Tiktok-background)!important;
  57. }
  58. [class*=DivHeaderCenterContainer]{
  59.     background-color:#15151547;
  60.     border-radius:10px;}
  61. [class*=StyledIcon],[class*=StyledInboxIcon],[class*=StyledUploadIcon]{
  62.     transition: .4s ease-in-out;
  63. }
  64. [class*=StyledIcon]:hover,[class*=StyledInboxIcon]:hover,[class*=StyledUploadIcon]:hover{
  65.     color: var(--violent-red)!important;
  66. }
  67. if NewLayout {
  68. [class*=DivHeaderWrapperMain]{
  69.     background:var(--debug-2)!important;
  70.     top:-100px;
  71.     position:absolute}
  72. [class*=DivHeaderContainer]{
  73.     background:transparent!important;
  74.     box-shadow: 0px 1px 1px #0000;
  75.     height:0px;}
  76. [class*=DivScrollContainer-StyledScroll]{
  77.     top:0px;
  78.     left:450px;}
  79. [class*=DivBodyContainer]{
  80. margin-top: 0px;}
  81. [class*=DivHeaderRightContainer]{
  82.     position:absolute;
  83.     top:130px;
  84.     left:1300px;}
  85. [class*=DivHeaderCenterContainer]{
  86.     right:350px;
  87.     top:145px
  88. }
  89. }
  90. /* _________remove Tiktok Logo_________ */
  91. [class*=StyledLinkLogo]{display:none !important;}
  92. /* _________remove get app area_________ */
  93. [class*=DivBottomContainer]{display:none !important;}
  94.  
  95.  
  96. /* _________Cleanup side navbar_________ */
  97.  
  98. if CleanSidenav {[class*=DivDiscoverContainer],[class*=DivFooterContainer],[class*=DivUserContainer]:last-child{
  99. display:none !important;}
  100. }
  101. /* _________Video_________ */
  102. [class*=DivReportText]{background:transparent}
  103.     if timerEnable {
  104.     [class*=DivVideoControlContainer], [class*=DivVideoControlTop]{
  105.       width: 100%;
  106.       height: 24px;
  107.      padding-inline: 16px;
  108.       position: absolute;
  109.       opacity: 1;
  110.       transition: opacity 0.3s ease 0s;
  111.       bottom: 28px;
  112.       cursor: initial;
  113.         display: flex;
  114.      -webkit-box-align: center;
  115.       align-items: center;
  116.      left: 50%;
  117.      transform: translateX(-50%);
  118.      max-width: 140vh;}
  119.       [class*=DivVideoControlContainer], [class*=DivVideoControlTop]{bottom: -12px;}
  120.      [class*=DivSeekBarTimeContainer]{Display:none;}
  121.     }
  122. .tiktok-1jxhpnd-DivContainer {
  123.     background-color:transparent;
  124. }
  125.  
  126. /* _________Link styling_________ */
  127.  
  128. h4{
  129.     transition: .4s ease-in-out;}
  130. h4:hover {
  131.     color: var(--violent-red)!important;}
  132. [class*=H2MainNavText],[class*=H2ShareTitle],[class*=SpanLiked],[class*=PPost],[class*=PShowMoreText],[class*=SpanUniqueId],[class*=StrongText],[class*=DivMainContent] > h4 > a,[class*=StyledUserLinkName]
  133. ,[class*=PReplyActionText]
  134. {
  135.     transition: .4s ease-in-out;
  136. }
  137. [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{
  138.     color: var(--violent-red)!important;
  139. }
  140. /*  */
  141.  
  142. [class*=DivBottomCommentContainer]{
  143.     background:#171717b5!important;
  144.     margin: 0px 0px;
  145.     padding: 0px 0px;}
  146.  
  147. [class*=DivInputAreaContainer]{
  148.     background:#17171736!important;
  149.     background-color:transparent!important;
  150.     border-radius:5px;
  151. }
  152. [class*=DraftEditor]{
  153. color:white;
  154. }
  155. [class~=comment-input-outside-container]{
  156.     filter:invert(.065);
  157. }
  158. [class*=DivPostButton]{
  159.     color: rgb(254, 44, 85)!important;
  160.     width:40px;
  161.     line-height: 39px;
  162.     text-align: left;
  163.     padding-left:12px;
  164.     margin-right: 4px;
  165. }
  166. img[src*="like"] {
  167.     filter: saturate(5);
  168. }
  169. img[src*="unlike"] {
  170. filter: brightness(5) saturate(0);
  171. }
  172. [class*=DivLikeWrapper]{
  173.     color:#fff6;}
  174.  
  175. }
  176.  
  177.  
  178.     /**EDIT 2022 Aug 13th**/
  179.  
  180.     [class*=DivAuthor]{
  181.     color:var(--text-1)!important;
  182.     }
  183.     [class*=DivDate]{
  184.     color:var(--text-2)!important;
  185.     }
  186.     [class*=DivOtherInfo]{
  187.     color:var(--text-2)!important;
  188.     }
  189.     [class*=DivTitle]{
  190.     color:var(--text-2)!important;
  191.     }
  192.     [class*=StyledLink] {
  193.     filter: saturate(5) contrast(50%);
  194.     } 
  195.     [class*=DivOtherInfo] > svg{
  196.     filter: saturate(5) contrast(0%);
  197.     }
  198.     [class*=SpanUploadText]{
  199.     color:var(--text-3)!important;
  200.     transition: .4s ease-in-out;
  201.     }
  202.     [class*=SpanUploadText]:hover{
  203.     color:var(--violent-red)!important;
  204.     }
  205.     [class*=DivUpload] {
  206.     min-width: 100px;
  207.     padding: 0 16px;
  208.     height: 36px;
  209.     border: 1px solid #4c4c4cb8;
  210.     transition: .4s ease-in-out;
  211.     }
  212.     [class*=DivUpload]:hover {
  213.     color:var(--violent-red)!important;
  214.     }
  215.     [class*=DivUploadContainer] {
  216.     border: 1px solid #4c4c4c00;
  217.     }
  218.     [class*=SpanText]{
  219.     color:var(--text-1)!important;
  220.     }
  221.     [class*=SpanReplyButton]{
  222.     background-color:#aaaaaa24;
  223.     color:var(--text-1)!important;
  224.     border-radius: 3px;
  225.     padding: 3px;
  226.     transition: .4s ease-in-out;
  227.     }
  228.     [class*=SpanReplyButton]:hover{
  229.     font-size: 14.5px;
  230.     color:black!important;
  231.     background-color: var(--violent-red)!important;
  232.     }
  233.     [class*=SpanReplyUser]{
  234.     color:var(--text-1)!important;
  235.     }
  236.     [class*=DivPostButton]{
  237.         transition: .4s ease-in-out;
  238.     }
  239.     [class*=DivPostButton]:hover{
  240.         background-color: #7474742e!important;
  241.     }
  242.     [class*=DivMentionButton]{
  243.         transition: .4s ease-in-out;
  244.     }
  245.     [class*=DivMentionButton]:hover{
  246.         background-color: #7474742e!important}
  247.     [class*=DivEmojiButton]{
  248.         transition: .4s ease-in-out;
  249.     }
  250.     [class*=DivEmojiButton]:hover{
  251.         background-color: #7474742e!important
  252.     }
  253.  
  254. }