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

Peace/Eli	1754558239 using! Report Comment
F1nn(l3y)	1754011759 Using : ) Report Comment
mars	1753761255 using Report Comment
M1k4_	1749055993 using brah! swagge! Report Comment
LunaTheWolp	1746569707 Using :3 Report Comment
sa!ntzz	1742989937 usingg Report Comment
MahinDeezerz	1741512162 usinggggg :3 Report Comment
diare	1741169558 using:333 Report Comment
⋆.˚✮kai✮˚.⋆	1738780338 Gna use this tyyy <3 Report Comment
UrPalBug	1737342486 using!!! (ima layer fifty thinngs over it omg) Report Comment
BeakerTheCryptid	1736472351 using=] Report Comment
Finley_Is_Here_Xd	1736247819 THANK YOU!!!!!! [im using this now lol] Report Comment
Jeremías	1734656140 Usando... AAAAHHHH, QUE BUEN LAYOUT :D Report Comment
Finn	1733548353 Usinggg Report Comment
heavenhead	1731077459 usinggg!! Report Comment
Auguztine	1726865549 using !!! :3 Report Comment
✞𝒮𝒜𝐿𝑀𝒪𝑀𝐸𝐿𝐿𝒜✞	1719551872 Using Report Comment
vannillaAJofficial204	1717973636 i will use this for my profile. thank you very much Report Comment
Roww4nnnnn_	1714741469 using! Report Comment