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

☆Blue_Star☆	1741329119 Using Report Comment
larinervus	1735660405 usinggggg Report Comment
Nemie ˶ᵔ ᵕ ᵔ˶	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
torquilian	1707900207 using! Report Comment
miah	1707787737 used Report Comment
weepyblossoms	1707328174 USINGGG!!!1 Report Comment
SafeInSanity	1707097376 Veey nice layout! Report Comment
ava ♡	1706764994 using Report Comment
Charlie<3	1704746746 Heyo! The code works for me! The thing that was forgotten is the before body and the at the end of the code. Please everyone try using it after adding that, if it works Im happy :D Report Comment i'm assuming you meant <style> which the HTML interpreter 'ate' after commenting—and you'd be right. added it to the layout for safety's sake. cheers! issue on my part for automatically assuming most folks'd realize it goes in a style tag. blarg. by Ikoe; 1704810948; Report Didnt know the comments eat that up haha, Thank you for adding it now, most people that search layout probably dont know that stuff (i only started learning it this year in school tbh) by Charlie<3; 1704843766; Report
Rowan	1704165993 the code seems to be broken :( i tried doing what you said in another comment and that still didnt fix it Report Comment
♢ ♡ Dee ♧ ♤	1703933830 usingggg thnx so much Report Comment
𝐌𝐚𝐭𝐞𝐚𝐱☆(Vic's Husband)	1701635107 For some reason, It dosen't work for me. Report Comment same by mati :3; 1704163823; Report
vox	1701284883 using Report Comment