Skip to content

stackexchange dark mode by forivall

Details

Authorforivall

LicenseCC Zero

Categorystackexchange,stackoverflow

Created

Updated

Size17 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A new userstyle

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           stackexchange dark mode
@namespace      github.com/openstyles/stylus
@version        1.0.1
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document domain("stackexchange.com"), domain("unix.stackexchange.com"), domain("serverfault.com"), domain("meta.stackoverflow.com") {

.site-header::before {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 5.1em;
  background-image: radial-gradient(60% 150% at 10% 0, hsla(210,9%,91.5%, 0.4),  hsla(210,9%,91.5%, 0) 68%);
  max-width: unset;
}
  
img[src="https://cdn.sstatic.net/stackexchange/Img/panda-huh.jpg?v=982c22648d95"] + * {
  color: black;
}
  
body:not(.theme-light__forced):not(.theme-light__forced),
body.unified-theme:not(.theme-light__forced):not(.theme-light__forced),
body.unified-theme:not(.theme-light__forced):not(.theme-light__forced) * {
    --white: hsl(0,0%,17.5%);
    --black: hsl(0,0%,100%);
    --black-025: hsl(0,0%,22.5%);
    --black-050: hsl(0,0%,24%);
    --black-075: hsl(210,4%,26%);
    --black-100: hsl(210,4.5%,30.5%);
    --black-150: hsl(210,5%,35%);
    --black-200: hsl(210,5.5%,43.5%);
    --black-300: hsl(210,6.5%,52%);
    --black-350: hsl(210,7%,61%);
    --black-400: hsl(210,8%,65%);
    --black-500: hsl(210,8%,70%);
    --black-600: hsl(210,7%,78.5%);
    --black-700: hsl(210,8%,82.5%);
    --black-750: hsl(210,9%,86.5%);
    --black-800: hsl(210,9%,91.5%);
    --black-900: hsl(210,4%,95%);
    --orange-050: hsl(27,16.5%,23.9%);
    --orange-100: hsl(27,30%,28.4%);
    --orange-200: hsl(27,50%,36.9%);
    --orange-300: hsl(27,70%,47.3%);
    --orange-400: hsl(27,90.5%,54.9%);
    --orange-500: hsl(27,100%,59%);
    --orange-600: hsl(27,100%,68.4%);
    --orange-700: hsl(27,89.5%,74.1%);
    --orange-800: hsl(27,92%,85.7%);
    --orange-900: hsl(27,95%,91.8%);
    --blue-050: hsl(206,40%,23%);
    --blue-100: hsl(206,44%,26%);
    --blue-200: hsl(206,46%,30%);
    --blue-300: hsl(206,53%,35%);
    --blue-400: hsl(209,56%,43%);
    --blue-500: hsl(206,64%,51%);
    --blue-600: hsl(206,100%,60%);
    --blue-700: hsl(206,90%,74%);
    --blue-800: hsl(206,95%,86%);
    --blue-900: hsl(206,91%,91.5%);
    --powder-050: hsl(205,5%,27%);
    --powder-100: hsl(205,14%,28%);
    --powder-200: hsl(205,17.5%,32%);
    --powder-300: hsl(205,19.5%,37%);
    --powder-400: hsl(205,22.5%,44%);
    --powder-500: hsl(205,29%,54%);
    --powder-600: hsl(205,50%,65.5%);
    --powder-700: hsl(205,46.5%,73.5%);
    --powder-800: hsl(205,49.5%,87%);
    --powder-900: hsl(205,100%,95%);
    --green-025: hsl(140,18%,22%);
    --green-050: hsl(140,18%,25%);
    --green-100: hsl(140,22.5%,31%);
    --green-200: hsl(140,23.5%,37%);
    --green-300: hsl(140,25%,40.5%);
    --green-400: hsl(140,27.5%,48.5%);
    --green-500: hsl(140,35%,54.5%);
    --green-600: hsl(140,40%,61.5%);
    --green-700: hsl(140,39.5%,69.5%);
    --green-800: hsl(140,39.5%,78.5%);
    --green-900: hsl(140,38%,86.5%);
    --yellow-050: hsl(47,13%,24.5%);
    --yellow-100: hsl(47,19%,27%);
    --yellow-200: hsl(47,30.5%,31%);
    --yellow-300: hsl(47,37%,36%);
    --yellow-400: hsl(47,45.5%,42.5%);
    --yellow-500: hsl(47,55.5%,48%);
    --yellow-600: hsl(47,67.5%,55.5%);
    --yellow-700: hsl(47,84.5%,64%);
    --yellow-800: hsl(47,90%,72.5%);
    --yellow-900: hsl(47,93%,83.5%);
    --red-025: hsl(1,10%,24%);
    --red-050: hsl(1,30%,26.5%);
    --red-100: hsl(1,35%,33%);
    --red-200: hsl(1,37%,38.5%);
    --red-300: hsl(1,39%,43.5%);
    --red-400: hsl(1,42%,49%);
    --red-500: hsl(1,50%,54%);
    --red-600: hsl(1,56.5%,59.5%);
    --red-700: hsl(1,62.5%,65.5%);
    --red-800: hsl(1,64%,74%);
    --red-900: hsl(1,65.5%,85.5%);
    --gold: hsl(48,100%,50%);
    --gold-lighter: hsl(48,22%,30%);
    --gold-darker: hsl(45,100%,47%);
    --silver: hsl(210,6%,72%);
    --silver-lighter: hsl(0,0%,26%);
    --silver-darker: hsl(210,3%,61%);
    --bronze: hsl(28,38%,67%);
    --bronze-lighter: hsl(28,13%,27%);
    --bronze-darker: hsl(28,31%,52%);
    --bc-lightest: var(--black-025);
    --bc-lighter: var(--black-050);
    --bc-light: var(--black-075);
    --bc-medium: var(--black-100);
    --bc-dark: var(--black-150);
    --bc-darker: var(--black-200);
    --fc-dark: var(--black-900);
    --fc-medium: var(--black-700);
    --fc-light: var(--black-500);
    --focus-ring-success: hsla(140,40%,75%,0.4);
    --focus-ring-warning: hsla(47,79%,58%,0.4);
    --focus-ring-error: hsla(358,62%,52%,0.3);
    --focus-ring-muted: hsla(0,0%,100%,0.1);
    --_o-disabled: .5;
    --_o-disabled-static: .5;
    --bs-sm: 0 1px 2px hsla(0,0%,0%,0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.1);
    --bs-md: 0 1px 3px hsla(0,0%,0%,0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
    --bs-lg: 0 1px 4px hsla(0,0%,0%,0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
    --bs-xl: 0 10px 24px hsla(0,0%,0%,0.1), 0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
    --scrollbar: hsla(0,0%,100%,0.2);
    --highlight-bg: hsl(0,2%,11%);
    --highlight-color: var(--black);
    --highlight-comment: hsl(0,0%,60%);
    --highlight-punctuation: hsl(0,0%,80%);
    --highlight-namespace: hsl(27,85%,61.5%);
    --highlight-attribute: hsl(207,41.5%,67%);
    --highlight-literal: hsl(27,85%,61.5%);
    --highlight-symbol: hsl(306,43%,69%);
    --highlight-keyword: hsl(208,41.5%,67%);
    --highlight-variable: hsl(65.5,39%,57.5%);
    --highlight-addition: var(--green-600);
    --highlight-deletion: var(--red-700)
}

body:not(.theme-light__forced):not(.theme-light__forced),
body.unified-theme:not(.theme-light__forced):not(.theme-light__forced),
body.unified-theme:not(.theme-light__forced):not(.theme-light__forced) * {
    color: var(--theme-body-font-color);
    --theme-primary-color-h: var(--theme-dark-primary-color-h, var(--theme-base-primary-color-h));
    --theme-primary-color-s: var(--theme-dark-primary-color-s, var(--theme-base-primary-color-s));
    --theme-primary-color-l: var(--theme-dark-primary-color-l, var(--theme-base-primary-color-l));
    --theme-primary-color-r: var(--theme-dark-primary-color-r, var(--theme-base-primary-color-r));
    --theme-primary-color-g: var(--theme-dark-primary-color-g, var(--theme-base-primary-color-g));
    --theme-primary-color-b: var(--theme-dark-primary-color-b, var(--theme-base-primary-color-b));
    --theme-secondary-color-h: var(--theme-dark-secondary-color-h, var(--theme-base-secondary-color-h));
    --theme-secondary-color-s: var(--theme-dark-secondary-color-s, var(--theme-base-secondary-color-s));
    --theme-secondary-color-l: var(--theme-dark-secondary-color-l, var(--theme-base-secondary-color-l));
    --theme-secondary-color-r: var(--theme-dark-secondary-color-r, var(--theme-base-secondary-color-r));
    --theme-secondary-color-g: var(--theme-dark-secondary-color-g, var(--theme-base-secondary-color-g));
    --theme-secondary-color-b: var(--theme-dark-secondary-color-b, var(--theme-base-secondary-color-b));
    --theme-primary-color: hsl(var(--theme-primary-color-h), var(--theme-primary-color-s), var(--theme-primary-color-l));
    --theme-secondary-color: hsl(var(--theme-secondary-color-h), var(--theme-secondary-color-s), var(--theme-secondary-color-l));
    --theme-primary-025: hsl(var(--theme-primary-color-h), clamp(10%, calc(var(--theme-primary-color-s) - 82%), 90%), clamp(20%, calc(var(--theme-primary-color-l) - 17%), 100%));
    --theme-primary-050: hsl(var(--theme-primary-color-h), clamp(10%, calc(var(--theme-primary-color-s) - 47%), 90%), clamp(20%, calc(var(--theme-primary-color-l) - 15%), 100%));
    --theme-primary-075: hsl(var(--theme-primary-color-h), clamp(10%, calc(var(--theme-primary-color-s) - 39%), 90%), clamp(20%, calc(var(--theme-primary-color-l) - 13%), 100%));
    --theme-primary-100: hsl(var(--theme-primary-color-h), clamp(10%, calc(var(--theme-primary-color-s) - 32%), 90%), clamp(20%, calc(var(--theme-primary-color-l) - 11%), 100%));
    --theme-primary-150: hsl(var(--theme-primary-color-h), clamp(10%, calc(var(--theme-primary-color-s) - 23%), 90%), clamp(20%, calc(var(--theme-primary-color-l) - 9%), 100%));
    --theme-primary-200: hsl(var(--theme-primary-color-h), clamp(10%, calc(var(--theme-primary-color-s) - 15%), 90%), clamp(20%, calc(var(--theme-primary-color-l) - 7%), 100%));
    --theme-primary-300: hsl(var(--theme-primary-color-h), clamp(10%, calc(var(--theme-primary-color-s) - 7%), 90%), clamp(20%, calc(var(--theme-primary-color-l) - 5%), 100%));
    --theme-primary-350: var(--theme-primary-color);
    --theme-primary-400: rgb(calc(53.55 + var(--theme-primary-color-r) * .79), calc(53.55 + var(--theme-primary-color-g) * .79), calc(53.55 + var(--theme-primary-color-b) * .79));
    --theme-primary-500: rgb(calc(91.8 + var(--theme-primary-color-r) * .64), calc(91.8 + var(--theme-primary-color-g) * .64), calc(91.8 + var(--theme-primary-color-b) * .64));
    --theme-primary-600: rgb(calc(130.05 + var(--theme-primary-color-r) * .49), calc(130.05 + var(--theme-primary-color-g) * .49), calc(130.05 + var(--theme-primary-color-b) * .49));
    --theme-primary-700: rgb(calc(168.3 + var(--theme-primary-color-r) * .34), calc(168.3 + var(--theme-primary-color-g) * .34), calc(168.3 + var(--theme-primary-color-b) * .34));
    --theme-primary-800: rgb(calc(206.55 + var(--theme-primary-color-r) * .19), calc(206.55 + var(--theme-primary-color-g) * .19), calc(206.55 + var(--theme-primary-color-b) * .19));
    --theme-primary-900: rgb(calc(244.8 + var(--theme-primary-color-r) * .04), calc(244.8 + var(--theme-primary-color-g) * .04), calc(244.8 + var(--theme-primary-color-b) * .04));
    --theme-secondary-025: hsl(var(--theme-secondary-color-h), clamp(10%, calc(var(--theme-secondary-color-s) - 82%), 90%), clamp(20%, calc(var(--theme-secondary-color-l) - 17%), 100%));
    --theme-secondary-050: hsl(var(--theme-secondary-color-h), clamp(10%, calc(var(--theme-secondary-color-s) - 47%), 90%), clamp(20%, calc(...

Reviews

No reviews yet.