Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Dark Mode Gist Embed Code
/*!
* Gist DarkCode ver 0.2.1
* Update 03/12/2021 www.adiman.web.id
*/
.gist{font-size: 18px}.gist-meta, .gist-file, .octotree_toggle, ul.comparison-list > li.title,button.button, a.button, span.button, button.minibutton, a.minibutton,span.minibutton, .clone-url-button > .clone-url-link{background: linear-gradient(#202020, #181818) !important;border-color: #383838 !important;border-radius: 0 0 3px 3px !important;text-shadow: none !important;color: #b5b5b5 !important}.markdown-format pre, .markdown-body pre, .markdown-format .highlight pre,.markdown-body .highlight pre, body.blog pre, #facebox pre, .blob-expanded,.terminal, .copyable-terminal, #notebook .input_area, .blob-code-context,.markdown-format code, body.blog pre > code, .api pre, .api code,.CodeMirror,.highlight{background-color: #1D1F21!important;color: #C5C8C6!important}.gist .blob-code{padding: 1px 10px !important;text-align: left;background: #000;border: 0}::selection{background: #24890d;color: #fff;text-shadow: none}::-moz-selection{background: #24890d;color: #fff;text-shadow: none}.blob-num{padding: 10px 8px 9px;text-align: right;color: #6B6B6B!important;border: 0}.blob-code,.blob-code-inner{color: #C5C8C6!important}.pl-c,.pl-c span{color: #969896!important;font-style: italic!important}.pl-c1{color: #DE935F!important}.pl-cce{color: #DE935F!important}.pl-cn{color: #DE935F!important}.pl-coc{color: #DE935F!important}.pl-cos{color: #B5BD68!important}.pl-e{color: #F0C674!important}.pl-ef{color: #F0C674!important}.pl-en{color: #F0C674!important}.pl-enc{color: #DE935F!important}.pl-enf{color: #F0C674!important}.pl-enm{color: #F0C674!important}.pl-ens{color: #DE935F!important}.pl-ent{color: #B294BB!important}.pl-entc{color: #F0C674!important}.pl-enti{color: #F0C674!important;font-weight: 700!important}.pl-entm{color: #C66!important}.pl-eoa{color: #B294BB!important}.pl-eoac{color: #C66!important}.pl-eoac .pl-pde{color: #C66!important}.pl-eoai{color: #B294BB!important}.pl-eoai .pl-pde{color: #B294BB!important}.pl-eoi{color: #F0C674!important}.pl-k{color: #B294BB!important}.pl-ko{color: #B294BB!important}.pl-kolp{color: #B294BB!important}.pl-kos{color: #DE935F!important}.pl-kou{color: #DE935F!important}.pl-mai .pl-sf{color: #C66!important}.pl-mb{color: #B5BD68!important;font-weight: 700!important}.pl-mc{color: #B294BB!important}.pl-mh .pl-pdh{color: #DE935F!important}.pl-mi{color: #B294BB!important;font-style: italic!important}.pl-ml{color: #B5BD68!important}.pl-mm{color: #C66!important}.pl-mp{color: #81A2BE!important}.pl-mp1 .pl-sf{color: #81A2BE!important}.pl-mq{color: #DE935F!important}.pl-mr{color: #B294BB!important}.pl-ms{color: #B294BB!important}.pl-pdb{color: #B5BD68!important;font-weight: 700!important}.pl-pdc{color: #969896!important;font-style: italic!important}.pl-pdc1{color: #DE935F!important}.pl-pde{color: #DE935F!important}.pl-pdi{color: #B294BB!important;font-style: italic!important}.pl-pds{color: #B5BD68!important}.pl-pdv{color: #C66!important}.pl-pse{color: #DE935F!important}.pl-pse .pl-s2{color: #DE935F!important}.pl-s{color: #B294BB!important}.pl-s1{color: #B5BD68!important}.pl-s2{color: #c5c8c6!important}.pl-mp .pl-s3{color: #B294BB!important}.pl-s3{color: #81a2be!important}.pl-sc{color: #c5c8c6!important}.pl-scp{color: #DE935F!important}.pl-sf{color: #DAD085!important}.pl-smc{color: #F0C674!important}.pl-smi{color: #c5c8c6!important}.pl-smp{color: #c5c8c6!important}.pl-sok{color: #B294BB!important}.pl-sol{color: #B5BD68!important}.pl-som{color: #C66!important}.pl-sr{color: #C66!important}.pl-sra{color: #B294BB!important}.pl-src{color: #B294BB!important}.pl-sre{color: #B294BB!important}.pl-st{color: #B294BB!important}.pl-stj{color: #c5c8c6!important}.pl-stp{color: #DE935F!important}.pl-sv{color: #DE935F!important}.pl-v{color: #DE935F!important}.pl-vi{color: #DE935F!important}.pl-vo{color: #C66!important}.pl-vpf{color: #DE935F!important}.pl-mi1{color: #8F9D6A!important;background: rgba(0,64,0,.5)!important}.pl-mdht{color: #8F9D6A!important;background: rgba(0,64,0,.5)!important}.pl-md{color: #C66!important;background: rgba(64,0,0,.5)!important}.pl-mdhf{color: #C66!important;background: rgba(64,0,0,.5)!important}.pl-mdr{color: #DE935F!important;font-weight: 400!important}.pl-mdh{color: #C66!important;font-weight: 400!important}.pl-mdi{color: #C66!important;font-weight: 400!important}.pl-ib{background-color: #C66!important}.pl-id{background-color: #C66!important;color: #fff!important}.pl-ii{background-color: #C66!important;color: #fff!important}.pl-iu{background-color: #C66!important}.pl-mo{color: #c5c8c6!important}.pl-mri{color: #DE935F!important}.pl-ms1{background-color: #c5c8c6!important}.pl-va{color: #DE935F!important}.pl-vpu{color: #DE935F!important}.pl-entl{color: #c5c8c6!important}.CodeMirror-gutters{background: #222!important;border-right: 1px solid #484848!important}.CodeMirror-guttermarker{color: #fff!important}.CodeMirror-guttermarker-subtle{color: #aaa!important}.CodeMirror-linenumber{color: #aaa!important}.CodeMirror-cursor{border-left: 1px solid #fff!important}.CodeMirror-activeline-background{background: #27282E!important}.CodeMirror-matchingbracket{outline: 1px solid grey!important;color: #fff!important}.cm-keyword{color: #f9ee98!important}.cm-atom{color: #FC0!important}.cm-number{color: #ca7841!important}.cm-def{color: #8DA6CE!important}.cm-variable-2,span.cm-tag{color: #607392!important}.cm-variable-3,span.cm-def{color: #607392!important}.cm-operator{color: #cda869!important}.cm-comment{color: #777!important;font-style: italic!important;font-weight: 400!important}.cm-string{color: #8f9d6a!important}.cm-string-2{color: #bd6b18!important}.cm-meta{background-color: #141414!important;color: #f7f7f7!important}.cm-builtin{color: #cda869!important}.cm-tag{color: #997643!important}.cm-attribute{color: #d6bb6d!important}.cm-header{color: #FF6400!important}.cm-hr{color: #AEAEAE!important}.cm-link{color: #ad9361!important;font-style: italic!important;text-decoration: none!important}.cm-error{border-bottom: 1px solid red!important}#notebook .highlight table{background: #1d1f21!important;color: #c5c8c6!important}.highlight .hll{background-color: #373b41!important}.highlight .c{color: #969896!important}.highlight .err{color: #c66!important}.highlight .k{color: #b294bb!important}.highlight .l{color: #de935f!important}.highlight .h,.highlight .n{color: #c5c8c6!important}.highlight .o{color: #8abeb7!important}.highlight .p{color: #c5c8c6!important}.highlight .cm{color: #969896!important}.highlight .cp{color: #969896!important}.highlight .c1{color: #969896!important}.highlight .cs{color: #969896!important}.highlight .gd{color: #c66!important}.highlight .ge{font-style: italic!important}.highlight .gh{color: #c5c8c6!important;font-weight: 700!important}.highlight .gi{color: #b5bd68!important}.highlight .gp{color: #969896!important;font-weight: 700!important}.highlight .gs{font-weight: 700!important}.highlight .gu{color: #8abeb7!important;font-weight: 700!important}.highlight .kc{color: #b294bb!important}.highlight .kd{color: #b294bb!important}.highlight .kn{color: #8abeb7!important}.highlight .kp{color: #b294bb!important}.highlight .kr{color: #b294bb!important}.highlight .kt{color: #f0c674!important}.highlight .ld{color: #b5bd68!important}.highlight .m{color: #de935f!important}.highlight .s{color: #b5bd68!important}.highlight .na{color: #81a2be!important}.highlight .nb{color: #c5c8c6!important}.highlight .nc{color: #f0c674!important}.highlight .no{color: #c66!important}.highlight .nd{color: #8abeb7!important}.highlight .ni{color: #c5c8c6!important}.highlight .ne{color: #c66!important}.highlight .nf{color: #81a2be!important}.highlight .nl{color: #c5c8c6!important}.highlight .nn{color: #f0c674!important}.highlight .nx{color: #81a2be!important}.highlight .py{color: #c5c8c6!important}.highlight .nt{color: #8abeb7!important}.highlight .nv{color: #c66!important}.highlight .ow{color: #8abeb7!important}.highlight .w{color: #c5c8c6!important}.highlight .mf{color: #de935f!important}.highlight .mh{color: #de935f!important}.highlight .mi{color: #de935f!important}.highlight .mo{color: #de935f!important}.highlight .sb{color: #b5bd68!important}.highlight .sc{color: #c5c8c6!important}.highlight .sd{color: #969896!important}.highlight .s2{color: #b5bd68!important}.highlight .se{color: #de935f!important}.highlight .sh{color: #b5bd68!important}.highlight .si{color: #de935f!important}.highlight .sx{color: #b5bd68!important}.highlight .sr{color: #b5bd68!important}.highlight .s1{color: #b5bd68!important}.highlight .ss{color: #b5bd68!important}.highlight .bp{color: #c5c8c6!important}.highlight .vc{color: #c66!important}.highlight .vg{color: #c66!important}.highlight .vi{color: #c66!important}.highlight .il{color: #de935f!important}
@nathanielbd
Copy link

nathanielbd commented Jan 16, 2021

Amazing! The only problem is that it does not work for .csv gists.

edit: For anyone with this problem, just add this:

.gist .markdown-body .csv-data th, .gist .markdown-body .csv-data td, .gist .markdown-body .csv-data .blob-num {background: #000; background-color: #000;}
.gist .blob-interaction-bar .octicon-search > path {fill: #fff}
.gist .blob-interaction-bar > input {background: #000}
.gist .blob-interaction-bar {background: #000}

@ImNimboss
Copy link

ImNimboss commented Aug 25, 2021

Heya, how do I remove the little text at the bottom of the gist which says "{filename} hosted with ❤️ by GitHub"? Or is that not possible?

Edit: Apparently it's stored in a nested div class called "gist-meta", I'll look up on how to remove nested divs, if that's possible (not very good at js)

Edit 2: Found a solution! Put this script in your HTML and run the function onload:

<script>
    function onLoad() {
        var elements = document.querySelectorAll(".gist > .gist-file > .gist-meta");
        elements[0].parentElement.removeChild(elements[0]);
    }
</script>

This removes the div that the message is stored in, therefore removing the message entirely. Credits here

@noga-dev
Copy link

noga-dev commented Sep 12, 2021

Heya, how do I remove the little text at the bottom of the gist which says "{filename} hosted with ❤️ by GitHub"? Or is that not possible?

Edit: Apparently it's stored in a nested div class called "gist-meta", I'll look up on how to remove nested divs, if that's possible (not very good at js)

Edit 2: Found a solution! Put this script in your HTML and run the function onload:

<script>
    function onLoad() {
        var elements = document.querySelectorAll(".gist > .gist-file > .gist-meta");
        elements[0].parentElement.removeChild(elements[0]);
    }
</script>

This removes the div that the message is stored in, therefore removing the message entirely. Credits here

Or just hide it with this:

.gist-meta{display: none;}

@juspreet51
Copy link

juspreet51 commented Oct 17, 2021

This works. All one needs to do is

  • copy the whole chunk above (css_dark_mode_gist_embed_code.css file)
  • create a .CSS file,
  • paste the whole chunk in that css file
  • link your html and the css file

Thanks @adimancv a lot for sharing the snippet

@tukusejssirs
Copy link

tukusejssirs commented Nov 22, 2021

Thanks to all for the snippets! I wish someone would create a userstyle (I might do it). Here is one based on the snippets above:

github_gist_darkcode.user.css
/* ==UserStyle==
@name           GitHub Gist DarkCode
@namespace      xxx
@version        xxx
@license        xxx
@homepageURL    xxx
@author         xxx
@updateURL      xxx
==/UserStyle== */

/*!
 * Gist DarkCode ver 0.2.0 
 * Copyright (c) 2017 KillerCodes.in
 * License: Free to use with this file header ;)
 * 
 * src: https://gist.github.com/adimancv/eb2f4b46d3c95e6b8fe4dd52375236b2;
 * additions:
 * - https://gist.github.com/adimancv/eb2f4b46d3c95e6b8fe4dd52375236b2#gistcomment-3595796
 * - https://gist.github.com/adimancv/eb2f4b46d3c95e6b8fe4dd52375236b2#gistcomment-3890098
 */

@-moz-document regexp("https?:\\/\\/(?!github\\.com)([-\\w]*\\.)(?!github\\.com)\\S*") {
	.gist {
		font-size: 18px;
	}

	.gist-meta,
	.gist-file,
	.octotree_toggle,
	ul.comparison-list>li.title,
	button.button,
	a.button,
	span.button,
	button.minibutton,
	a.minibutton,
	span.minibutton,
	.clone-url-button>.clone-url-link {
		background: linear-gradient(#202020, #181818) !important;
		border-color: #383838 !important;
		border-radius: 0 0 3px 3px !important;
		color: #b5b5b5 !important;
		text-shadow: none !important;
	}

	.markdown-format pre,
	.markdown-body pre,
	.markdown-format .highlight pre,
	.markdown-body .highlight pre,
	body.blog pre,
	#facebox pre,
	.blob-expanded,
	.terminal,
	.copyable-terminal,
	#notebook .input_area,
	.blob-code-context,
	.markdown-format code,
	body.blog pre>code,
	.api pre,
	.api code,
	.CodeMirror,
	.highlight {
		background-color: #1D1F21 !important;
		color: #C5C8C6 !important;
	}

	.gist .blob-code {
		background: #000;
		border: 0;
		padding: 1px 10px !important;
		text-align: left;
	}

	::selection {
		background: #24890d;
		color: #fff;
		text-shadow: none;
	}

	::-moz-selection {
		background: #24890d;
		color: #fff;
		text-shadow: none;
	}

	.blob-num {
		border: 0;
		color: #6B6B6B !important;
		padding: 10px 8px 9px;
		text-align: right;
	}

	.blob-code,
	.blob-code-inner {
		color: #C5C8C6 !important;
	}

	.pl-c,
	.pl-c span {
		color: #969896 !important;
		font-style: italic !important;
	}

	.pl-c1 {
		color: #DE935F !important;
	}

	.pl-cce {
		color: #DE935F !important;
	}

	.pl-cn {
		color: #DE935F !important;
	}

	.pl-coc {
		color: #DE935F !important;
	}

	.pl-cos {
		color: #B5BD68 !important;
	}

	.pl-e {
		color: #F0C674 !important;
	}

	.pl-ef {
		color: #F0C674 !important;
	}

	.pl-en {
		color: #F0C674 !important;
	}

	.pl-enc {
		color: #DE935F !important;
	}

	.pl-enf {
		color: #F0C674 !important;
	}

	.pl-enm {
		color: #F0C674 !important;
	}

	.pl-ens {
		color: #DE935F !important;
	}

	.pl-ent {
		color: #B294BB !important;
	}

	.pl-entc {
		color: #F0C674 !important;
	}

	.pl-enti {
		color: #F0C674 !important;
		font-weight: 700 !important;
	}

	.pl-entm {
		color: #C66 !important;
	}

	.pl-eoa {
		color: #B294BB !important;
	}

	.pl-eoac {
		color: #C66 !important;
	}

	.pl-eoac .pl-pde {
		color: #C66 !important;
	}

	.pl-eoai {
		color: #B294BB !important;
	}

	.pl-eoai .pl-pde {
		color: #B294BB !important;
	}

	.pl-eoi {
		color: #F0C674 !important;
	}

	.pl-k {
		color: #B294BB !important;
	}

	.pl-ko {
		color: #B294BB !important;
	}

	.pl-kolp {
		color: #B294BB !important;
	}

	.pl-kos {
		color: #DE935F !important;
	}

	.pl-kou {
		color: #DE935F !important;
	}

	.pl-mai .pl-sf {
		color: #C66 !important;
	}

	.pl-mb {
		color: #B5BD68 !important;
		font-weight: 700 !important;
	}

	.pl-mc {
		color: #B294BB !important;
	}

	.pl-mh .pl-pdh {
		color: #DE935F !important;
	}

	.pl-mi {
		color: #B294BB !important;
		font-style: italic !important;
	}

	.pl-ml {
		color: #B5BD68 !important;
	}

	.pl-mm {
		color: #C66 !important;
	}

	.pl-mp {
		color: #81A2BE !important;
	}

	.pl-mp1 .pl-sf {
		color: #81A2BE !important;
	}

	.pl-mq {
		color: #DE935F !important;
	}

	.pl-mr {
		color: #B294BB !important;
	}

	.pl-ms {
		color: #B294BB !important;
	}

	.pl-pdb {
		color: #B5BD68 !important;
		font-weight: 700 !important;
	}

	.pl-pdc {
		color: #969896 !important;
		font-style: italic !important;
	}

	.pl-pdc1 {
		color: #DE935F !important;
	}

	.pl-pde {
		color: #DE935F !important;
	}

	.pl-pdi {
		color: #B294BB !important;
		font-style: italic !important;
	}

	.pl-pds {
		color: #B5BD68 !important;
	}

	.pl-pdv {
		color: #C66 !important;
	}

	.pl-pse {
		color: #DE935F !important;
	}

	.pl-pse .pl-s2 {
		color: #DE935F !important;
	}

	.pl-s {
		color: #B294BB !important;
	}

	.pl-s1 {
		color: #B5BD68 !important;
	}

	.pl-s2 {
		color: #c5c8c6 !important;
	}

	.pl-mp .pl-s3 {
		color: #B294BB !important;
	}

	.pl-s3 {
		color: #81a2be !important;
	}

	.pl-sc {
		color: #c5c8c6 !important;
	}

	.pl-scp {
		color: #DE935F !important;
	}

	.pl-sf {
		color: #DAD085 !important;
	}

	.pl-smc {
		color: #F0C674 !important;
	}

	.pl-smi {
		color: #c5c8c6 !important;
	}

	.pl-smp {
		color: #c5c8c6 !important;
	}

	.pl-sok {
		color: #B294BB !important;
	}

	.pl-sol {
		color: #B5BD68 !important;
	}

	.pl-som {
		color: #C66 !important;
	}

	.pl-sr {
		color: #C66 !important;
	}

	.pl-sra {
		color: #B294BB !important;
	}

	.pl-src {
		color: #B294BB !important;
	}

	.pl-sre {
		color: #B294BB !important;
	}

	.pl-st {
		color: #B294BB !important;
	}

	.pl-stj {
		color: #c5c8c6 !important;
	}

	.pl-stp {
		color: #DE935F !important;
	}

	.pl-sv {
		color: #DE935F !important;
	}

	.pl-v {
		color: #DE935F !important;
	}

	.pl-vi {
		color: #DE935F !important;
	}

	.pl-vo {
		color: #C66 !important;
	}

	.pl-vpf {
		color: #DE935F !important;
	}

	.pl-mi1 {
		background: rgba(0, 64, 0, .5) !important;
		color: #8F9D6A !important;
	}

	.pl-mdht {
		background: rgba(0, 64, 0, .5) !important;
		color: #8F9D6A !important;
	}

	.pl-md {
		background: rgba(64, 0, 0, .5) !important;
		color: #C66 !important;
	}

	.pl-mdhf {
		background: rgba(64, 0, 0, .5) !important;
		color: #C66 !important;
	}

	.pl-mdr {
		color: #DE935F !important;
		font-weight: 400 !important;
	}

	.pl-mdh {
		color: #C66 !important;
		font-weight: 400 !important;
	}

	.pl-mdi {
		color: #C66 !important;
		font-weight: 400 !important;
	}

	.pl-ib {
		background-color: #C66 !important;
	}

	.pl-id {
		background-color: #C66 !important;
		color: #fff !important;
	}

	.pl-ii {
		background-color: #C66 !important;
		color: #fff !important;
	}

	.pl-iu {
		background-color: #C66 !important;
	}

	.pl-mo {
		color: #c5c8c6 !important;
	}

	.pl-mri {
		color: #DE935F !important;
	}

	.pl-ms1 {
		background-color: #c5c8c6 !important;
	}

	.pl-va {
		color: #DE935F !important;
	}

	.pl-vpu {
		color: #DE935F !important;
	}

	.pl-entl {
		color: #c5c8c6 !important;
	}

	.CodeMirror-gutters {
		background: #222 !important;
		border-right: 1px solid #484848 !important;
	}

	.CodeMirror-guttermarker {
		color: #fff !important;
	}

	.CodeMirror-guttermarker-subtle {
		color: #aaa !important;
	}

	.CodeMirror-linenumber {
		color: #aaa !important;
	}

	.CodeMirror-cursor {
		border-left: 1px solid #fff !important;
	}

	.CodeMirror-activeline-background {
		background: #27282E !important;
	}

	.CodeMirror-matchingbracket {
		color: #fff !important;
		outline: 1px solid grey !important;
	}

	.cm-keyword {
		color: #f9ee98 !important;
	}

	.cm-atom {
		color: #FC0 !important;
	}

	.cm-number {
		color: #ca7841 !important;
	}

	.cm-def {
		color: #8DA6CE !important;
	}

	.cm-variable-2,
	span.cm-tag {
		color: #607392 !important;
	}

	.cm-variable-3,
	span.cm-def {
		color: #607392 !important;
	}

	.cm-operator {
		color: #cda869 !important;
	}

	.cm-comment {
		color: #777 !important;
		font-style: italic !important;
		font-weight: 400 !important;
	}

	.cm-string {
		color: #8f9d6a !important;
	}

	.cm-string-2 {
		color: #bd6b18 !important;
	}

	.cm-meta {
		background-color: #141414 !important;
		color: #f7f7f7 !important;
	}

	.cm-builtin {
		color: #cda869 !important;
	}

	.cm-tag {
		color: #997643 !important;
	}

	.cm-attribute {
		color: #d6bb6d !important;
	}

	.cm-header {
		color: #FF6400 !important;
	}

	.cm-hr {
		color: #AEAEAE !important;
	}

	.cm-link {
		color: #ad9361 !important;
		font-style: italic !important;
		text-decoration: none !important;
	}

	.cm-error {
		border-bottom: 1px solid red !important;
	}

	#notebook .highlight table {
		background: #1d1f21 !important;
		color: #c5c8c6 !important;
	}

	.highlight .hll {
		background-color: #373b41 !important;
	}

	.highlight .c {
		color: #969896 !important;
	}

	.highlight .err {
		color: #c66 !important;
	}

	.highlight .k {
		color: #b294bb !important;
	}

	.highlight .l {
		color: #de935f !important;
	}

	.highlight .h,
	.highlight .n {
		color: #c5c8c6 !important;
	}

	.highlight .o {
		color: #8abeb7 !important;
	}

	.highlight .p {
		color: #c5c8c6 !important;
	}

	.highlight .cm {
		color: #969896 !important;
	}

	.highlight .cp {
		color: #969896 !important;
	}

	.highlight .c1 {
		color: #969896 !important;
	}

	.highlight .cs {
		color: #969896 !important;
	}

	.highlight .gd {
		color: #c66 !important;
	}

	.highlight .ge {
		font-style: italic !important;
	}

	.highlight .gh {
		color: #c5c8c6 !important;
		font-weight: 700 !important;
	}

	.highlight .gi {
		color: #b5bd68 !important;
	}

	.highlight .gp {
		color: #969896 !important;
		font-weight: 700 !important;
	}

	.highlight .gs {
		font-weight: 700 !important;
	}

	.highlight .gu {
		color: #8abeb7 !important;
		font-weight: 700 !important;
	}

	.highlight .kc {
		color: #b294bb !important;
	}

	.highlight .kd {
		color: #b294bb !important;
	}

	.highlight .kn {
		color: #8abeb7 !important;
	}

	.highlight .kp {
		color: #b294bb !important;
	}

	.highlight .kr {
		color: #b294bb !important;
	}

	.highlight .kt {
		color: #f0c674 !important;
	}

	.highlight .ld {
		color: #b5bd68 !important;
	}

	.highlight .m {
		color: #de935f !important;
	}

	.highlight .s {
		color: #b5bd68 !important;
	}

	.highlight .na {
		color: #81a2be !important;
	}

	.highlight .nb {
		color: #c5c8c6 !important;
	}

	.highlight .nc {
		color: #f0c674 !important;
	}

	.highlight .no {
		color: #c66 !important;
	}

	.highlight .nd {
		color: #8abeb7 !important;
	}

	.highlight .ni {
		color: #c5c8c6 !important;
	}

	.highlight .ne {
		color: #c66 !important;
	}

	.highlight .nf {
		color: #81a2be !important;
	}

	.highlight .nl {
		color: #c5c8c6 !important;
	}

	.highlight .nn {
		color: #f0c674 !important;
	}

	.highlight .nx {
		color: #81a2be !important;
	}

	.highlight .py {
		color: #c5c8c6 !important;
	}

	.highlight .nt {
		color: #8abeb7 !important;
	}

	.highlight .nv {
		color: #c66 !important;
	}

	.highlight .ow {
		color: #8abeb7 !important;
	}

	.highlight .w {
		color: #c5c8c6 !important;
	}

	.highlight .mf {
		color: #de935f !important;
	}

	.highlight .mh {
		color: #de935f !important;
	}

	.highlight .mi {
		color: #de935f !important;
	}

	.highlight .mo {
		color: #de935f !important;
	}

	.highlight .sb {
		color: #b5bd68 !important;
	}

	.highlight .sc {
		color: #c5c8c6 !important;
	}

	.highlight .sd {
		color: #969896 !important;
	}

	.highlight .s2 {
		color: #b5bd68 !important;
	}

	.highlight .se {
		color: #de935f !important;
	}

	.highlight .sh {
		color: #b5bd68 !important;
	}

	.highlight .si {
		color: #de935f !important;
	}

	.highlight .sx {
		color: #b5bd68 !important;
	}

	.highlight .sr {
		color: #b5bd68 !important;
	}

	.highlight .s1 {
		color: #b5bd68 !important;
	}

	.highlight .ss {
		color: #b5bd68 !important;
	}

	.highlight .bp {
		color: #c5c8c6 !important;
	}

	.highlight .vc {
		color: #c66 !important;
	}

	.highlight .vg {
		color: #c66 !important;
	}

	.highlight .vi {
		color: #c66 !important;
	}

	.highlight .il {
		color: #de935f !important;
	}

	/* Make it work for .csv gists */
	.gist .markdown-body .csv-data th,
	.gist .markdown-body .csv-data td,
	.gist .markdown-body .csv-data .blob-num {
		background: #000;
		background-color: #000;
	}

	.gist .blob-interaction-bar .octicon-search>path {
		fill: #fff
	}

	.gist .blob-interaction-bar>input {
		background: #000
	}

	.gist .blob-interaction-bar {
		background: #000
	}

	/* Hide `{filename} hosted with heart by GitHub` */
	.gist-meta {
		display: none;
	}

	/* Use dark background colour of the header and foorter */
	.gist .gist-data {
		background-color: #000;
		border-bottom: 1px solid #000;
	}
}

@GermanHoyos
Copy link

GermanHoyos commented Feb 20, 2022

Thankyou so much for this, it is going to be used in my portfolio site to share my gists! your the man

@net-js
Copy link

net-js commented May 26, 2022

Thank you so much i was working in my site which is in dark mode and the gist was all white but this helped thanks!!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment