Skip to content

web.dev - FOUC fix for dark theme by pabli

Screenshot of web.dev - FOUC fix for dark theme
Write a review Install Get Stylus

Details

Authorpabli

LicenseMIT

Categoryweb.dev

Created

Updated

Size6.7 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         web.dev - 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/21451/web-dev-fouc-fix-for-dark-theme
@supportURL   https://userstyles.world/style/21451/web-dev-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("web.dev") {
	:root, body, html, section {
		color-scheme: dark !important;
		background-color: @bg !important;
	}
	:root {
		--webdev-background-gray: @bg !important;
		--webdev-background-gray-2: #3c4043 !important;
		--webdev-background-oficial-gray: @bg !important;
		--webdev-background-white: @bg !important;
		--webdev-background-true-white: #fff !important;
		--webdev-google-colors-blue-50: #185abc !important;
		--webdev-google-colors-blue-800: #4285f4 !important;
		--webdev-primary: #70b1ff !important;
		--webdev-text-text-1: @text !important;
		--webdev-text-text-2: @text-2 !important;
		--webdev-text-text-3: @text-2 !important;
		--webdev-illustration-colors-blue: #83bbff !important;
		--webdev-illustration-colors-gray: #ffa000 !important;
		--webdev-illustration-colors-green: #16d867 !important;
		--webdev-illustration-colors-red: #ff8080 !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-background: #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-button-background: #3c4043 !important;
		--devsite-button-background-hover: #394457 !important;
		--devsite-button-background-active: #465670 !important;
		--devsite-button-disabled-background: 0 !important;
		--devsite-button-disabled-color: #80868b !important;
		--devsite-button-primary-background-hover: #98bdf9 !important;
		--devsite-button-primary-background-active: #aecbfa !important;
		--devsite-button-raised-background: #3c4043 !important;
		--devsite-button-raised-background-hover: #394457 !important;
		--devsite-button-raised-background-active: #465670 !important;
		
		--devsite-code-background: #36373a !important;
		--devsite-code-color: #f1f3f4 !important;
		--devsite-compare-yes-color: #a8dab5 !important;
		--devsite-compare-no-color: #fa903e !important;
		--devsite-confidential-results-background: rgba(99, 95, 93, .5) !important;
		--devsite-search-results-breadcrumb-color: #81c995 !important;
		--devsite-steps-title-border-focus: 1px solid #669df6 !important;
		--devsite-steps-title-color: #669df6 !important;
	}
	devsite-code, devsite-content {
		--devsite-code-background: #36373a !important;
		--devsite-code-color: #f1f3f4 !important;
		--devsite-compare-yes-color: #a8dab5 !important;
		--devsite-compare-no-color: #fa903e !important;
		--devsite-confidential-results-background: rgba(99, 95, 93, .5) !important;
		--devsite-search-results-breadcrumb-color: #81c995 !important;
		--devsite-steps-title-border-focus: 1px solid #669df6 !important;
		--devsite-steps-title-color: #669df6 !important;
	}
}

Reviews

No reviews yet.