Dark Mode

Tags: dark, black, layout, simple

Description:

🕶

Dark Mode

feel free to modify this layout to use it on your own profile page. simply change the value of the color code variables.😃

hack this layout profile yourself by changing the value of the variables below this comment in the code.

/* == START | LAYOUT VARIABLES */.
use the color picker to find the color you want with devtool or you can get the color codes from this website: https://html-color.codes/

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ꦨꦺꦏ꧀ꦠꦶ (https://layouts.spacehey.com/layout?id=938) -->

<style>
/* == START | LAYOUT VARIABLES */
:root{
  /*background color*/
  --site-bg: #262626;     /*> site background */
  --header-bg: #313a56;
  --navbar-bg: #29384b;
  --content-bg: #171717;  /*> profile background */
  --footer-bg: #242424;
  --left-heading-bg:#29324b;    /*> left column profile heading titles */
  --right-heading-bg:#604e2f;   /*> right column profile heading titles */
  --left-table-first-column-bg:#282826;
  --left-table-column-bg:#21211f;
  --right-table-first-column-bg:#785a26; /*> first column of the friends comments*/
  --right-table-column-bg:#543716;       /*> second column of the friends comments*/
  --input-bg:#262624;

  /*border color*/
  --input-bd:#706658;
  --left-table-bd:#204572;
  --right-table-bd:#756c5c;    /*> friends comments border */

  /* text color */
  --base-text:#fff3c4;
  --link-text:#a8b5b8;
  --input-text:#fff3c4;
  --left-heading-text:#fff3c4;
  --left-table-first-column-text:#a8b5b8;
  --right-heading-text:#b67764;
  --blurbs-heading-text:#b47465;

  /* font */
  --base-font:inherit;        /* use another font. ex: monospace */
  --base-font-size:inherit;   /* all font base size. size in (px|em|rem) */  
  --profile-name-size:3rem;   /* size of the profile name */

  /* text content */
  --profile-name-text:"your name"; /* same as your profile name */
}
/* == END | LAYOUT VARIABLES */

html{overflow-x:hidden;}
body{background:var(--site-bg) !important;color:var(--base-text);}
.container{font-family:var(--base-font);font-size:var(--base-font-size);}
a{color:var(--link-text) !important;}
nav .top{background:var(--header-bg) !important;}
nav .links{background:var(--navbar-bg) !important;}
input,button{border-color:var(--input-bd);color:var(--input-text);background-color:var(--input-bg);}
main{background:var(--content-bg) !important;color:var(--base-text);}
.profile h1{position:relative;font-size:var(--profile-name-size)}.profile h1:after{content:var(--profile-name-text);position:absolute;top:0;left:.5rem;color:#fff;background-color:#0c1016;overflow:hidden;text-shadow:-.5rem 0 #ff6e48;clip:rect(0,90rem,0,0);animation:noise 3s infinite linear alternate-reverse}.profile h1:before{content:var(--profile-name-text);position:absolute;top:0;left:-1rem;color:#fff;background-color:#0c1016;overflow:hidden;text-shadow:.3rem 0 #ff6e48;clip:rect(0,90rem,0,0);animation:noise 2s infinite linear alternate-reverse}@-webkit-keyframes noise{0%{clip:rect(11rem,99.99rem,5rem,0)}4%{clip:rect(7rem,99.99rem,5rem,0)}8%{clip:rect(6rem,99.99rem,8rem,0)}12%{clip:rect(6rem,99.99rem,1rem,0)}16%{clip:rect(8rem,99.99rem,1rem,0)}20%{clip:rect(10rem,99.99rem,5rem,0)}24%{clip:rect(1rem,99.99rem,3rem,0)}28%{clip:rect(1rem,99.99rem,1rem,0)}32%{clip:rect(6rem,99.99rem,6rem,0)}36%{clip:rect(6rem,99.99rem,11rem,0)}40%{clip:rect(3rem,99.99rem,6rem,0)}44%{clip:rect(7rem,99.99rem,3rem,0)}48%{clip:rect(2rem,99.99rem,1rem,0)}52%{clip:rect(11rem,99.99rem,11rem,0)}56%{clip:rect(9rem,99.99rem,8rem,0)}60%{clip:rect(6rem,99.99rem,8rem,0)}64%{clip:rect(4rem,99.99rem,4rem,0)}68%{clip:rect(7rem,99.99rem,2rem,0)}72%{clip:rect(11rem,99.99rem,7rem,0)}76%{clip:rect(12rem,99.99rem,1rem,0)}80%{clip:rect(4rem,99.99rem,4rem,0)}84%{clip:rect(8rem,99.99rem,8rem,0)}88%{clip:rect(2rem,99.99rem,3rem,0)}92%{clip:rect(3rem,99.99rem,5rem,0)}96%{clip:rect(11rem,99.99rem,11rem,0)}100%{clip:rect(2rem,99.99rem,10rem,0)}}@keyframes noise{0%{clip:rect(11rem,99.99rem,5rem,0)}4%{clip:rect(7rem,99.99rem,5rem,0)}8%{clip:rect(6rem,99.99rem,8rem,0)}12%{clip:rect(6rem,99.99rem,1rem,0)}16%{clip:rect(8rem,99.99rem,1rem,0)}20%{clip:rect(10rem,99.99rem,5rem,0)}24%{clip:rect(1rem,99.99rem,3rem,0)}28%{clip:rect(1rem,99.99rem,1rem,0)}32%{clip:rect(6rem,99.99rem,6rem,0)}36%{clip:rect(6rem,99.99rem,11rem,0)}40%{clip:rect(3rem,99.99rem,6rem,0)}44%{clip:rect(7rem,99.99rem,3rem,0)}48%{clip:rect(2rem,99.99rem,1rem,0)}52%{clip:rect(11rem,99.99rem,11rem,0)}56%{clip:rect(9rem,99.99rem,8rem,0)}60%{clip:rect(6rem,99.99rem,8rem,0)}64%{clip:rect(4rem,99.99rem,4rem,0)}68%{clip:rect(7rem,99.99rem,2rem,0)}72%{clip:rect(11rem,99.99rem,7rem,0)}76%{clip:rect(12rem,99.99rem,1rem,0)}80%{clip:rect(4rem,99.99rem,4rem,0)}84%{clip:rect(8rem,99.99rem,8rem,0)}88%{clip:rect(2rem,99.99rem,3rem,0)}92%{clip:rect(3rem,99.99rem,5rem,0)}96%{clip:rect(11rem,99.99rem,11rem,0)}100%{clip:rect(2rem,99.99rem,10rem,0)}}
.left .heading{background:var(--left-heading-bg) !important;color:var(--left-heading-text) !important;}
.right .heading{background:var(--right-heading-bg) !important;color:var(--right-heading-text) !important;}
.blurbs .section h4{color:var(--blurbs-heading-text) !important;}
.contact, .url-info, .table-section{border-color:var(--left-table-bd) !important;}
.right table{border-color:var(--right-table-bd) !important;}
.left table td{background:var(--left-table-column-bg) !important;}
.left table td:first-child{background:var(--left-table-first-column-bg) !important;color:var(--left-table-first-column-text) !important;}
.right table td{background:var(--right-table-column-bg) !important;}
.right table td:first-child{background:var(--right-table-first-column-bg) !important;}
img[alt^="profile"]{filter: contrast(180%);}
img[alt^="profile"]:hover {transform: scaleX(-1);}
.profile-pic img{border-radius:50%}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{color:var(--link-text)}
footer{background:var(--footer-bg) !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.

Comments

Displaying 20 of 26 comments ( View all | Add Comment )

Auguzt	1726865549 using !!! :3 Report Comment
ꕥSpamꕥ	1719551872 Using Report Comment
vannillaAJofficial204	1717973636 i will use this for my profile. thank you very much Report Comment
nanoswagger	1715090054 using!!!!!! Report Comment
Roww4nnnnn_	1714741469 using! Report Comment
NOISE	1710897760 USING!!!! Report Comment
lennon	1699496143 Using! Report Comment
Galactipod	1697728505 thanks, using with blue colors Report Comment
olittle	1695678112 using it Report Comment
ev XD	1694362450 usinggg Report Comment
Shadow man	1690335342 using Report Comment
nucg5040	1688852224 using Report Comment
Nico 〣( ºΔº )〣	1679591030 using!! Report Comment
Nixzy_Drawz	1674350342 using :) Report Comment
BuzzKill	1674102443 Nice. Using Report Comment
.. oskarი ☥	1673868930 using, looks cool Report Comment
K£nny	1671724493 Sick!! Using Report Comment
Pablo Antonio	1636761587 I've tested a bunch and this is the one I'm sticking with even with the bug where my name is some text flashes YOUR NAME in the background. Check my profile out @pabloantonio to see. Hopefully that can be fixed but I can live with that if not. Thank you. Report Comment Hey Pablo, You're supposed to replace "your name" in the code (located next to --profile-name-text, in quotes) to the name on your profile. The glitch effect is supposed to match your profile name. You can delete everything within the quotes if you don't want the effect at all! by Frankie; 1637385748; Report
Adam	1621631772 Any way to add an image background? Report Comment