Skip to content

dark mode theme support for docs #174

@combe15

Description

@combe15

Can we have a dark mode on the docs?

Here is something I've been playing around with. I am a css amateur, so I will assume you will work out the issues but otherwise, here is the bulk of the work:

image

@media(prefers-color-scheme: dark) {
	body {
		color: #f5f7f9;
		background: #171f26;
	}
	#header-main {
		background: #171f26;
	}
	#header {
		background: #171f26;
	}
	#logo-docs {
		color: #9fa1ad;
	}
	.sidebar-link,
	.toc-link {
		color: #aaa;
	}
	#content-inner {
		background: #171f26;
	}
	#article-toc-top {
		color: #fff;
	}
	#article-toc-top:hover {
		color: #1094e8;
	}
	.article-title {
		color: #fff;
	}
	.article-content {
		color: #bbb;
	}
	.article-content blockquote {
		border: 1px solid #aaa;
		border-left: 5px solid #aaa;
		background: #333;
	}
	.article-content table {
		border: 1px solid #e3e3e3;
	}
	.article-content table tr:nth-child(2n) {
		background: #eee;
	}
	.article-footer {
		border-top: 1px solid #e3e3e3;
		color: #999;
	}
	#mobile-nav {
		background: #171f26;
	}
	.mobile-nav-toggle-bar {
		background: #aaa;
	}
	.mobile-nav-link {
		color: #aaa;
	}
	.mobile-nav-title {
		color: #666;
	}
	pre,
	code {
        color: #fff;
		background: #555;
	}
	#logo-wrap {
        background: #4f536d;
        border-radius: 10px;
    }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions