{"id":5689,"date":"2025-03-17T14:06:07","date_gmt":"2025-03-17T13:06:07","guid":{"rendered":"https:\/\/pmortensen.eu\/world2\/?p=5689"},"modified":"2026-07-30T17:58:56","modified_gmt":"2026-07-30T16:58:56","slug":"change-to-dark-mode-on-github","status":"publish","type":"post","link":"https:\/\/pmortensen.eu\/world2\/2025\/03\/17\/change-to-dark-mode-on-github\/","title":{"rendered":"Change to &#8216;dark mode&#8217; on GitHub"},"content":{"rendered":"<p>For instance, <a href=\"https:\/\/en.wikipedia.org\/wiki\/GitHub\">GitHub<\/a> pages may be in <a href=\"https:\/\/en.wikipedia.org\/wiki\/Light-on-dark_color_scheme\">dark mode<\/a> when logged out and not when logged in.<\/p>\n<p><a href=\"https:\/\/github.com\/PeterMortensen\/Edit_Overflow\">Sample GitHub page<\/a><\/p>\n<h2 id=\"DarkModeOnGitHub\">Change to dark mode<\/h2>\n<p>When <strong><em>logged in<\/em><\/strong>, click on the profile picture in the upper right &rarr; <a href=\"https:\/\/github.com\/settings\/profile\">Settings<\/a> &rarr; <a href=\"https:\/\/github.com\/settings\/appearance\">Appearance<\/a> (in the left panel). Set <em>Theme mode<\/em> to <em>&#8220;Single theme&#8221;<\/em>. Select <em>&#8220;Dark high contrast&#8221;<\/em>.<\/p>\n<p>When <strong><em>logged out<\/em><\/strong>, click on the <em>&#8220;Appearance settings&#8221;<\/em> icon in the upper right. Enable &#8220;Dark mode&#8221; (the last item).<\/p>\n<p>Though it may not actually change to dark mode&#8230; It may also be &#8220;Open application menu&#8221; (in the upper right) &rarr; <a href=\"https:\/\/github.com\/settings\/profile\">Settings&#8230;<\/a> (about 70% down) &rarr; &#8220;Language and Appearance&#8221; (about 25% down (scrolling may be required)) &rarr; &#8220;Dark&#8221; (the last of the three options)).<\/p>\n<p>In fact, that is Firefox&#8217; setting, not GitHub&#8217;s. Enabling JavaScript is not even required.<\/p>\n<h2 id=\"DarkModeInLibreOffice\">Bonus: Change to dark mode in LibreOffice<\/h2>\n<p>Menu <em>Tools<\/em> &rarr; <em>Options<\/em> (shortcut <strong><em>Alt<\/em><\/strong> + <strong><em>F12<\/em><\/strong>) &rarr; <em>Application&nbsp;Colors<\/em> (left panel, in <em>&#8220;LibreOffice&#8221;<\/em>) &rarr; <em>Document&nbsp;background<\/em>. Also change &#8220;Font&nbsp;color&#8221;, for example, to orange.<\/p>\n<p>Note: This location may depend on the version. For example, in the Danish version 25.2 (February 2025), it is in menu <em>Funktioner<\/em> &rarr; <em>Indstillinger<\/em> (shortcut <strong><em>Alt<\/em><\/strong> + <strong><em>F12<\/em><\/strong>) &rarr; <em>Udseennde<\/em> (left panel, 8th item in <em>&#8220;LibreOffice&#8221;<\/em>) &rarr; <em>Tilpasninger<\/em> (in the right panel) &rarr; <em>Elementer<\/em> &rarr; <em>Dokumentbaggrund<\/em>. Also change &#8220;Skiftfarve&#8221;, for example, to orange.<\/p>\n<p>Though it will only change the spreadsheet itself, not the menus, toolbars, status area at the bottom, etc.<\/p>\n<p>To refine it, use the colours from well-known colour schemes, e.g., <a href=\"https:\/\/en.wikipedia.org\/wiki\/Solarized\">Solarized<\/a>. For Solarized, the default is base0, base03 (foreground colour, background colour), where base0 is RGB 0x839496 (HSV 0x842096, 132 (angle 186&deg;), 32, 150) and base03 is RGB 0x002B36 (HSV 0x88FF36, 136 (angle 192&deg;), 255, 54).<\/p>\n<p>These can be entered in &#8220;Custom Color&#8221;, under &#8220;RGB&#8221;, in the &#8220;Hex #&#8221; field:<\/p>\n<ul>\n<li><em>Document background<\/em>: 002B36<\/li>\n<li><em>Font color<\/em>: 839496<\/li>\n<li>In section &#8220;<em>Spreadsheet<\/em>&#8221; (4th section), <em>Grid lines<\/em>: &#8216;Light Blue 2&#8217; (729FCF)<\/li>\n<\/ul>\n<p>Also zoom: Menu <em>View<\/em> &rarr; <em>Zoom<\/em> &rarr; <em>200%<\/em><\/p>\n<p>See also:<\/p>\n<ul>\n<li><a href=\"https:\/\/draculatheme.com\/libreoffice\">Dracula theme for LibreOffice<\/a> (referenced <a href=\"https:\/\/superuser.com\/questions\/1700874\/why-is-libreoffice-not-detecting-the-theme\">here<\/a>)<\/li>\n<\/ul>\n<h2 id=\"DarkModeOnWikipedia\">Bonus: Change to dark mode on Wikipedia<\/h2>\n<p>When logged in, open <a href=\"https:\/\/en.wikipedia.org\/wiki\/Special:Preferences\"><em>Preferences<\/em><\/a> &rarr; section &#8220;Appearance&#8221; (about 20% down) &rarr; Color. Set it to <em>&#8220;Dark&#8221;<\/em>.<\/p>\n<p>Note: This doesn&#8217;t work for the &#8220;Vector legacy (2010)&#8221; theme. In the same section, change to the &#8220;Vector (2022)&#8221; theme.<\/p>\n<p>When logged out: JavaScript must be allowed from <em>wikipedia.org<\/em> (e.g., in <a href=\"https:\/\/en.wikipedia.org\/wiki\/NoScript\">NoScript<\/a>). In the &#8220;Appearance&#8221; panel on the right, choose &#8220;Dark&#8221; in section &#8220;Color (beta)&#8221; (the third section). In subsequent sessions, that JavaScript must be allowed for it to work.<\/p>\n<p>See also:<\/p>\n<ul>\n<li><a href=\"https:\/\/en.wikipedia.org\/wiki\/Wikipedia:Dark_mode\">Wikipedia:Dark mode<\/a><\/li>\n<\/ul>\n<h2 id=\"DarkModeInGitk\">Bonus: Change to dark mode in <a href=\"https:\/\/git-scm.com\/docs\/gitk\">gitk<\/a> (a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Git\">Git<\/a> repository browser)<\/h2>\n<p>Menu &#8220;Edit&#8221; &rarr; &#8220;Preferences&#8221; &rarr; &#8220;Edit&#8221; &rarr; tab &#8220;Colors&#8221;. Then use buttons &#8220;Background&#8221; and &#8220;Foreground&#8221;.<\/p>\n<p>For example, Solarized (the decimal numbers are for red, green, and blue, respectively):<\/p>\n<ul>\n<li><em>&#8220;Background&#8221;<\/em>: 002B36 = decimal 00, 43, 54.<\/li>\n<li><em>&#8220;Foreground&#8221;<\/em>: 839496 = decimal 131, 148, 150.<\/li>\n<\/ul>\n<p>It <strong><em>isn&#8217;t<\/em><\/strong> possible to enter the numbers directly. The fields <em>appear<\/em> to editable, but they are not. The only way is using the sliders (or click in the colour bars). Thus, it may only be possible to enter the numbers this way (but it shouldn&#8217;t make any difference). <!-- <No, it does work if pressing the button at the left> <strong><em>Note<\/em><\/strong>: Only one of \"Background\" and \"Foreground\" can be changed at a time; press <em>OK<\/em> and restart the dialog for the second... --><\/p>\n<p>Extra: Increase the font size (of the main list): Menu <em>Edit<\/em> &rarr; <em>Preferences<\/em> &rarr; tab <em>Fonts<\/em> &rarr; <em>Main font<\/em>: Set &#8220;Size&#8221; to, for example, 12. The same for <em>Diff display font<\/em> for the diff view.<\/p>\n<p>This was tested with gitk version 1:2.39.5-0+deb12u3 (according to &#8216;apt-cache policy gitk&#8217;). <!-- See, e.g., <https:\/\/unix.stackexchange.com\/questions\/6284>  --><\/p>\n<h2 id=\"DarkModeInMeld\">Bonus: Change to dark mode in <a href=\"https:\/\/meldmerge.org\/\">Meld<\/a> (a diff tool)<\/h2>\n<p>Menu &#8220;Meld&#8221; &rarr; &#8220;Preferences&#8221; &rarr; &#8220;Edit&#8221; &rarr; tab &#8220;Editor&#8221; (the default) &rarr; &#8220;Syntax highlighting color scheme&#8221;. Set it to, for example, &#8220;Solarized Dark&#8221;.<\/p>\n<p>Though &#8220;Cobalt&#8221; is easier to read (high contrast).<\/p>\n<p>Extra: Increase the font size: Menu &#8220;Meld&#8221; &rarr; &#8220;Preferences&#8221; &rarr; &#8220;Edit&#8221; &rarr; tab &#8220;Editor&#8221; (the default). And:<\/p>\n<ol>\n<li>Uncheck &#8220;Use the system fixed width font&#8221;.<\/li>\n<li>&#8220;Editor font&#8221;: Change the size to, for example, 18.<\/li>\n<\/ol>\n<p>NB: In Meld 3.22.3, the menus are missing&#8230; At least using <a href=\"https:\/\/blog.linuxmint.com\/?p=4924\">LMDE&nbsp;7<\/a> (Gigi) with <a href=\"https:\/\/en.wikipedia.org\/wiki\/Cinnamon_(desktop_environment)\">Cinnamon<\/a>&nbsp;6.6.9. Instead, there are some icons at the top (but they can&#8217;t be activated with the keyboard). &#8220;Preferences&#8221; is in the hamburger menu on the right.<\/p>\n<h2 id=\"DarkModeInZMK_Pages\">Bonus: Change to dark mode on the ZMK web site<\/h2>\n<p>The <a href=\"https:\/\/zmk.dev\/docs\/development\/local-toolchain\/setup\/native#1-install-zephyr-dependencies\">ZMK web site<\/a> has a dark mode if JavaScript is enabled from &#8220;&#8230;zmk.dev&#8221;. <a href=\"https:\/\/zmk.dev\/docs\/development\/local-toolchain\/build-flash#building\">The page anchors<\/a> also work better for unknown reasons, even though it is a pure HTML feature (it ought to work without <strong><em>any<\/em><\/strong> JavaScript code).<\/p>\n<p>Enabling JavaScript may not be sufficient: There are <strong><em>three modes<\/em><\/strong> that can be changed by clicking one of the icons on the upper right, to the right of the GitHub icon, with hover text:<\/p>\n<ul>\n<li>&#8220;System mode&#8221;<\/li>\n<li>&#8220;Light mode&#8221;<\/li>\n<li>&#8220;Dark mode&#8221;<\/li>\n<\/ul>\n<p>Click until the hover text is &#8220;Dark mode&#8221;.<\/p>\n<h2 id=\"DarkModeInZMK_Pages\">Bonus: Change to dark mode on Discourse sites<\/h2>\n<p>For example, on the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Discourse_%28software%29\">Discourse<\/a> site <a href=\"https:\/\/www.keebtalk.com\/t\/just-learned-that-mechanical-keyboards-are-a-lifestyle\/24184\">KeebTalk<\/a> (mechanical keyboards).<\/p>\n<p>To change to dark mode, it is required to be logged into the Discourse site (and thus be registered). Click on upper right icon (profile), with hover text &#8220;Notifications and account&#8221;, &rarr; click on the profile icon (on the right, the last one, with hover text &#8220;Profile&#8221;) &rarr; &#8220;<a href=\"https:\/\/www.keebtalk.com\/u\/petermortensen\/preferences\/account\"><em>Preferences<\/em><\/a>&#8221; (second to last) &rarr; &#8220;<a href=\"https:\/\/www.keebtalk.com\/u\/petermortensen\/preferences\/interface\"><em>Interface<\/em><\/a>&#8221; (eight tab). For <em>&#8220;Theme&#8221;<\/em>, choose <em>&#8220;Dark&#8221;<\/em> and click <em>&#8220;Save Changes&#8221;<\/em>.<\/p>\n<p>It isn&#8217;t clear how far-ranging the option &#8220;Make this the default theme on all my devices&#8221; is. Is it only for the current Discourse site?<\/p>\n<p><!- \n    Adafruit macro pad:\n\n      https:\/\/www.reddit.com\/r\/macro_pads\/comments\/1jcdlep\/comment\/mi69v4g\/\n\n--><\/p>\n<p><!-- Marker for editing in WordPress: pppp --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>For instance, GitHub pages may be in dark mode when logged out and not when logged in. Sample GitHub page Change to dark mode When logged in, click on the profile picture in the upper right &rarr; Settings &rarr; Appearance &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"more-link\" href=\"https:\/\/pmortensen.eu\/world2\/2025\/03\/17\/change-to-dark-mode-on-github\/\"> <span class=\"screen-reader-text\">Change to &#8216;dark mode&#8217; on GitHub<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17,43,21,16,41,40],"tags":[],"_links":{"self":[{"href":"https:\/\/pmortensen.eu\/world2\/wp-json\/wp\/v2\/posts\/5689"}],"collection":[{"href":"https:\/\/pmortensen.eu\/world2\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pmortensen.eu\/world2\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pmortensen.eu\/world2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pmortensen.eu\/world2\/wp-json\/wp\/v2\/comments?post=5689"}],"version-history":[{"count":66,"href":"https:\/\/pmortensen.eu\/world2\/wp-json\/wp\/v2\/posts\/5689\/revisions"}],"predecessor-version":[{"id":6736,"href":"https:\/\/pmortensen.eu\/world2\/wp-json\/wp\/v2\/posts\/5689\/revisions\/6736"}],"wp:attachment":[{"href":"https:\/\/pmortensen.eu\/world2\/wp-json\/wp\/v2\/media?parent=5689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pmortensen.eu\/world2\/wp-json\/wp\/v2\/categories?post=5689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pmortensen.eu\/world2\/wp-json\/wp\/v2\/tags?post=5689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}