Customizable dark and light theme for Instagram.
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
Details
Authorvednoc
LicenseMIT
Created
Updated
Categoryinstagram
Statistics
Learn how we calculate statistics in the FAQ.
Total views
Total installs
Weekly installs
Weekly updates
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==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 {
...