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. }