Adds support for device dark mode
Facebook System Dark Mode jxduran by jxduran
Details
Authorjxduran
LicenseNo License
Categoryfacebook.com
Created
Updated
Size20 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
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 Facebook System Dark Mode jxduran
@namespace github.com/openstyles/stylus
@version 1.0.1
@description Adds support for device dark mode
@author jxduran
==/UserStyle== */
@-moz-document domain("facebook.com") {
.__fb-light-mode {
@media(prefers-color-scheme:dark) {
--fds-black:black;
--fds-black-alpha-05:rgba(0, 0, 0, 0.05);
--fds-black-alpha-10:rgba(0, 0, 0, 0.1);
--fds-black-alpha-15:rgba(0, 0, 0, 0.15);
--fds-black-alpha-20:rgba(0, 0, 0, 0.2);
--fds-black-alpha-30:rgba(0, 0, 0, 0.3);
--fds-black-alpha-40:rgba(0, 0, 0, 0.4);
--fds-black-alpha-50:rgba(0, 0, 0, 0.5);
--fds-black-alpha-60:rgba(0, 0, 0, 0.6);
--fds-black-alpha-80:rgba(0, 0, 0, 0.8);
--fds-blue-05:black;
--fds-blue-30:black;
--fds-blue-40:black;
--fds-blue-60:black;
--fds-blue-70:black;
--fds-blue-80:black;
--fds-button-text:black;
--fds-comment-background:black;
--fds-dark-mode-gray-35:black;
--fds-dark-mode-gray-50:black;
--fds-dark-mode-gray-70:black;
--fds-dark-mode-gray-80:black;
--fds-dark-mode-gray-90:black;
--fds-dark-mode-gray-100:black;
--fds-gray-00:black;
--fds-gray-05:black;
--fds-gray-10:black;
--fds-gray-20:black;
--fds-gray-25:black;
--fds-gray-30:black;
--fds-gray-45:black;
--fds-gray-70:black;
--fds-gray-80:black;
--fds-gray-90:black;
--fds-gray-100:black;
--fds-green-55:black;
--fds-highlight:black;
--fds-highlight-cell-background:black;
--fds-primary-icon:white;
--fds-primary-text:white;
--fds-red-55:black;
--fds-soft:cubic-bezier(.08,.52,.52,1);
--fds-spectrum-aluminum-tint-70:black;
--fds-spectrum-blue-gray-tint-70:black;
--fds-spectrum-cherry:black;
--fds-spectrum-cherry-tint-70:black;
--fds-spectrum-grape-tint-70:black;
--fds-spectrum-grape-tint-90:black;
--fds-spectrum-lemon-dark-1:black;
--fds-spectrum-lemon-tint-70:black;
--fds-spectrum-lime:black;
--fds-spectrum-lime-tint-70:black;
--fds-spectrum-orange-tint-70:black;
--fds-spectrum-orange-tint-90:black;
--fds-spectrum-seafoam-tint-70:black;
--fds-spectrum-slate-dark-2:black;
--fds-spectrum-slate-tint-70:black;
--fds-spectrum-teal:black;
--fds-spectrum-teal-dark-1:black;
--fds-spectrum-teal-dark-2:black;
--fds-spectrum-teal-tint-70:black;
--fds-spectrum-teal-tint-90:black;
--fds-spectrum-tomato:black;
--fds-spectrum-tomato-tint-30:black;
--fds-spectrum-tomato-tint-90:black;
--fds-strong:cubic-bezier(.12,.8,.32,1);
--fds-white:black;
--fds-white-alpha-05:rgba(255, 255, 255, 0.05);
--fds-white-alpha-10:rgba(255, 255, 255, 0.1);
--fds-white-alpha-20:rgba(255, 255, 255, 0.2);
--fds-white-alpha-30:rgba(255, 255, 255, 0.3);
--fds-white-alpha-40:rgba(255, 255, 255, 0.4);
--fds-white-alpha-50:rgba(255, 255, 255, 0.5);
--fds-white-alpha-60:rgba(255, 255, 255, 0.6);
--fds-white-alpha-80:rgba(255, 255, 255, 0.8);
--fds-yellow-20:black;
--accent:#0866FF;
--always-white:white;
--always-black:black;
--always-dark-gradient:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6));
--always-dark-overlay:rgba(0, 0, 0, 0.4);
--always-light-overlay:rgba(255, 255, 255, 0.4);
--always-gray-40:#65676B;
--always-gray-75:#BCC0C4;
--always-gray-95:#F0F2F5;
--attachment-footer-background:rgba(255,255,255,0.1);
--background-deemphasized:rgba(255,255,255,0.1);
--badge-background-color-blue:var(--accent);
--badge-background-color-dark-gray:var(--secondary-icon);
--badge-background-color-gray:var(--disabled-icon);
--badge-background-color-green:var(--positive);
--badge-background-color-light-blue:var(--highlight-bg);
--badge-background-color-red:var(--notification-badge);
--badge-background-color-yellow:var(--base-lemon);
--base-blue:#1877F2;
--base-cherry:#F3425F;
--base-grape:#9360F7;
--base-lemon:#F7B928;
--base-lime:#45BD62;
--base-pink:#FF66BF;
--base-seafoam:#54C7EC;
--base-teal:#2ABBA7;
--base-tomato:#FB724B;
--text-badge-info-background:hsl(214, 100%, 59%);
--text-badge-success-background:#31A24C;
--text-badge-attention-background:hsl(40, 89%, 52%);
--text-badge-critical-background:#e41e3f;
--blue-link:#5AA7FF;
--border-focused:#8A8D91;
--card-background:#242526;
--card-background-flat:#323436;
--comment-background:#3A3B3C;
--comment-footer-background:#4E4F50;
--dataviz-primary-1:rgb(48,200,180);
--disabled-button-background:rgba(255, 255, 255, 0.2);
--disabled-button-text:rgba(255, 255, 255, 0.3);
--disabled-icon:rgba(255, 255, 255, 0.3);
--disabled-text:rgba(255, 255, 255, 0.3);
--divider:#3E4042;
--event-date:#F3425F;
--fb-wordmark:#FFFFFF;
--fb-logo:#0866FF;
--filter-accent:invert(74%) sepia(14%) saturate(7129%) hue-rotate(185deg) brightness(102%) contrast(101%);
--filter-always-white:invert(100%);
--filter-disabled-icon:invert(100%) opacity(30%);
--filter-placeholder-icon:invert(59%) sepia(11%) saturate(200%) saturate(135%) hue-rotate(176deg) brightness(96%) contrast(94%);
--filter-primary-accent:invert(27%) sepia(95%) saturate(3116%) hue-rotate(212deg) brightness(99%) contrast(105%);
--filter-primary-icon:invert(89%) sepia(6%) hue-rotate(185deg);
--filter-secondary-icon:invert(62%) sepia(98%) saturate(12%) hue-rotate(175deg) brightness(90%) contrast(96%);
--filter-warning-icon:invert(77%) sepia(29%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(128%) hue-rotate(359deg) brightness(102%) contrast(107%);
--filter-blue-link-icon:invert(73%) sepia(29%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(103.25%) hue-rotate(189deg) brightness(101%) contrast(101%);
--filter-positive:invert(37%) sepia(61%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(115%) hue-rotate(91deg) brightness(97%) contrast(105%);
--filter-negative:invert(25%) sepia(33%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(110%) hue-rotate(345deg) brightness(132%) contrast(96%);
--focus-ring-blue:#1D85FC;
--glimmer-spinner-icon:white;
--hero-banner-background:#E85D07;
--hosted-view-selected-state:#1D85FC19;
--highlight-bg:rgba(24, 119, 242, .31);
--hover-overlay:rgba(255, 255, 255, 0.1);
--inverse-text:var(--always-white);
--list-cell-chevron:#B0B3B8;
--media-hover:rgba(68, 73, 80, 0.15);
--media-inner-border:rgba(255, 255, 255, 0.05);
--media-outer-border:#33363A;
--media-pressed:rgba(68, 73, 80, 0.35);
--messenger-card-background:#242526;
--mwp-header-background-color:var(--messenger-card-background);
--mwp-header-button-color:var(--accent);
--mwp-message-row-background:var(--messenger-card-background);
--messenger-reply-background:#18191A;
--overlay-alpha-80:rgba(11, 11, 11, 0.8);
--overlay-on-media:rgba(0, 0, 0, 0.6);
--nav-bar-background:#242526;
--nav-bar-background-gradient:linear-gradient(to top, #242526, rgba(36,37,38,.9), rgba(36,37,38,.7), rgba(36,37,38,.4), rgba(36,37,38,0));
--nav-bar-background-gradient-wash:linear-gradient(to top, #18191A, rgba(24,25,26,.9), rgba(24,25,26,.7), rgba(24,25,26,.4), rgba(24,25,26,0));
--negative:hsl(350, 87%, 55%);
--negative-background:hsl(350, 87%, 55%, 20%);
--new-notification-background:#E7F3FF;
--non-media-pressed:rgba(68, 73, 80, 0.15);
--non-media-pressed-on-dark:rgba(255, 255, 255, 0.3);
--notification-badge:#e41e3f;
--placeholder-icon:#8A8D91;
--placeholder-image:rgb(164, 167, 171);
--placeholder-text:#8A8D91;
--placeholder-text-on-media:rgba(255, 255, 255, 0.5);
--popover-background:#3E4042;
--positive:#31A24C;
--positive-background:#1F3520;
--press-overlay:rgba(255, 255, 255, 0.1);
--primary-button-background:#0866FF;
--primary-button-icon:#FFFFFF;
--primary-button-pressed:#77A7FF;
--primary-button-text:#FFFFFF;
--primary-deemphasized-button-background:#1D85FC33;
--primary-deemphasized-button-pressed:rgba(24, 119, 242, 0.2);
--primary-deemphasized-button-pressed-overlay:rgba(25, 110, 255, 0.15);
--primary-deemphasized-button-text:#75B6FF;
--primary-icon:#E4E6EB;
--primary-text:#E4E6EB;
--primary-text-on-media:white;
--primary-web-focus-indicator:#D24294;
--progress-ring-neutral-background:rgba(255, 255, 255, 0.2);
--progress-ring-neutral-foreground:#ffffff;
--progress-ring-on-media-background:rgba(255, 255, 255, 0.2);
--progress-ring-on-media-foreground:#FFFFFF;
--progress-ring-blue-background:#0866FF33;
--progress-ring-blue-foreground:#0866FF;
--progress-ring-disabled-background:rgba(122,125,130, 0.2);
--progress-ring-disabled-foreground:#7A7D82;
--rating-star-active:#FF9831;
--scroll-thumb:rgba(255, 255, 255, 0.3);
--scroll-shadow:0 1px 2px rgba(0, 0, 0, 0.1), 0 -1px rgba(255, 255, 255, 0.05) inset;
--secondary-button-background:rgba(255,255,255,.1);
--secondary-button-background-floating:#4B4C4F;
--secondary-button-background-on-dark:rgba(255, 255, 255, 0.4);
--secondary-button-pressed:rgba(0, 0, 0, 0.05);
--secondary-button-stroke:transparent;
--secondary-button-text:#E4E6EB;
--secondary-icon:#B0B3B8;
--secondary-text:#B0B3B8;
--secondary-text-on-media:rgba(255, 255, 255, 0.9);
--section-header-text:#BCC0C4;
--shadow-1:rgba(0, 0, 0, 0.1);
--shadow-2:rgba(0, 0, 0, 0.2);
--shadow-5:rgba(0, 0, 0, 0.5);
--shadow-8:rgba(0, 0, 0, 0.8);
--shadow-inset:rgba(255, 255, 255, 0.05);
--shadow-elevated:0 8px 20px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
--shadow-persistent:0px 0px 12px rgba(28, 43, 51, 0.6);
--shadow-primary:0px 0px 12px rgba(28, 43, 51, 0.1);
--surface-background:#242526;
--switch-active:hsl(214, 100%, 59%);
--text-highlight:#1D85FC72;
--input-background:#242526;
--input-background-disabled:#18191A;
--inpu...