Skip to content

Instantly share code, notes, and snippets.

@wasi-master

wasi-master/dracula-stackoverflow.user.css

Last active February 2, 2022 07:11
Show Gist options
  • Save wasi-master/9c98fbe0e354d29f71cd39f7f38039c5 to your computer and use it in GitHub Desktop.
Save wasi-master/9c98fbe0e354d29f71cd39f7f38039c5 to your computer and use it in GitHub Desktop.
Download ZIP
Dark theme for stackoverflow
Raw
dracula-stackoverflow.user.css
/* ==UserStyle==
@name Dracula for Stack Overflow
@namespace wasi-master/dracula-for-stackoverflow
@version 1.0.0
@description Dark mode for StackOverflow
@license MIT License
@author Wasi Master
@preprocessor stylus
@var select accent-color "Accent Color" ["red:Red", "green:Green", "cyan:Cyan", "orange:Orange", "pink:Pink", "purple:Purple*", "yellow:Yellow", "white:White", "comment:Comment Color"]
@var select button-text-color "Button Text Color" ["white:White", "black:Black*", "gray:Gray"]
@var checkbox rounded-corners "Rounded corners" 0
@var checkbox custom-hljs-css "Custom HighlightJS" 1
@var text code-font "Code Font" ui-monospace,"Cascadia Mono","Segoe UI Mono","Liberation Mono",Menlo,Monaco,Consolas,monospace
@var text sans-font "Sans Font" -apple-system,BlinkMacSystemFont,"Segoe UI","Liberation Sans",sans-serif
@var text serif-font "Serif Font" Georgia,Cambria,"Times New Roman",Times,serif
==/UserStyle== */
@-moz-document domain("stackoverflow.com") {
/* ==========================================================================
Base Colors
========================================================================== */
body.theme-dark,
body:not(.theme-dark) .theme-dark__forced {
--white: #282a36;
--black: #f8f8f2;
--orange: #ffb86c;
--yellow: #f1fa8c;
--green: #50fa7b;
--blue: #bd93f9;
--powder: #6272a4;
--red: #ff5555;
--black-025: #343746;
--black-050: #343746;
--black-075: #343746;
--black-100: #373a46;
--black-150: #50525c;
--black-200: #5c6071;
--black-300: #6a6e86;
--black-350: #868ca8;
--black-400: #abb1ce;
--black-500: #c0c6e3;
--black-600: #d9dfff;
--black-700: #e3e8ff;
--black-750: #f0f2ff;
--black-800: #ebeefd;
--black-900: #f3f4fb;
--orange-050: #19120b;
--orange-100: #4c3720;
--orange-200: #805c36;
--orange-300: #b3814c;
--orange-400: #ffb86c;
--orange-500: #ffb86c;
--orange-600: #ffb86c;
--orange-700: #ffbf7b;
--orange-800: #ffdcb6;
--orange-900: #ffead3;
if accent-color == purple {
--blue-050: #5f4a7d;
--blue-100: #715895;
--blue-200: #8467ae;
--blue-300: #9776c7;
--blue-400: #aa84e0;
--blue-500: #bd93f9;
--blue-600: #c49efa;
--blue-700: #d7befb;
--blue-800: #e5d4fd;
--blue-900: #f2e9fe;
}
if accent-color == green {
--blue-025: #206431;
--blue-050: #287d3e;
--blue-100: #30964a;
--blue-200: #38af56;
--blue-300: #40c862;
--blue-400: #48e16f;
--blue-500: #50fa7b;
--blue-600: #62fb88;
--blue-700: #73fb95;
--blue-800: #85fca3;
--blue-900: #a8fdbd;
}
if accent-color == red {
--blue-050: #662222;
--blue-100: #802b2b;
--blue-200: #993333;
--blue-300: #cc4444;
--blue-400: #e64d4d;
--blue-500: #ff5555;
--blue-600: #ff7777;
--blue-700: #ff9999;
--blue-800: #ffaaaa;
--blue-900: #ffcccc;
}
if accent-color == comment {
--blue-050: #272e42;
--blue-100: #3b4462;
--blue-200: #6272a4;
--blue-300: #4e5b83;
--blue-400: #586794;
--blue-500: #6272a4;
--blue-600: #6272a4;
--blue-700: #8ea2e0;
--blue-800: #acb8df;
--blue-900: #dadde7;
}
if accent-color == orange {
--blue-050: #19120b;
--blue-100: #4c3720;
--blue-200: #805c36;
--blue-300: #b3814c;
--blue-400: #ffb86c;
--blue-500: #ffb86c;
--blue-600: #ffb86c;
--blue-700: #ffbf7b;
--blue-800: #ffdcb6;
--blue-900: #ffead3;
}
if accent-color == yellow {
--blue-050: #585a46;
--blue-100: #6e7150;
--blue-200: #a9af62;
--blue-300: #c1c870;
--blue-400: #d9e17e;
--blue-500: #f1fa8c;
--blue-600: #f2fb98;
--blue-700: #f5fcaf;
--blue-800: #f8fdc6;
--blue-900: #fbfedd;
}
if accent-color == white {
--blue-050: #cccccc;
--blue-100: #d1d1d1;
--blue-200: #d6d6d6;
--blue-300: #dbdbdb;
--blue-400: #e0e0e0;
--blue-500: #e6e6e6;
--blue-600: #ebebeb;
--blue-700: #f0f0f0;
--blue-800: #f5f5f5;
--blue-900: #fafafa;
}
if accent-color == cyan {
--blue-050: #46757f;
--blue-100: #538c98;
--blue-200: #61a3b1;
--blue-300: #6fbaca;
--blue-400: #7dd2e4;
--blue-500: #8be9fd;
--blue-600: #97ebfd;
--blue-700: #a2edfd;
--blue-800: #b9f2fe;
--blue-900: #d1f6fe;
}
if accent-color == pink {
--blue-050: #803d63;
--blue-100: #994977;
--blue-200: #b3558b;
--blue-300: #cc619e;
--blue-400: #e66db2;
--blue-500: #ff79c6;
--blue-600: #ff86cc;
--blue-700: #ff94d1;
--blue-800: #ffa1d7;
--blue-900: #ffafdd;
}
--powder-050: #272e42;
--powder-100: #3b4462;
--powder-200: #6272a4;
--powder-300: #4e5b83;
--powder-400: #586794;
--powder-500: #6272a4;
--powder-600: #6272a4;
--powder-700: #8ea2e0;
--powder-800: #acb8df;
--powder-900: #dadde7;
--green-025: #206431;
--green-050: #287d3e;
--green-100: #30964a;
--green-200: #38af56;
--green-300: #40c862;
--green-400: #48e16f;
--green-500: #50fa7b;
--green-600: #62fb88;
--green-700: #73fb95;
--green-800: #85fca3;
--green-900: #a8fdbd;
--yellow-050: #585a46;
--yellow-100: #6e7150;
--yellow-200: #a9af62;
--yellow-300: #c1c870;
--yellow-400: #d9e17e;
--yellow-500: #f1fa8c;
--yellow-600: #f2fb98;
--yellow-700: #f5fcaf;
--yellow-800: #f8fdc6;
--yellow-900: #fbfedd;
--red-050: #662222;
--red-100: #802b2b;
--red-200: #993333;
--red-300: #cc4444;
--red-400: #e64d4d;
--red-500: #ff5555;
--red-600: #ff7777;
--red-700: #ff9999;
--red-800: #ffaaaa;
--red-900: #ffcccc;
--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);
--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);
--scrollbar: hsla(0, 0%, 100%, 0.2);
--highlight-bg: hsl(0, 2%, 11%);
--highlight-color: var(--black);
--highlight-comment: #6272a4;
--highlight-punctuation: #ff79c6;
--highlight-namespace: #ff79c6;
--highlight-attribute: #50fa7b;
--highlight-literal: #50fa7b;
--highlight-symbol: #ff79c6;
--highlight-keyword: #ff79c6;
--highlight-variable: #bd93f9;
--highlight-addition: var(--green-600);
--highlight-deletion: var(--red-700);
}
/* ==========================================================================
Custom Fonts
========================================================================== */
body {
--ff-sans: sans-font;
--ff-serif: serif-font;
--ff-mono: code-font;
--theme-body-font-family: var(--ff-sans);
}
/* ==========================================================================
CSS Fixes
========================================================================== */
/**
* For places that have a backgorund color
*/
.s-post-summary--stats .s-post-summary--stats-item.has-answers.has-accepted-answer,
.status.answered-accepted, .status.answered-accepted .mini-counts, .status.answered-accepted .minicounts span,
.show-votes .sidebar-linked .spacer>a:first-child .answer-votes.answered-accepted, .show-votes .sidebar-related .spacer>a:first-child .answer-votes.answered-accepted,
body.theme-dark .s-btn__primary:not(.is-selected), .theme-dark__forced .s-btn__primary:not(.is-selected),
.bounty-indicator-tab{
color: button-text-color;
}
/**
* This will make the default UI elements such as scrollbars dark
* Taken from https://stackoverflow.com/a/66097469/13123877
*/
:root {
color-scheme: dark;
}
/**
* Adds a blackground color and border to codeblocks
*/
pre.s-code-block,
.s-prose pre:not(.s-code-block){
background-color: #282a36;
border: 5px double var(--black-025);
}
/**
* Fixes string color, by default stackoverflow uses the same color as variabels
*/
code[class*="language-"] .hljs-string, pre.s-code-block>code .hljs-string{
color: #f1fa8c;
}
/**
* Fixes the hover card shown when hovering over a user's profile picture
*/
#user-menu {
background-color: var(--black-100);
color: var(--black);
border: none;
}
/**
* Fixes text color for elements with black background color
* --black means white, this behaviour is same as stackoverflow's dfeault dark mode
*/
#user-menu .um-header-info .mod-flair, #user-menu .um-header-info .um-user-link,
#user-menu .um-header-info .um-flair .badgecount, #user-menu .um-header-info .um-flair .reputation-score{
color: var(--black) !important;
}
/**
* Fixes the owner card shown below the post
* By default this is a color made for the light mode,
* so dark mode doesn't suit that color so we change it
*/
.owner {
background-color: var(--black-100);
}
if rounded-corners {
#user-menu,
.owner{
overflow: hidden;
border-radius: 10px
}
// For sidebar widgets
.s-sidebarwidget{
overflow: hidden;
border-radius: 10px;
}
}
/* ==========================================================================
Custom Syntax Highlighting CSS
========================================================================== */
/* CodeMirror theme by Michael Kaminsky (https://github.com/mkaminsky11)
========================================================================== */
.cm-s-default .CodeMirror-gutters,.cm-s-default.CodeMirror{background-color:#282a36!important;color:#f8f8f2!important;border:none}.cm-s-default .CodeMirror-gutters{color:#282a36!important}.cm-s-default .CodeMirror-cursor{border-left:solid thin #f8f8f0!important}.cm-s-default .CodeMirror-linenumber{color:#6d8a88!important}.cm-s-default .CodeMirror-selected{background:rgba(255,255,255,.1)!important}.cm-s-default .CodeMirror-line::selection,.cm-s-dracula .CodeMirror-line>span::selection,.cm-s-dracula .CodeMirror-line>span>span::selection{background:rgba(255,255,255,.1)!important}.cm-s-default .CodeMirror-line::-moz-selection,.cm-s-dracula .CodeMirror-line>span::-moz-selection,.cm-s-dracula .CodeMirror-line>span>span::-moz-selection{background:rgba(255,255,255,.1)!important}.cm-s-default span.cm-comment{color:#6272a4!important}.cm-s-default span.cm-string,.cm-s-dracula span.cm-string-2{color:#f1fa8c!important}.cm-s-default span.cm-number{color:#bd93f9!important}.cm-s-default span.cm-variable{color:#50fa7b!important}.cm-s-default span.cm-variable-2{color:#fff!important}.cm-s-default span.cm-def{color:#50fa7b!important}.cm-s-default span.cm-operator{color:#ff79c6!important}.cm-s-default span.cm-keyword{color:#ff79c6!important}.cm-s-default span.cm-atom{color:#bd93f9!important}.cm-s-default span.cm-meta{color:#f8f8f2!important}.cm-s-default span.cm-tag{color:#ff79c6!important}.cm-s-default span.cm-attribute{color:#50fa7b!important}.cm-s-default span.cm-qualifier{color:#50fa7b!important}.cm-s-default span.cm-property{color:#66d9ef!important}.cm-s-default span.cm-builtin{color:#50fa7b!important}.cm-s-default span.cm-variable-3,.cm-s-dracula span.cm-type{color:#ffb86c!important}.cm-s-default .CodeMirror-activeline-background{background:rgba(255,255,255,.1)!important}.cm-s-default .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}
/* HighlightJS theme by Denis Ciccale <[email protected]>
========================================================================== */
if custom-hljs-css {
.hljs{display:block;overflow-x:auto;background:#282a36}.hljs-built_in,.hljs-link,.hljs-section,.hljs-selector-tag{color:#8be9fd}.hljs-keyword{color:#ff79c6}.hljs,.hljs-subst{color:#f8f8f2}.hljs-attr,.hljs-meta-keyword,.hljs-title{font-style:italic;color:#50fa7b}.hljs-addition,.hljs-bullet,.hljs-meta,.hljs-name,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable{color:#f1fa8c}.hljs-comment,.hljs-deletion,.hljs-quote{color:#6272a4}.hljs-doctag,.hljs-keyword,.hljs-literal,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-strong,.hljs-title,.hljs-type{font-weight:700}.hljs-literal,.hljs-number{color:#bd93f9}.hljs-emphasis{font-style:italic}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment