☰

Dark Tiktok | CSS

Dark css for tiktok desktop version.

当前为 2021-06-15 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. // @name         Dark Tiktok | CSS
  3. // @description  Dark css for tiktok desktop version.
  4. // @version      0.2.6
  5. @namespace https://www.tiktok.com/*
  6. ==/UserStyle== */
  7. @-moz-document domain("tiktok.com"){
  8.  
  9. /*broken feature toggle below*/
  10.  
  11. /*
  12. @preprocessor   stylus
  13.  
  14. @var checkbox hideAccount "Hide suggested Accounts" 0
  15. */
  16. /*.tiktok-w7c21z-HeaderContainer { height:0px; } */
  17. html{background:black}
  18. .engagement-text-v23 {
  19.     color: #808080;
  20. }
  21. /* Explore page | Tiktok Logo */
  22. .tiktok-hvdb7f-LinkLogo { display:none; }
  23. /* Explore page | Header */
  24. .tiktok-1vuji9j-HeaderRightContainer { 
  25.     position:absolute;
  26.     right:30px; 
  27.     top:20px;
  28. }
  29. .tiktok-1dvfans-HeaderCenterContainer { height:0px; }
  30. .tiktok-1g3oxgd-HeaderWrapper{ height: 0px; }
  31. .tiktok-w7c21z-HeaderContainer{ height: 0px; }
  32. /* Explore page | Search */
  33. [class~=search-input]{
  34.     right:420px;
  35.     top:110px;
  36. }
  37. [class~=sug-container]{
  38.     right:420px;
  39.     top:150px;
  40. }
  41. [class~=sug-container]{
  42. background:black!important;
  43. }
  44. input {color: #808080!important;}
  45.  
  46. [class~=search-input]:hover{
  47.     border:solid 1px;
  48.     border-color:#8080802e;
  49.     transition: ease-in-out 300ms
  50. }
  51. /* Login/Avatar */
  52. [class~=menu-right]{
  53.     position:absolute;
  54.     top:125px;
  55.     right:-370px;
  56.     background-color:#fff0;
  57. }
  58. [class~=upload-wrapper]{
  59.     filter:invert(.3);
  60. }
  61. [class~=message-icon]{
  62.     filter:invert(.3);
  63. }
  64. [class~=header-inbox]{
  65.     filter:invert(.3);
  66. }
  67. [class~=search-container]{
  68.     right:420px!important;
  69.     background:red;
  70. }
  71.  
  72. /* Explore page | sidebar */
  73. .tiktok-1qn2tr4-ScrollContainer-StyledScroll {
  74. top:-26px;
  75. }
  76. /* Explore page | recommendations */
  77. .tiktok-jidueg-UserContainer{display:none;}
  78. /* Explore page | Legal info */
  79. .tiktok-1b8f3hm-FooterContainer{display:none;}
  80. /* Explore page | Main Video Section */
  81. .tiktok-3bidcs-MainContainer {padding: 0px;}
  82. .tiktok-p62ew4-BodyContainer {margin-top: 0px;}
  83.  
  84. /* Explore page | text colors */
  85. .tiktok-10100fy-ActionItemText {
  86.     color: #808080!important;
  87. }
  88.  
  89.  
  90. [class~=content-container]{
  91.     background-color: #000!important;
  92. }
  93. [class~=comment-post-outside-container]{
  94.     background-color: #000!important;
  95. }
  96. [class~=comment-text]{
  97.     color: #acacac!important;
  98. }
  99. [class~=user-username], [class~=user-nickname], [class~=video-meta-title], [class~=action-container], [class~=username], [class~=comment-time], [class~=reply], [class~=link-container], h2 > a{
  100.     color: #808080!important;
  101. }
  102. [class~=main-body], [class~=side-bar-container], [class~=scroll-container]{
  103.     background-color: #000!important;
  104. }
  105. #app > div.tiktok-p62ew4-BodyContainer.emtmpql0 > div.tiktok-1e13ecs-DivSideNavContainer.emtmpql1 > div > div.tiktok-1onbh2l-SideNavContainer.eh217d91 > div{
  106. background-color:#000;
  107. }
  108.  
  109. #app > div.tiktok-p62ew4-BodyContainer.emtmpql0 > div.tiktok-1e13ecs-DivSideNavContainer.emtmpql1 > div > div.tiktok-1onbh2l-SideNavContainer.eh217d91 > div > div.tiktok-1vsa65b-Wrapper.eh217d92 > div.tiktok-1jua48b-DivDiscoverContainer.e2h82qx2 {
  110. Display:none;
  111. }
  112. /*blugh*/
  113. .main-body.middle{
  114.     position:absolute;
  115.     top:-70px!important;
  116. }
  117.  [class~=side-bar-wrapper]{
  118.     position:absolute;
  119.     top:-15px!important;
  120. }
  121. /* misc 1*/
  122. h1, h2, h3, h4, h5, h6, p, ul {
  123.     background-image: none!important;
  124.     background-color: #000!important;
  125.     color: #808080!important;
  126.     text-shadow: none!important;
  127. }
  128. /*HEADER*/
  129. [class~=logo-link]{display:none!important;}
  130. [class~=search-container]{
  131.     position:absolute;
  132.     top:0px;
  133.     left:-670px
  134. }
  135. [class~=header-container]{
  136. top:-60px!important;
  137. }
  138. [class~=header-container], [class~=desktop-container]{
  139.     background-color: #000!important;
  140. }
  141. [class~=header-container], [class~=HeaderContainer]{
  142.     height:0px;
  143.     border-bottom: 1px solid #8080802e!important
  144. }
  145. [class~=e17na9cg0]{
  146.     background-color: #000!important;
  147. }
  148. [class~=header-content]{
  149.     position:absolute;
  150.     top:-40px;}
  151.  
  152. [class~=profile-card-container]{
  153.     background-color:black!important;
  154.     color:#808080;
  155.     border:solid 1px;
  156.     border-color:#8080804f!important;}
  157. [class~=text]{
  158.     color: #808080!important;
  159. }
  160. [class~=search-button-container]{
  161. filter:invert(1);
  162. }
  163. /* remove suggested sounds */
  164. [class~=hidden-bottom-line], [class~=discover-list-container], [class~=bottom-wrapper]{
  165.     display: none!important;
  166. }
  167.  
  168. /* remove App advert in bottom right corner */
  169. [class~=app-promotion] {
  170. display:none!important;
  171. }
  172. [class~=to-top]{
  173.     display:none!important;
  174. }
  175. a {
  176.     color: #a2a2a2!important;
  177.     transition: .4s ease-in-out;
  178. }
  179. a:hover {
  180.     color: #812100!important;
  181. }
  182. span {
  183.     color: #808080!important;
  184. }
  185. [class~=author-uniqueId]{
  186.     transition: .4s ease-in-out;
  187. }
  188. [class~=author-uniqueId]:hover{
  189.     color: #812100!important;
  190. }
  191. [class~=username]{
  192.     transition: .4s ease-in-out;
  193. }
  194. [class~=username]:hover{
  195.     color: #812100!important;
  196. }
  197. h4{
  198.     transition: .4s ease-in-out;
  199. }
  200. h4:hover{
  201.     color: #812100!important;
  202. }
  203. [class~=comment-post-outer-wrapper]{
  204.     border-radius:25px;
  205. }
  206. [class~=comment-input-outside-container]{
  207.     filter:invert(.065);
  208. }
  209. [class~=comment-post-outside-container]{
  210.     background:#171717b5!important;
  211.     margin: 0px 0px!important;
  212.     padding:0px 0px!important;
  213.     border-top: none!important;
  214. }
  215. [class~=post-container]{
  216.     color:#808080!important;
  217.     width:40px;
  218. }
  219. [class~=user-username]{
  220.     transition: .4s ease-in-out;
  221. }
  222. [class~=user-username]:hover{
  223.     color: #812100!important;
  224. }
  225. [class~=comment-container]{
  226.     background: #000!important;
  227. }
  228. /* comment like icons */
  229. img[src*="like"] {
  230.     filter: saturate(5);
  231. }
  232. img[src*="unlike"] {
  233. filter: brightness(5) saturate(0);
  234. }
  235. [class~=like-container] {
  236.     background: transparent!important;
  237. }
  238. .mentionSuggestions {
  239.     background: rgb(0, 0, 0);
  240.     border:solid 1px;
  241.     border-color:#8080804f!important;
  242. }
  243. [class~=tt-video-meta-caption]{
  244.     color:#808080!important;
  245. }
  246. [class~=user-item-container]{
  247.     border: 1px solid #66666630!important;
  248.     border-radius: 12px;
  249.     background: #000!important;
  250.     -webkit-transition: all 200ms;
  251.     transition: all 200ms;
  252. }
  253. [class~=user-item-container]:hover{
  254.     border: 1px solid transparent!important;
  255.     border-radius: 12px;
  256.     background: #2222227a!important;
  257.     -webkit-transition: all 200ms;
  258.     transition: all 200ms;
  259. }
  260. [class~=item-text]{
  261.     color:#acacac!important;
  262.     transition: .4s ease-in-out;
  263. }
  264. [class~=item-text]:hover{
  265.     color:#812100!important;
  266. }
  267. [class~=user-list-header]{
  268.     Display:none!important;
  269. }
  270. [class~=play-line] > div:nth-child(2), [class~=play-line] > div:nth-child(1){
  271.     color:#acacac9c;
  272. }
  273. [class~=like-icon]{
  274.     filter:invert(.5);
  275. }  
  276. }