Skip to content

Instantly share code, notes, and snippets.

@adimancv

adimancv/css_dark_mode_gist_embed_code.css

Last active December 8, 2023 20:37
Show Gist options
  • Star 28 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • 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}
@ImNimboss
Copy link

ImNimboss commented Aug 25, 2021 •
edited

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

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

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/

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