Skip to content

Instantly share code, notes, and snippets.

@adimancv

adimancv/css_dark_mode_gist_embed_code.css

Last active November 4, 2024 15:22
Show Gist options
  • Save adimancv/eb2f4b46d3c95e6b8fe4dd52375236b2 to your computer and use it in GitHub Desktop.
Save adimancv/eb2f4b46d3c95e6b8fe4dd52375236b2 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Dark Mode Gist Embed Code
Raw
css_dark_mode_gist_embed_code.css
/*!
* 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 •
edited
Loading

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 •
edited
Loading

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

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;}

@rapidcrawler
Copy link

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 •
edited
Loading

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

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

Copy link

ghost 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!!!!

@HotCakeX
Copy link

HotCakeX commented Mar 13, 2023 •
edited
Loading

This is causing problem when integrating it with my website, the CSS in here makes highlight colors of some areas invisible.

 ::selection {
     background: #46ccff;
     color: #fff;
     text-shadow: none
 }

To fix it, I removed this whole part:

 ::selection {
     background: #46ccff;
     color: #fff;
     text-shadow: none
 }
 ::-moz-selection {
     background: #46ccff;
     color: #fff;
     text-shadow: none
 }

also added this to make the borders black

 .gist-data { 
     border-color: #ffffff !important;
     background-color: rgba(254, 67, 67, 0) !important;
 }

the result:

image

https://hotcakex.github.io/

@haydenk
Copy link

haydenk commented Nov 4, 2024 •
edited
Loading

Just a thought, if you didn't want to completely rewrite or duplicate the GitHub dark mode css and use javascript to use your css, seems like you could do this in your own CSS. Ideally, it would be nice if GitHub would make it so you can pass in a variable to the URL to set the color mode and theme but I do not think they have dark mode CSS for the gist meta at the bottom anyways.

@media (prefers-color-scheme: dark) {
    .gist {
        filter: invert(1);
    }
}

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