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 20 comments ( View all | Add 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
DizzyToast	1674786218 using!! Report Comment
Nixzy_:D	1674350342 using :) Report Comment
BuzzKill	1674102443 Nice. Using Report Comment
severus	1673868930 using, looks cool Report Comment
S̶l̶u̶t̶t̶y̶ ᴀxᴇ	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
Dionysus The Donkey	1613908575 Thanks! I used it and it's so amazing!!! Report Comment
bob e	1613164001 I like this one a lot thanks for making it Report Comment
Mirrmurr	1612967076 Thank you pal! I really love this one! Report Comment
Jenny Nightmares	1612921673 looks great , thank you :) Report Comment
katawa	1612787269 What color code do I need to mess around to change the brown color? Report Comment This one to change the brown background. `--right-heading-bg:#604e2f;` and this one for the color of the text `--right-heading-text:#b67764;` by ꦨꦺꦏ꧀ꦠꦶ; 1612804530; Report
Katie	1612671963 This is cool Report Comment thank you by ꦨꦺꦏ꧀ꦠꦶ; 1612672040; Report