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

𐙚	1711134601 using Report Comment
torquilian	1707900207 using! Report Comment
miah	1707787737 used Report Comment
zomkip	1707328174 USINGGG!!!1 Report Comment
SafeInSanity	1707097376 Veey nice layout! Report Comment
ava ♡	1706764994 using Report Comment
Chenoa<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 Chenoa<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
Mateax☆(Vic's husband)	1701635107 For some reason, It dosen't work for me. Report Comment same by Mati🪼; 1704163823; Report
✝ C&SP ✝ (moved accounts)	1701291460 Sweet! All works well except for the body background for some reason Thanks! Report Comment just checked; seems to be the fault of the "layout created by" comment prior to the actual style. remove that line and you should be good. cheers. by Ikoe; 1701293822; Report
ANGELS CURSE*	1701284883 using Report Comment