DARK MODE | teary layouts

Tags: teary layouts, black, grey, gray, white, dark mode, night mode, stripes

Description:

This layout is bulletin, blog and overall mobile friendly! Who knew?

tired of that abnormally blinding light mode you see every page you go minus the profiles? do you just want to go a single moment without blinding yourself in the middle of the night because of your own bright profile? well i introduce you to my silly little profile, bulletin AND blog exclusive dark/night mode!

this layout comes with:
- barely any attributes hidden minus the footer, mood and contact icons! you can feel free to change this up if having too many headers is not your style
- some cute stripes adorning every header (including your username and also the layout background)!
- your interests, comments and blurbs are now in scrollboxes, so your profile isn't too long!
- a customized logo
- borders around profile pictures
- and a little more!

Preview:

Code:

<!-- (c) Layout created by (https://layouts.spacehey.com/layout?id=83241) --> <style> :root { --logo-blue: black; --lighter-blue: #242424; --even-lighter-blue: #242424; --lightest-blue: #242424!important; --dark-orange: white!important; --light-orange: #242424; --even-lighter-orange: #242424; } body { background: repeating-linear-gradient(45deg, #424242, #424242 10px, #333333 10px, #333333 20px); } nav .top { background: repeating-linear-gradient(45deg, black, black 10px, #1f1f1f 10px, #1f1f1f 20px); } .container { border: 1px solid black; background-color: #383838; margin-top: 10px; } p, a, .friends .inner p, h3, h4, h5, h6, .profile-info { color: white!important; } main { background-color: #383838; } .count { color: black; filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(0 -1px 0 white) drop-shadow(1px 0 white); } button, [id=q] { background-color: black; border: 2px solid white; color: white; } h1, h2{ color: black; filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(0 -1px 0 white) drop-shadow(1px 0 white); } h1 { background: repeating-linear-gradient(45deg, black, black 10px, #1f1f1f 10px, #1f1f1f 20px)!important; border: 2px solid white!important; color: white; padding: 5px; } .blurbs, .friends, .mood { border: 2px solid #242424; } .mood { font-size: 0px; height: 0px; opacity: 0; margin-top: -0px; } .url-info { display: none; } FOOTER > UL.links { display: none; } FOOTER > P:nth-child(1) { display: none; } FOOTER > P:nth-child(2) { display: none; } P.copyright { display: none; } footer { height: 5px; background-color: transparent; background-position: center; margin-top: -20px; } .friends { margin-bottom: 20px; } .logo { filter: invert(1) drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(0 -1px 0 white) drop-shadow(1px 0 white); } a, nav .links a, .special { color: var(--links) !important; text-shadow: none; } a:hover, a:active, a:visited, nav .links a:hover { text-decoration: none; } a:hover, h1:hover { font-style: italic; } .profile-pic img, .person img, .comments-table td:first-child img { filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(0 -1px 0 white) drop-shadow(1px 0 white) drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black) drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(0 -1px 0 white) drop-shadow(1px 0 white) drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black); } .online img { display: none; } .online { filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black) drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(0 -1px 0 white) drop-shadow(1px 0 white) drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black); } .contact a { color: white!important; } .friends-grid { text-align: center; } .blurbs { overflow-y: auto; overflow-x: hidden; height: 300px; } .table-section:nth-of-type(even) { display: none; } .table-section { overflow-y: auto; overflow-x: hidden; height: 922px; } .comments-table { display: block; height: 607px!important; overflow-y: scroll; } .blog-preview, .general-about { border: 2px solid #242424; } .general-about { height: auto; display: grid; margin-bottom: -32px; text-align: center; } .blog-preview h4, .blurbs .heading, .blurbs .section h4, .contact .heading, .table-section .heading, .friends .heading, .profile-info { background: repeating-linear-gradient(45deg, black, black 10px, #1f1f1f 10px, #1f1f1f 20px)!important; border: 2px solid white!important; margin-top: -1px; padding: 4px } .blurbs, .comments-table, .blog-preview, .contact, .mood, .general-about, .friends, .table-section, .mood, .main, .profile-info { padding: 5px; } nav .links { text-align: center; </style> <style> .contact .inner a img { font-size: 0; } .contact .inner a img:before { font-size: 1em; display: block } .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before { /* Add to Friends */ content: "" } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { /* Add to Favorites */ content: "" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* Send Message */ content: "" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* Forward to Friend */ content: "" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { /* Instant Message */ content: "" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { /* Block User */ content: "" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { /* Add to Group */ content: "" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* Report Profile */ content: "" } </style> <style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-7/cur610.cur), auto !important;}</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.