At Night, Profile-ified

Tags: dark, blue, simple

Description:

A straightforward, no-frills "port" of the overarching At Night dark mode, now re-tinkered for profiles. Not much to write home about; same design language, same nuts and bolts.

Much like the original, this theme is CC0. You're free to use this thing and tinker with it to your heart's content without letting me know. Do whatever you want.

Preview:

click on the image for a larger preview

Code:

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

<style>
body { background: linear-gradient(0deg, #151530, #10101F); background-attachment: fixed; } nav .links, nav .top input, main, footer { background-color: #10101F; }
main, footer { color: white; } footer { outline: 1px solid #40405F; }
/* optional setting; remove the 'edit x' buttons scattered around */
/* .edit-link { display: none; } */

nav .top { background: linear-gradient(180deg, #292948, #20203F); }
nav .top input {
    color: white;
    border-style: solid; border-color: #10101F; border-radius: 2px;
    font-family: monospace; letter-spacing: -1px;
}
nav .top button:not(.logout-btn) {
    background: #20203F; color: white;
    border: 1px solid #9090AF;
    box-shadow: 2px 2px #AAAAFF;
}
nav .top button:not(.logout-btn):active { background: white; color: #20203F; }
nav .links { padding: 6px 5px 5px 10px; border-bottom: 2px solid #40405F; }
nav .links a { text-shadow: none; } nav .links .special a { color: #BAFFAA; }
nav .links a:hover { color: #AAAAFF; text-decoration: none; outline: 1px solid #AAAAFF; padding: 2px 1px 2px 1px; }
nav .links a:active { background-color: #AAAAFF; color: #10101F; }
a, .profile .friends .person p { color: #AAAAFF; }
a:hover, a:active, .profile .friends .person p:hover { color: #FAF; }
a:active { text-decoration: underline dotted; }
.count, .profile .blurbs .section h4 { color: #FAF; }
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after { color: #40405F; }
img.pfp-fallback[src$="profilepic.png"], img.group-pic[src$="grouppic.png"] { filter: sepia(1) invert(1) hue-rotate(5deg) contrast(0.89); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #09090F; }
::-webkit-scrollbar-thumb { background: #AAAAFF; }
::-webkit-scrollbar-thumb:hover { background: white; }

.next button, .previous button {
    background: #10101F; color: #AAAAFF;
    border: 1px solid #7777CC; padding: 3px 5px;
}
.next button:hover, .previous button:hover { background: #7777CC; color: #10101F; cursor: pointer; }

.success { background: #40405F; color: white; border: 1px solid #70708F; }
.edit-info { background: #20203F; border: 1px solid #40405F; }

p.online, .supporter a, .award a { color: #9999EE; } p.online img { filter: hue-rotate(135deg) saturate(0.57); }
.supporter img { filter: hue-rotate(255deg) saturate(0.5); }
.contact .icon { display: none; }

.profile h1 { border-left: 6px dotted #7777CC; padding-left: 8px; }
.general-about .profile-pic { margin: 0 15px 8px -20px; outline: 2px dotted #40405F; }

.nav-info { background: #292948; color: white; border-bottom: 2px dotted #10101F; border-left: 2px dashed #FAF; }
.profile-info { border: 1px dotted #AAF; background: linear-gradient(180deg, #292948, #20203F); }
.profile .blurbs .heading, .profile .friends .heading { border-right: 8px solid #50506F; background: #30304F; color: white; }
.profile .contact .heading, .profile .table-section .heading { background: #30304F; } .profile .contact, .profile .url-info, .profile .table-section { border: 2px solid #40405F; }
.blog-preview h4 { background: linear-gradient(90deg, #50506F, transparent); padding: 4px 8px;}

table.comments-table { border: 1px solid #10101F; }
.comments-table td:first-child { background: #1F1F50; width: 30%; padding: 2px; }
.comments-table td { background: #20203F; padding: 4px 8px; }
.comments-table button, .simple-container button[type="submit"] { background: #10101F; color: #AAAAFF; border: 1px solid #7777CC; padding: 2px 4px; }
.comments-table button:hover, .simple-container button[type="submit"]:hover { background: #7777CC; color: #10101F; cursor: pointer; }
.comment-replies { border: 1px dotted #7777CC; border-left: 4px dashed #7777CC; background: #10102F; margin-bottom: 8px; }
.comment-reply:not(:first-child) { border-top: 1px solid #7777CC; }
.bulletin .comments .heading { border-top: 1px dotted #7777EE; }
div#comments button { background: #10101F; color: #AAAAFF; border: 1px solid #7777CC; padding: 3px 5px; }
div#comments button:hover { background: #7777CC; color: #10101F; cursor: pointer; }

.details-table td:first-child { background: #30304F; color: #9090BF; }
.details-table td { background: #20203F; }

hr { border: 0px; height: 2px; background: linear-gradient(90deg, #1F1F50, #15152F); }
</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 20 of 25 comments ( View all | Add Comment )

𝑳	1772414790 using Report Comment
Dee	1770924362 Using Report Comment
Alex	1767568709 Using!! Report Comment
karo!100futuro	1765110095 Usando!! Report Comment
souplume	1760269398 Using Report Comment
Momo	1759112999 using Report Comment
dean !?!?!??!	1754079592 using Report Comment
˚₊‧꒰აANGELICA໒꒱ ‧₊˚	1748256497 using Report Comment
ੈ✩‧₊˚༺𝕱𝖎𝖘𝖍༻ੈ✩‧₊˚	1745380608 I really like this one, it's simple and nice. Not too much, doesn't affect anything but the text and background stuff. :) Report Comment
larinervus	1735660405 usinggggg Report Comment
Nemxies	1732933222 usingg Report Comment
Kajtek	1732905930 using (!!!) Report Comment
Emiot	1730798120 Using! Report Comment
TIRED_LUMI	1727759630 Using!! Report Comment
𝐀𝐒𝐇⛧	1721069926 using<333 Report Comment
𐙚	1711134601 using Report Comment
miah	1707787737 used Report Comment
RU3_	1707328174 USINGGG!!!1 Report Comment
SafeInSanity	1707097376 Veey nice layout! Report Comment
ava ♡	1706764994 using Report Comment