Skip to content

Chrome for Developers - FOUC fix for dark theme by pabli

Screenshot of Chrome for Developers - FOUC fix for dark theme
Write a review Install Get Stylus

Details

Authorpabli

LicenseMIT

Categorydeveloper.chrome.com

Created

Updated

Size7.6 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

No more white flash before dark theme loads. You should also enable 'Instant inject mode' in the stylus options.

Notes

Source code

/* ==UserStyle==
@name         Chrome for Developers - FOUC fix for dark theme
@description  No more white flash before dark theme loads. You should also enable 'Instant inject mode' in the stylus options.
@version      1.0.0
@author       Pabli (https://github.com/pabli24)
@namespace    https://github.com/pabli24
@homepageURL  https://userstyles.world/style/21450/chrome-for-developers-fouc-fix-for-dark-theme
@supportURL   https://userstyles.world/style/21450/chrome-for-developers-fouc-fix-for-dark-theme
@license      MIT
@preprocessor less

@var color    bg     "Background" #202124
@var color    text   "Text"       #f8f9fa
@var color    text-2 "Text 2"     #afb2b6

==/UserStyle== */
@-moz-document domain("developer.chrome.com") {
	:root, body, html, section {
		color-scheme: dark !important;
		background-color: @bg !important;
	}
	:root {
		--chrome-background-gray: @bg !important;
		--chrome-background-gray-2: #3c4043 !important;
		--chrome-background-oficial-gray: #3c4043 !important;
		--chrome-background-white: @bg !important;
		--chrome-google-colors-blue-50: #185abc !important;
		--chrome-google-colors-blue-800: #4285f4 !important;
		--chrome-illustration-colors-blue: #83bbff !important;
		--chrome-illustration-colors-yellow: #ffa000 !important;
		--chrome-illustration-colors-green: #16d867 !important;
		--chrome-illustration-colors-red: #ff8080 !important;
		--chrome-primary: #70b1ff !important;
		--chrome-text-text-1: @text !important;
		--chrome-text-text-2: @text-2 !important;
		--chrome-text-text-3: @text-2 !important;
		
		--devsite-heading-color: #e8eaed !important;
		--devsite-input-border: 1px solid #5f6368 !important;
		--devsite-button-background-hover: #3c4043 !important;
		--devsite-button-background-active: #394457 !important;
		--devsite-button-border: 1px solid #5f6368 !important;
		--devsite-button-border-hover: 1px solid #3c4043 !important;
		--devsite-button-border-active: 1px solid #394457 !important;
		--devsite-button-disabled-background: 0 !important;
		--devsite-button-disabled-border: 1px solid #3c4043 !important;
		--devsite-button-primary-background: #8ab4f8 !important;
		--devsite-button-primary-background-hover: #98bdf9 !important;
		--devsite-button-primary-background-active: #aecbfa !important;
		--devsite-background-button-primary-background-hover: #3c3e43 !important;
		--devsite-button-white-background-hover: #3c4043 !important;
		--devsite-button-white-background-active: #394457 !important;
		--devsite-button-raised-background: #3c4043 !important;
		--devsite-button-raised-background-hover: #394457 !important;
		--devsite-button-raised-background-active: #465670 !important;
		--devsite-nav-active-color: #8ab4f8 !important;
		
		--devsite-background-0: @bg !important;
		--devsite-background-1: #2a2b2e !important;
		--devsite-background-2: #303134 !important;
		--devsite-background-3: #36373a !important;
		--devsite-background-4: #38393c !important;
		--devsite-background-5: #3c3d40 !important;
		--devsite-primary-text-color: #e8eaed !important;
		--devsite-primary-text-rgba: rgba(232,234,237,.87) !important;
		--devsite-secondary-text-color: #9aa0a6 !important;
		--devsite-secondary-text-rgba: rgba(232,234,237,.65) !important;
		--devsite-tertiary-text-color: #5f6368 !important;
		--devsite-tertiary-text-rgba: rgba(232,234,237,.26) !important;
		--devsite-inverted-text-color: @bg !important;
		--devsite-inverted-text-color-hover: rgba(0,0,0,.65) !important;
		--devsite-inverted-text-rgba: rgba(0,0,0,.65) !important;
		--devsite-primary-border: 1px solid #5f6368 !important;
		--devsite-secondary-border: 1px solid #3c4043 !important;
		--devsite-elevation-key-shadow-color: rgba(0,0,0,.3) !important;
		--devsite-elevation-ambient-shadow-color: rgba(0,0,0,.15) !important;
		--devsite-elevation-inset-shadow-color: rgba(0,0,0,.5) !important;
		--tenant-background-1: #2a2b2e !important;
		--tenant-background-2: #303134 !important;
		--tenant-background-3: #36373a !important;
		--tenant-primary-text-color: #e8eaed !important;
		--tenant-secondary-text-color: #9aa0a6 !important;
		--tenant-inverted-text-color: @bg !important;
		--tenant-primary-border: 1px solid #5f6368 !important;
		--tenant-secondary-border: 1px solid #3c4043 !important;
		--devsite-link-background: #393c42 !important;
		--devsite-link-background-active: #3c3e43 !important;
		--devsite-link-color: #8ab4f8 !important;
		--devsite-contrast-link-color: #8ab4f8 !important;
		--devsite-button-color: #8ab4f8 !important;
		--devsite-button-primary-color: @bg !important;
		--devsite-banner-archived-background: @bg !important;
		--devsite-banner-archived-color: #401c1f !important;
		--devsite-banner-confidential-background: #a59d97 !important;
		--devsite-banner-confidential-color: #3b1d20 !important;
		--devsite-banner-deprecated-background: #a5a195 !important;
		--devsite-banner-deprecated-color: #3b1d20 !important;
		--devsite-darkmode-image-filter: grayscale(50%) !important;
		--devsite-caution-notice-background: #a59d97 !important;
		--devsite-caution-notice-border-color: transparent !important;
		--devsite-caution-notice-color: #3d1e20 !important;
		--devsite-key-point-notice-background: #989aa2 !important;
		--devsite-key-point-notice-border-color: transparent !important;
		--devsite-key-point-notice-color: #262b41 !important;
		--devsite-key-term-notice-background: #9f98a6 !important;
		--devsite-key-term-notice-border-color: transparent !important;
		--devsite-key-term-notice-color: #37254b !important;
		--devsite-note-notice-background: #989da7 !important;
		--devsite-note-notice-border-color: transparent !important;
		--devsite-note-notice-color: #23273d !important;
		--devsite-status-notice-background: #9d9fa1 !important;
		--devsite-status-notice-border-color: transparent !important;
		--devsite-status-notice-color: #2a3035 !important;
		--devsite-success-notice-background: #939e9f !important;
		--devsite-success-notice-border-color: transparent !important;
		--devsite-success-notice-color: #1a3332 !important;
		--devsite-warning-notice-background: #a49898 !important;
		--devsite-warning-notice-border-color: transparent !important;
		--devsite-warning-notice-color: #3b1d20 !important;
		--devsite-scrollbar-thumb-background: hsla(0,0%,100%,.7) !important;
		
		--devsite-code-background: #36373a !important;
		--devsite-code-buttons-color: hsla(0,0%,100%,.7) !important;
		--devsite-code-buttons-hover: #fff !important;
		--devsite-code-buttons-toggle-dark-display: none !important;
		--devsite-code-buttons-toggle-light-display: none !important;
		--devsite-code-color: #f1f3f4 !important;
		--devsite-code-comments-color: #ff8bcb !important;
		--devsite-code-keywords-color: #78d9ec !important;
		--devsite-code-numbers-color: #fbbc04 !important;
		--devsite-code-strings-color: #9ccc65 !important;
		--devsite-code-types-color: #d7aefb !important;
		--devsite-var-color: #ff8bcb !important;
	}
	devsite-code, devsite-content {
		--devsite-code-background: #36373a !important;
		--devsite-code-buttons-color: hsla(0,0%,100%,.7) !important;
		--devsite-code-buttons-hover: #fff !important;
		--devsite-code-buttons-toggle-dark-display: none !important;
		--devsite-code-buttons-toggle-light-display: none !important;
		--devsite-code-color: #f1f3f4 !important;
		--devsite-code-comments-color: #ff8bcb !important;
		--devsite-code-keywords-color: #78d9ec !important;
		--devsite-code-numbers-color: #fbbc04 !important;
		--devsite-code-strings-color: #9ccc65 !important;
		--devsite-code-types-color: #d7aefb !important;
		--devsite-var-color: #ff8bcb !important;
	}
}

Reviews

No reviews yet.