Customizable TikTok Theme
HOW TO INSTALL AND CUSTOMIZE THIS STYLE??
👉Using Stylus(this might be an outdated video, but this will guide you on how to use this style, you dont need to use beta version of stylus)
TikTok Darkmode+ by xyadx
Details
Authorxyadx
LicenseCC BY-NC
Categorytiktok
Created
Updated
Size28 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
🛈 Updated! This is a bit different from the old userstyle.
🛈Video controls have been taken out since TikTok already have this enabled.
🔘adding an image url should be inside a quotation marks "image url here" same with custom font
🔘Hover Player, pop the video out to the left when hover your mouse thru the thumbnails
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name TikTok Darkmode+
@namespace https://userstyles.world/user/xyadx
@version 20220000.2.5
@description `TikTok Darkmode+ by YAD`
@supportURL https://userstyles.world/style/289/tiktok-darkmode
@author YAD
@license NO-REDISTRIBUTION
@preprocessor stylus
@var select yadbgx 'Select Wallpaper' [
'Custom',
'Nebula',
'DeepSpace',
'Stars',
'SpacePunk',
'HelloKitty',
'Neon',
'Radeon',
'Cyberpunk',
]
@var text Custom 'Background Image' '" Image URL Here "'
@var color bgcyadix 'Background Color' #25232e
@var color headyadix 'Header Color' #25232e
@var color popyadix 'Pop/Drop/Window Menu' #343143
@var color accyadix 'Accent Color' #f10a55
@var color txtyadix 'Text / Icons' #fff
@var select yadfont 'Typeface' [
'Default',
'Silkscreen',
'Led Panel Station',
'Copperplate Gothic Light',
'Oswald',
'Special Elite',
'Comic Sans MS',
'Segoe Script',
'Zay',
'Decision Making',
'The Hand of Tes',
'Ink Free',
'Jura',
'Custom-Font',
]
@var text myfont 'Custom-Font' '" Font URL Here "'
@var checkbox txtsha "Text Shadow" 0
@var range videogrid 'Videos/Liked Thumbnail'[184,20,500,01,'px']
@var checkbox hoverplay "Hover Player" 0
@var number yadreco 'Recommended Live List'[4,1,10,01]
==/UserStyle== */
@-moz-document domain("tiktok.com") {
body
.main-body
[class*="DivBodyContainer"] [class*="DivLiveContentContainer"] [class*="DivLiveFeedPage"] {
background: var(--wallpa1)
}
body a {
color: #fff
}
body a:hover {
color: #61a1cf
}
[id="app"][style*="background-image:url"] {
background: bgcyadix!important
}
// logo
[data-e2e="tiktok-logo"] [fill="#000000"]
[id="svg-header-logo"] [fill="black"] {
fill:#fff
}
.logo-container .logo-link
.logo-container-drawer .logo-link
[class="logo-img"] [alt="TikTok Logo"]
[class="flex rtl:flex-row-reverse"] img
[src*="/logo-whole"] {
filter:invert(1)
}
[id="svg-header-logo"] [fill="#25F4EE"] {
fill: invert(accyadix) - 10%
}
// hamburger
.tiktok-header .hamburger-menu .hamburger-menu-wrapper span
.tiktok-header.transparent .hamburger-menu:not(.hamburger-menu-active) .hamburger-menu-wrapper span
.tiktok-header.transparent_with_border .hamburger-menu:not(.hamburger-menu-active) .hamburger-menu-wrapper span {
background: txtyadix!important
}
* {
font-family: yadfont !important;
color: txtyadix!important;
caret-color: accyadix + 20%!important;
text-shadow: 0 1px 4px #060202d4;
if txtsha == 0 {
text-shadow: 0 0 0
}
}
// font changer
@font-face {
font-family: Decision Making;
src: url("https://fonts.cdnfonts.com/s/83762/DecisionmakingRegular-L3WRW.woff");
}
@font-face {
font-family: Special Elite;
src: url("https://fonts.gstatic.com/s/specialelite/v18/XLYgIZbkc4JPUL5CVArUVL0ntnAOSA.woff2");
}
@font-face {
font-family: Silkscreen;
src: url(https://fonts.gstatic.com/s/silkscreen/v1/m8JXjfVPf62XiF7kO-i9YLNlaw.woff2);
}
@font-face {
font-family: Zay;
src: url(https://fonts.cdnfonts.com/s/81381/Zay.woff);
}
@font-face {
font-family: Led Panel Station;
src: url("https://fonts.cdnfonts.com/s/80091/Led Panel Station On.woff");
}
@font-face {
font-family: The Hand of Tes;
src: url("https://fonts.cdnfonts.com/s/79649/The Hand of Tes.woff");
}
@font-face {
font-family: Oswald;
src: url("https://fonts.gstatic.com/s/oswald/v49/TK3_WkUHHAIjg75cFRf3bXL8LICs13FvsUZiZQ.woff2");
}
@font-face {
font-family: Jura;
src: url("https://fonts.gstatic.com/s/jura/v24/z7NOdRfiaC4Vd8hhoPzfb5vBTP0D7ZumR_g.woff2");
}
@font-face {
font-family: Custom-Font;
src: url( myfont );
}
// navi
[class*="StyledTmpLink"] [fill*="rgba(22"] {
fill: #fff
}
.tiktok-header .menu-wrapper .menu-item-link a::after
[class*="DivTabsNavContainer"] [class*="DivTabInk"] {
background: var(--accyad)
}
[data-e2e*="nav"][class*="StyledTmpLink"] [fill*=" 85"]
[data-e2e*="nav"][class*="StyledTmpLink"] [fill*=" 59"]
[data-e2e*="nav"][class*="StyledTmpLink"] [fill*=" 92"] {
fill: var(--accyad)
}
[class*="-DivDiscoverItemContainer"]
[class*="-DivUpload "]
[class*="-DivScrollContainer-StyledScroll"] {
background: transparent
}
// header
[class*="tiktok-web-header"]
[class*="header-container white middle"]
[class*="header-container white"]
[class*="-DivHeaderContainer "]
.css-3a41nb
.tiktok-header,
.header-container,
.bg-neutral-50
.css-1b8asef {
background: var(--headyad)!important;
}
.css-3a41nb {
box-shadow: 0 0 0
}
// filter
[class*="DivBodyContainer"] [class*="DivMainContainer"] [class*="DivTabsContainer"] {
background: var(--bgcyad)
}
// search input
.css-121llc2
.search-container .search-input
[class*="DivSearchFormContainer"] [class*="search-input"] {
background: #0602021a;
box-shadow: 0 0 0 1px #dddddd0a
}
// ghost
.css-yi6z9::after
.css-vfauje::after {
background: transparent
}
// drop menu
[data-e2e="sug-container"],
.header-inbox.header-inbox .content-wrap /*upload*/
[class*="DivHeaderInboxContainer"] [class*="DivHeaderInboxWrapper"]/*live*/
[data-e2e="report-icon"][class*="IActionButton"] [class*="DivContainer"]
[data-e2e="share-icon"][class*="IActionButton"] [class*="DivContainer"]
[data-e2e="sug-container"][class*="-DivContainer"]
.search-container .sug-container
[class*="-DivContainer "][style*="background-color"] {
background: popyadix!important;
box-shadow: 0 2px 5px 2px #0602024d!important
}
[class*="content"] [class*="inner"][role="tooltip"]/*share*/ {
background: popyadix!important;
}
[class="tiktok-ftsest-DivHeaderInboxWrapper e18kkhh49"] {
background: popyadix;
box-shadow: 0 2px 5px 2px #0602024d;
}
// pop prof menu
[class*="DivKeyboardShortcutContainer"]/*shortcut*/
[data-e2e="user-card"][class*="DivUserCardContainer"]
[data-e2e="user-profile-card"]
[class*="DivFeedTabsWrapper"] [class*="DivFeedTabs"]/*live notch*/
[class*="DivProfileOuterContainer"] [class*="DivProfileContainer"] {
background: popyadix!important;
box-shadow: 0 2px 5px 2px #0602024d;
}
[class*="DivModalContainer"] [class*="DivContentContainer"]/*shortcut*/ {
background: transparent
}
// inbox capsule
.inbox-content-header .inbox-content-header span
.header-inbox .inbox-content-header span
[data-e2e="inbox-bar"] [class*="SpanGroupItem"] {
background: #06020226!important
}
.inbox-content-header span.selected {
background: #06020294!important
}
.notification-item .avatar img {
background: transparent
}
[data-e2e="inbox-bar"] [class*="xlvtk4"] {
background: #06020294!important
}
[class*="DivUnreadTipsContainer"] [class*="DivUnreadTipsContent"]/*older message*/ {
background: accyadix
}
// tagging
[class*="DivMentionSuggestionContainer"] [class*="DivContainer"]
[class*="DivMentionSuggestionContainer"] [class*="DivContainer"] [class*="DivItemBackground"] {
background: popyadix
}
[class*="DivMentionSuggestionContainer"] [class*="DivContainer"] [class*="DivItemBackground"]:hover {
background: #06020226
}
// comment
[class*="DivBodyContainer"] [class*="DivBrowserModeContainer"]
[class*="DivBrowserModeContainer"] [class*="DivCommentListContainer"]
[class*="DivBottomCommentContainer"]
[class*="DivCommentContainer"] {
background: var(--wallpa1)
}
[data-e2e="comment-input"][class*="DivInputAreaContainer"] {
background: #0602021a
}
// heart
[fill="#FE2C55"]
[data-e2e="browse-like-icon"] [fill*="rgba(254"]
[data-e2e="comment-like-icon"] [fill*="rgba"] {
fill: var(--accyad)
}
// pop reminder
[role="dialog"] [class*="DivLeaveModalContainer"] {
background: var(--bgcyad)
}
// report
[role="dialog"] [class*="DivFormBox"]
[class*="FormReport"] {
background: popyadix!important;
box-shadow: 0 2px 5px 2px #0602024d
}
[class*="DivRadioWrapper"] [class*="DivFooter"] {
background: popyadix;
}
[class*="DivUser"] [class*="UlUser"] {
background: popyadix;
box-shadow: 0 2px 5px 2px #0602024d
}
[class*="-UlUser "] [class*="-LiUser"]:hover
[class*="LabelRadio"]:hover {
background: #ffffff30
}
[placeholder="Search for user name"] {
background: #06020294;
border-radius: 22px;
padding: 10px
}
// experiment
[class*="tiktok-gnvmc3-Button"] {
background: var(--accyad)
}
[class*="tiktok-1svsmd8-Button"] {
box-shadow: 0 0 0 1px var(--accyad)
}
if hoverplay == 1 {
[mode="1"] [class*="DivBasicPlayerWrapper"]:not(hover) {
position: fixed;
display: inline-block!important;
top: 54%;
left: 13%;
transform: translate(-50% , -50%);
width: 390px;
height: auto;
z-index: 2000;
}
}
// buttons
.atsx-btn-primary
[class*="DivHeadActions"] [class*="Style...