Skip to content

TikTok Darkmode+ by xyadx

Screenshot of TikTok Darkmode+

Details

Authorxyadx

LicenseCC BY-NC

Categorytiktok

Created

Updated

Size28 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

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)

Buy Me a ☕

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

Reviews

No reviews yet.