Dark-Instagram by vednoc

Imported from https://gitlab.com/vednoc/dark-instagram/raw/master/instagram.user.styl

Mirrored from https://github.com/vednoc/dark-instagram/raw/master/instagram.user.styl

Dark-Instagram screenshot
Homepage Install Get Stylus Write a review

Details

Authorvednoc

LicenseMIT

Created

Updated

Categoryinstagram

Statistics

Learn how we calculate statistics in the FAQ.

Total views

Total installs

Weekly installs

Weekly updates

Description

Customizable dark and light theme for Instagram.

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name         Dark-Instagram
@namespace    gitlab.com/vednoc/dark-instagram
@description  Customizable dark and light theme for Instagram.
@author       vednoc <vednoc@pm.me> (https://gitlab.com/vednoc)
@homepageURL  https://gitlab.com/vednoc/dark-instagram
@supportURL   https://gitlab.com/vednoc/dark-instagram/issues
@preprocessor stylus
@version      2.9.3
@license      MIT

@var text     ui_font       'Custom UI font' '"font_name"'
@var text     emoji_font    'Custom emoji font' '"font_name"'
@var checkbox ic_invert     'Enable icon inversion in dark mode' 1
@var checkbox enable_cm_s   'Enable right-click context menu in stories' 1
@var checkbox enable_cm_p   '[Broken] Enable right-click context menu in posts' 1
@var checkbox enable_la     '[Broken] Enable removal of logged-out annoyances' 1
@var checkbox sb_width      'Scrollbar thin width' 1
@var select   sb_color      'Scrollbar colors' {
    'None         ': 'none',
    'Old default  ': 'old',
    'With accent *': 'new',
}

@var color    _dark      'Color: Primary background   ' #1f232a
@var color    _darken    'Color: Highlight background ' #252A33
@var color    _darker    'Color: Secondary background ' #333943
@var color    _light     'Color: Primary foreground   ' #e9e9e9
@var color    _lighter   'Color: Secondary foreground ' #a1a1a1
@var color    _accent    'Color: Accent               ' #7289da
@var color    _yellow    'Color: Yellow               ' #e5c512
@var color    _orange    'Color: Orange               ' #df4b16
@var color    _red       'Color: Red                  ' #dc322f
@var color    _magenta   'Color: Magenta              ' #f33682
@var color    _violet    'Color: Violet               ' #6c71c4
@var color    _blue      'Color: Blue                 ' #268bd2
@var color    _cyan      'Color: Cyan                 ' #2aa198
@var color    _green     'Color: Green                ' #859900
@var color    _white     'Color: White                ' #ffffff
@var color    _shadow    'Color: Shadow               ' #00000025
==/UserStyle== */

i       = !important
vendors = official

// Color mixin.
/// All colors: `c: fg1 bg5 bg1`
/// Only border-color: `c: 0 bg5`
c(x, y = 0, z = 0, xi = 1, yi = 1, zi = 1) {
    if x != 0 && x != '_' {            color: xi is 0 ? x : x i }
    if y != 0 && y != '_' {     border-color: yi is 0 ? y : y i }
    if z != 0 && z != '_' { background-color: zi is 0 ? z : z i }
}

// SVG colors.
v(x, y = 0, xi = 1, yi = 1) {
    if x != 0 && x != '_' {   fill: xi is 0 ? x : x i }
    if y != 0 && x != '_' { stroke: yi is 0 ? y : y i }
}

// HACK: Convert HEX to RGB.
to_rgb(input) {
    unquote(slice(s('%s', rgba(input, 0)), 5, -3))
}

// Border radius mixin.
rad() { border-radius: arguments }

@-moz-document regexp('^https?://(www\.)?instagram\.com(/.*)?$') {
    note ?= 'Switching @updateURL to https://userstyles.world platform!\A\A'
    note += '🌚 Dark-Instagram v2.9.3'

    /// Theme variables.
    *:not(#z) {
        --note      : note
        --bshadow   : 0 2px 4px var(--shadow);
        --t         : transparent i
        --avatar    : a_radius;
        --ui-font   : ui_font, -apple-system, BlinkMacSystemFont, 'Segoe UI',
            Roboto, Helvetica, Arial, Ubuntu, Cantarell, 'Noto Sans',
            var(--emoji-font), sans-serif;
        --emoji-font: emoji_font, 'joypixels', 'Apple Color Emoji',
            'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        --white     : _white;
        --dark      : _dark;
        --darken    : _darken;
        --darker    : _darker;
        --light     : _light;
        --lighter   : _lighter;
        --accent    : _accent;
        --shadow    : _shadow;
        --yellow    : _yellow;
        --orange    : _orange;
        --red       : _red;
        --magenta   : _magenta;
        --violet    : _violet;
        --blue      : _blue;
        --cyan      : _cyan;
        --green     : _green;

        /// RGB variables.
        --dark-rgb:    to_rgb(_dark);
        --darken-rgb:  to_rgb(_darken);
        --darker-rgb:  to_rgb(_darker);
        --light-rgb:   to_rgb(_light);
        --lighter-rgb: to_rgb(_lighter);
        --accent-rgb:  to_rgb(_accent);
        --shadow-rgb:  to_rgb(_shadow);
        --white-rgb:   to_rgb(_white);

        /// Old Instagram variables.
        --b6a: var(--darker-rgb);     /// Global border colors.
        --b38: var(--darker-rgb);     /// Profile border colors.
        --ce3: var(--darker-rgb);     /// Post border colors.
        --ca6: var(--darker-rgb);     /// Login border colors.
        --d87: var(--darken-rgb);     /// Highlighted background.
        --f23: var(--darken-rgb);     /// 'New Posts' button.
        --b3f: var(--dark-rgb);       /// Primary background.
        --i1d: var(--light-rgb);      /// Main text color.
        --f75: var(--light-rgb);      /// Primary text.
        --f52: var(--lighter-rgb);    /// Secondary text.
        --bb2: var(--darken-rgb);     /// Post placeholder.
        --f23: var(--dark-rgb);       /// Dialogs.
        --fe0: var(--accent-rgb);     /// Links.
        --d69: var(--accent-rgb);     /// Post/login button.
        --c37: var(--accent-rgb);     /// Notifications.
        --eca: var(--darken-rgb);     /// New feature alert.
        --jb7: var(--shadow-rgb);     /// Emoji menu shadow.
        --fa7: var(--darken-rgb);     /// New message user.
        --de5: var(--white-rgb);      /// Badge text color.

        /// New Instagram variables.
        --ig-link: var(--accent-rgb)                    // Link text.
        --ig-primary-text: to_rgb(_light)               // Main text.
        --ig-secondary-text: var(--lighter-rgb)         // Dimmed text.
        --ig-tertiary-text: var(--lighter-rgb)          // Tertiary text.
        --ig-text-on-color: var(--white-rgb)            // Text on color.
        --ig-text-on-media: var(--dark-rgb)             // Text on media.
        --ig-primary-background: var(--darken-rgb)      // Alt background.
        --ig-secondary-background: var(--dark-rgb)      // Main background.
        --ig-highlight-background: var(--darker-rgb)    // Highlighted background.
        --ig-elevated-background: var(--darken-rgb)     // Elevated background.
        --ig-elevated-separator: var(--darker-rgb)      // Navbar border color.
        --ig-primary-text: var(--light-rgb)             // Main text color.
        --ig-primary-button: var(--accent-rgb)          // Not yet sure.
        --ig-secondary-button: var(--light-rgb)         // Profile links.
        --ig-badge: var(--accent-rgb)                   // Notifications.
        --ig-separator: var(--darker-rgb)               // Global borders.
        --post-separator: var(--darker-rgb)             // Post borders.
        --ig-stroke: var(--darker-rgb)                  // Card borders.

        /// Feat -> Custom UI font.
        --font-family-system: var(--ui-font) i
    }

    /// Feat -> Scrollbars.
    /{
        /// Width.
        if (sb_width) {
            ::-webkit-scrollbar { width: 0.5em }
            * { scrollbar-width: thin }
        }

        /// Colors.
        if (sb_color == 'old') {
            html { scrollbar-color: #88888840 #88888815 }
            ::-webkit-scrollbar {
                c: 0 0 #88888815;
                &-thumb { c: 0 0 #88888840 }
            }
        } else if (sb_color == 'new') {
            html { scrollbar-color: var(--accent) #88888815 }
            ::-webkit-scrollbar {
                c: 0 0 #88888815;
                &-thumb { c: 0 0 var(--accent) }
            }
        }
    }

    // Overwrite existing Stylus-lang vars with CSS vars.
    bg      = var(--dark);
    hl      = var(--darken);
    bd      = var(--darker);
    fg      = var(--light);
    cm      = var(--lighter);
    ac      = var(--accent);
    sh      = var(--shadow);
    bsh     = var(--bshadow);
    yellow  = var(--yellow);
    orange  = var(--orange);
    red     = var(--red);
    magenta = var(--magenta);
    violet  = var(--violet);
    blue    = var(--blue);
    cyan    = var(--cyan);
    green   = var(--green);
    white   = var(--white);
    t       = var(--t);
    outer   = 0 0 0 1px bd;
    inner   = inset outer;

    /// Loader animation.
    @keyframes Loader {
          0% { background-position: 33%   0% }
         50% { background-position: 68% 100% }
        100% { background-position: 33%   0% }
    }

    // App styles.
    body {
        c: fg 0 bg;

        ::placeholder { c: cm }
        ::-webkit-input-placeholder { c: cm }

        /// Loading.
        &[style *= 'background: white'] {
            c: 0 0 bg;
            svg { fill: cm i }
        }

        /// 404 page.
        &[class *= 'error'], &[class *= '404'] {
            .top-bar {
                c: fg bd hl;
                if (ic_invert) {
                    .logo { filter: invert(0.8) i }
                }
            }
            a, strong { c: ac }
        }

        /// Icons.
        svg {
            &[fill = '#262626'] { fill: fg }
            &[fill = '#ffffff'] { fill: fg }
            &[fill = '#8e8e8e'] { fill: cm }
            &[fill = '#ed4956'] { fill: red }
            &[fill = '#0095f6'] { fill: blue }
            path {
                transition: fill-opacity 0.2s ease;
                ../:hover path { fill-opacity: 0.6 }
            }

            // Access: 2022-06-01 19:42:04.498724155 +0200
            // Modify: 2021-12-15 23:41:42.492488894 +0100
            // Change: 2021-12-15 23:41:42.492488894 +0100
            //  Birth: 2021-04-20 23:59:20.610118001 +0200
            // Default colors.
            &[fill="#8e8e8e"] {
                c: cm
                v: cm
            }

            // Hover colors.
            &[fill="#262626"] { c: fg }
        }

        /// Feat -> Icon inversion in dark mode.
        if (ic_invert) {
            .coreSprite {
                &LoggedOutWordmark,
                &MobileNavDirect,
                &TaggedNull {
                    filter: invert(0.8) i;
                }
                /// Modals -> Share menu.
                /[class *= 'SpriteDirect'],
                /[class *= 'SpriteFacebook'],
                /[class *= 'SpriteLink'],
                /[class *= 'SpriteMail'],
                /[class *= 'SpriteApp'],
                /[class *= 'Spritez'],
                /// Login -> Save login info.
                /[class *= 'SpriteKeyhole'],
                /// Profile -> Private.
                /[class *= 'SpriteLock_'],
                /// Profile -> Follow.
                /[class *= 'SpriteFriend_'],
                /// Profile -> Followers.
                /[class *= 'SpriteAdd_friend_'],
                /// Profile -> Options.
                /[class *= 'SpriteDropdownArrowGrey'],
                /// Profile -> Suggestions.
                /[class *= 'SpritePagingChevron'],
                /// Profile -> No posts.
                /[class *= 'SpriteCamera'],
                /// Profile -> IGTV icon.
                /[class *= 'SpriteProfileChannelNullState'],
                /// Settings -> Login activity.
                /[class *= 'SpriteLocation_'],
                /// Expore -> Leaflet info icon.
                /[class *= 'SpriteInfo__filled__16__grey'],
                /// Posts -> Load more messages.
                /[class *= 'SpriteCircle_add'] {
                    filter: invert(0.8) i;
                }
            }
            /// Default profile.
            /img[src *= '44884218_345707102882519_2446069589734326272'] {
                filter: invert(0.8) i;
            }
        }

        /// Login -> Links.
        ._2Lks6 { c: ac }

        /// Navbar -> Invert IG logo.
        if (ic_invert) {
            a[href='/'] > div > div  {
                > i[role='img'], img[src*='logo.png'] { filter: invert(0.8) }
            }

            // Login page.
            i[role='img'], img[src*='out_wordmark.png'] { filter: invert(0.8) }
        }

        /// Navbar -> Followers.
        .HZ802, .nHGTw {
            c: white 0 ac;
            .H9zXO::after { c: 0 0 ac }
            /.iMofo { box-shadow: 0 4px 16px sh i }
            [class *= 'Sprite'] + div > div { c: white }
        }

        /// Modals -> Tweak backdrop color.
        > [role = 'presentation'], > [role = 'dialog'] {
            background: unquote('rgba(var(--b3f), 0.8)') i;
        }

        /// Feat -> Remove logged-out annoyances.
        if (enable_la) {
            /.not-logged-in {
                /// Remove login/signup bar.
                .N9d2H { display: none i }
                /// Remove login/signup prompt.
                [style *= 'overflow: hidden'] {
                    overflow: unset i;
                    > [role = 'presentation'] { display: none i }
                }
            }
        }

        /// Search -> Hashtags | Sections.
        .LFGs8 { c: ac }
        .yQ0j1 { c: cm }

        /// Profile -> Avatar background.
        .M-jxE { &, > button { c: 0 0 hl }}

        /// Profile -> Private account alert.
        ._4Kbb_ {
            margin-top: 1rem;
            c: fg bd hl;
            /.hUQXy { &, &:visited { c: ac }}
        }

        /// Profile -> Empty profile alert.
        .jju9v {
            border: 1px solid bd;
            c: fg 0 hl;
        }

        /// Profile -> Following -> Hashtags.
        .hI7cq { c: fg }

        /// Profile -> Following -> List background.
        .isgrP > ul { c: 0 0 t }

        /// Settings -> Links.
        ._7LpC8 a, .rin8p { c: ac }

        /// Settings -> Fix borders | Profile -> Camera | Hashtags.
        .rb9ad, .-wdIA, .d-Vzv { c: 0 bd }

        /// Global -> Leaflet.
        .leaflet {
            /// Explore -> Locations.
            &-container {
                c: 0 0 hl;
                box-shadow: 0 1px bd;
                /// Invert map tiles.
                ../-tile { filter: invert(0.9) hue-rotate(180deg) i }
            }
            /// Settings -> Login activity.
            &-popup {
                &-content-wrapper, &-tip {
                    c: 0 0 hl;
                    box-shadow: 0 3px 14px sh;
                }
            }
        }

        /// Stories -> Reset 'Send message' area.
        .Sux9m {
            c: 0 #aaa #eee1
            --eca: var(--light-rgb)
            ::placeholder { c: #eee }
            ::-webkit-input-placeholder { c: #eee }
            + div [class*='glyphsSpriteDirect_'] { filter: invert(0.3) i }
        }

        /// Posts -> 'New Posts' button.
        .tCibT {
            border: 1px solid bd i;
            box-shadow: bsh i;
        }

        /// Posts -> 'Video has no sound' alert.
        /.R8iOs {
            border: 1px solid bd i
            c: fg 0 bg
            > * { color: inherit }

            /// Posts -> (Un)mute / Tagged button.
            /[role='button'] + span[class=''] > div[class], /.G_hoz { c: 0 0 bd }
        }

        /// Profile/Posts -> Related accounts.
        header + div, article + div {
            + div.GZkEI {
                /// Suggested accounts.
                li[style] > div > div > [role] { --d87: var(--dark-rgb) }
            }
        }

        /// Posts -> Invert loading image.
        if (ic_invert) {
            .WidCF, .HaS-3 {
                border-right: 1px solid bd;
                background-size: 200% 200% i;
                background: linear-gradient(115deg, bg 40%, hl, bg 60%);
                animation: Loader 2.5s ease infinite i;
                c: 0 0 hl;
            }
        }

        /// Posts -> Lightbox borders.
        [role = 'dialog'] {
            /body > ^[1..1] > ^[1..1] > ^[1..1] {
                border: 1px solid bd i;
                box-shadow: 0 0px 16px hl;
            }
            > article > header {
                overflow-x: hidden i;
                /// Post area background.
                + div { --jb7: var(--darken-rgb) }
            }
        }

        /// Posts -> Context menu borders.
        > [role = 'presentation'] {
            > [role = 'dialog'] > div { border: 1px solid bd i }
            /// Hover styles.
            button.aOOlW:not(.SRPMb) {
                &:hover, &:active { c: 0 0 hl }
            }
        }

        /// Posts -> Post pagination.
        article > header ~ div .WXPwG .Yi5aA { c: 0 0 white }

        /// Feat -> Enable right-click context menu in stories.
        if (enable_cm_s) {
            img, video {
                + div[style = 'height: 100%;'] {
                    position: unset i;
                    display: none i;
                }
            }
        }

        /// Feat -> Enable right-click context menu in posts.
        if (enable_cm_p) {
            /// Posts -> Images.
            ._9AhH0 { position: unset i }
            /// Posts -> Videos.
            /// NOTE: This will allow you to right-click on the bottom 40px.
            .PyenC, .fXIG0 { bottom: 40px i }
        }

        /// Posts -> Chevron buttons.
        ._a3gq ._aaqh { c: red 0 cm }

        /// Page -> Profiles directory.
        .GBPOY {
            rad: 3px;
            c: 0 bd hl;
            a { c: fg }
        }

        /// DMs -> Emoji menu.
        .uo5MA {
            &, > div:nth-child(1) {
                box-shadow: bsh i;
                border: 1px solid bd;
                c: 0 0 bg;
            }
            > div:nth-child(2) { c: 0 0 bg }
            > div:nth-child(3) { rad: 0 0 6px 6px }
            /// Navbar -> Follower suggestions.
            .DPiy6 { c: 0 0 t }
        }

        /// DMs -> Active chat.
        .QOqBd { c: 0 0 #8881 }

        /// DMs -> Input bar.
        /.X3a-9 { c: 0 0 bg }

        /// DMs -> Message bubbles.
        .CMoMH {
            &:not(._6FEQj) { c: 0 0 bg }
            &._6FEQj { c: 0 0 bd }
        }

        /// DMs -> Context menu items.
        [role='listbox'] [aria-hidden='false'] > {
            [style*='left: calc('] + div {
                --eca: var(--white-rgb) i
            }
        }

        /// Footer -> Sent message.
        .XjicZ {
            border-top: 1px solid bd;
            c: 0 0 hl;
            p { c: fg }
        }

        /// Footer.
        footer {
            width: 100% i
            margin: 0 auto i
            max-width: 935px i
            border-top: 1px solid bd i

            /// Settings -> Add whitespace between sections.
            /.XfvCs { margin-bottom: 30px i }

            /// Add userstyle information.
            > div::after {
                content: var(--note)
                white-space: pre-wrap
                text-align: center
                margin-top: 1rem
            }
        }
    }
}

Reviews

No reviews yet.