Last active
January 13, 2022 20:05
-
-
Save bdombro/aa46122af1ac5977cf81fdbc2f833d25 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // This JS will switch FB messenger to dark theme | |
| var css = ` | |
| :root, .__fb-light-mode { | |
| --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: hsl(214, 100%, 59%); | |
| --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); | |
| --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; | |
| --blue-link: #4599FF; | |
| --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; | |
| --filter-accent: invert(40%) sepia(52%) saturate(200%) saturate(200%) saturate(200%) saturate(189%) hue-rotate(191deg) brightness(103%) contrast(102%); | |
| --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-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%); | |
| --glimmer-spinner-icon: white; | |
| --hero-banner-background: #E85D07; | |
| --hosted-view-selected-state: rgba(45, 136, 255, 0.1); | |
| --highlight-bg: rgba(24, 119, 242, .31); | |
| --hover-overlay: rgba(255, 255, 255, 0.1); | |
| --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; | |
| --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-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: #2374E1; | |
| --primary-button-pressed: #77A7FF; | |
| --primary-button-text: #FFFFFF; | |
| --primary-deemphasized-button-background: rgba(45, 136, 255, 0.2); | |
| --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: #2D88FF; | |
| --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: rgba(45, 136, 255, 0.2); | |
| --progress-ring-blue-foreground: hsl(214, 100%, 59%); | |
| --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); | |
| --surface-background: #242526; | |
| --text-highlight: rgba(24, 119, 242, 0.45); | |
| --toggle-active-background: rgb(45, 136, 255); | |
| --toggle-active-icon: #FFFFFF; | |
| --toggle-active-text: #FFFFFF; | |
| --toggle-button-active-background: #E6F2FF; | |
| --wash: #3E4042; | |
| --web-wash: #18191A; | |
| --warning: hsl(40, 89%, 52%); | |
| --fb-logo-color: #2D88FF; | |
| } | |
| body > div > div > div > div > div > div > div { | |
| top: 0 !important; | |
| min-height: 100vh !important; | |
| } | |
| ` | |
| var style = document.createElement('style'); | |
| style.innerHTML = css; | |
| document.head.appendChild(style); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment