Nord Dark

Tags: dark, simple, nord

Description:

I like having websites with dark modes. So I spent 3 hours of my day creating this nice theme for SpaceHey (well, didn't have anything else to do anyways). Arguably, it was worth those 3 hours, in my opinion :).

You can use this layout freely, but please consider crediting me and/or the Nord authors somewhere! Thanks, and have fun~

Note: If you'd like to have this apply regardless of system theme (currently this layout only applies if your system theme settings are set to dark mode) - simply remove the first line in the style declaration (after the <style>) and the closing bracket at the end.

Thanks to the authors of the Nord color scheme, they made this whole darn thing possible in the first place. Very good theme, highly recommended (they have themes for most themeable text editors).

Changelog

12/26/21: fixed comment section colors

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by tilda (https://layouts.spacehey.com/layout?id=18272) -->

<style>
@media (prefers-color-scheme: dark) {
    :root {
        --gray: #2e3440;
        --dark-orange: #d8dee9;
        --logo-blue: #3b4252;
        --lighter-blue: #434c5e;
    }
    main {
        background-color: #4c566a;
        color: #d8dee9;
    }
    a:link, a {
        color: #e5e9f0;
    }
   
    footer {
        background-color: #3b4252;
    }
    .profile .contact, .profile .url-info, .profile .table-section, .home-actions {
        border-color: transparent !important;
    }
    .profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
        background-color: transparent;
        color: #d8dee9;
    }
    .profile .blurbs .heading, .profile .friends .heading {
        background-color: transparent !important;
    }
    .profile .friends .person p, footer p {
        color: #d8dee9;
    }
    .details-table td:first-child, .details-table td {
        background-color: #e5e9f0;
        color: #3b4252;
    }
    .count {
        color: #bf616a;
    }
    .online {
        color: #a3be8c;
    }
    img[alt="Online icon"] {
        filter: brightness(0) saturate(100%) invert(75%) sepia(11%) saturate(810%) hue-rotate(49deg) brightness(95%) contrast(89%); /* this is DUMB and STUPID and I'M SORRY */
    }
    td p a {
        color: #3b4252 !important;
    }
    a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active, nav .links a:hover {
        color: #eceff4;
    }
    .comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td {
        background-color: #4c566a;
    }
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 7 of 7 comments ( View all | Add Comment )

fyrefox	1706988142 using! tysm :) Report Comment
Catherine	1703407570 using this one! very cool :3 Report Comment
lina	1680513764 using !! thank you :) Report Comment
Sunny	1677570494 using this lovely layout, tysm!! Report Comment no problem, glad you like it!! by tilda; 1680487201; Report
summer	1662483057 nice theme Report Comment thank you!! by tilda; 1662962565; Report
Kei_	1640069101 Using it, thanks so much Report Comment no problem! btw i updated the layout to fix the colors on the comment section by tilda; 1640547217; Report
Digit	1639802677 Thanks for making this! I was looking for a dark theme but all the ones i found were either super edgy or just pure black lmao Report Comment of course :) by tilda; 1639857435; Report