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 28 comments ( View all | Add Comment )

Lawrence [age: 17]	1780673462 using Report Comment
Sun	1780214448 using! Report Comment
𝒗𝒍𝒊𝒔	1779498263 using Report 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
jimmy	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
Nemi! \| #1 soap eater	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