Jexxinium's Dark Theme v.1.00

Tags:
Description:

A heavily-customized spacehey dark-theme, made only for desktops and themed for my website's upcoming design
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by jxnm (https://layouts.spacehey.com/layout?id=26562) -->

<style>
    :root {
    --cloudy-indigo: #1F2758; --indigo: #1F2758;
    --jexx-blue: #1B4D85;
    --azure: #20679E;
    --isonoic: #355D95;
    --ethereal-blue: #7DB0DC;
    --purplish-sunset: #6C4582; --purple: #6C4582;
    --faint-lavender: #8975C2; --lavender: #8975C2;
    
    --midnight-void: #000000; --void: #000000;
    --rainy-evening: #303C48;
    --foggy-morning: #5B6779; --fog: #5B6779;
    --frozen-metal: #90A0B5; --metal: #90A0B5;
    --silver-shine: #D3DCE3; --silver: #D3DCE3;
    --heavenly-cloud: #fff; --cloud: #fff;
    
    --deep-forest: #317059; --forest: #317059;
    --emerald: #059863;
    --frog-green: #40D257; --frog: #40D257;
    --limeade: #C6E865;
    --mojito: #F5F5CA;
    
    --crimson: #832121;
    --ruby-red: #C9203B; --ruby: #C9203B;
    --charon: #CD3261;
    --tangerine: #E5833D;
    --sandstorm: #EFDB92;
    }

    body {
        font-family: "Tahoma", sans-serif;
        background-color: rgb(64, 72, 80);
        color: white;
        font-size: 14px;
    }
    
    div.container {
        text-transform: lowercase;
    }
    
    main {
        background-color: #fff0;
        background-image: linear-gradient(#0001, #fff1);
        background-size: 1px 2px;
    }
    
    main .left {
        background-color: var(--azure);
        background-image: linear-gradient(#fff0 45px, #fff 0px);
    }
    
    h1 {
    font-family: "Consolas", "Lucida Sans Unicode", monospace;
    text-transform: lowercase;
    zoom: 1.1;
    color: white;
    }
    
    .profile h1 {
            color: var(--fog);
            background-image: url("https://i.imgur.com/KHyOczx.png"), linear-gradient(#ddd 0px, #fff 1px);
            background-size: 30px 100%, 1px 3px;
            background-position: right;
            background-repeat: no-repeat, repeat;
            padding: 5px 8px;
            position: relative;
            right: 9px;
            top: 1.5px;
        }
        
    nav .links li:not(:last-child)::after {
        content: "";
    }
    
    h1::before {
    content: ':: ';
    color: var(--azure);
    }
    
    h2, h3 {
    font-family: "Verdana", sans-serif;
    zoom: 1.1;
    color: white;
    }

    h4, h5, h6 {
    color: white;
    }
    
    nav .top {
        background-color: rgb(56, 64, 72);
        border-radius: 9px 9px 0px 0px;
        height: 47px;
        align-items: flex-end;
        display: block;
        margin-top: 27px;
    }
    
    nav .links {
        background-color: rgb(48, 56, 64);
    }
    
    .logo {
        content: url(https://i.imgur.com/hARS373.png);
    }
    
    a {
    color: var(--azure);
    text-decoration-color: #8888;
    text-decoration: underline;
    }
    
    a:hover {
    color: var(--azure);
    text-decoration-color: #888;
    }

    a:visited {
    text-decoration-color: inherit;
    }
    
    .profile .friends .person p {
        color: white;
    }
    
    nav .links a {
        background-color: rgb(32, 36, 42);
        display: inline-block;
        border-radius: 25px;
        font-size: 10px;
        font-weight: 800;
        height: 12px;
        padding-right: 8px;
        width: 80px;
        text-transform: lowercase;
        text-align: right;
        margin: 3px 1px;
        position: relative;
        left: 7px;
        text-shadow: 0px 0px 0px #0000;
    }
    
    nav .links a:hover {
        color: var(--silver-shine);
    }
    
    nav .links a::before {
        background-image: url(https://i.imgur.com/lNf6Q1n.png);
	    background-size: 100% 100%;
	    content: '';
	    display: inline-flex;
	    height: 16px;
	    margin-right: 6px;
        top: -2px;
	    width: 16px;
        position: relative;
        float: left;
    }
    
    .profile :is(.contact, .url-info, .table-section) {
        border: 1px solid var(--fog);
        box-shadow: 2px 3px #6784;
        border-radius: 5px 5px 2px 2px;
    }
    
    .profile :is(.contact, .url-info, .table-section) .heading {
        background-color: var(--azure);
        background-image: linear-gradient(var(--jexx-blue), var(--azure));
        font-size: 12px;
        font-family: "Consolas";
        padding: 5px 10px;
        border-radius:  1px 1px 0px 0px;
        text-transform: lowercase;
        font-weight: 100;
    }
    
    .profile :is(.contact, .url-info, .table-section) .heading ::before {
        content: ":: ";
    }
    
    .details-table  {
    -webkit-border-horizontal-spacing: 0px;
    -webkit-border-vertical-spacing: 0px;
    }
    
    .details-table td {
        padding: 4px 8px;
    }
    
    .url-info p b {
        color: var(--azure);
    }
    
    .details-table td {
        background-color: #6781;
        border-bottom: 1px solid #0005;
    }
    
    .details-table td:first-child {
        background-color: #6783;
    }
    
    .details-table td * {
        font-size: 10px;
        color: var(--fog);
    }
    
    main .right {
        background: url(https://i.imgur.com/axsQzRd.png), rgb(56, 64, 72);
        background-blend-mode: soft-light, normal;
        padding: 0px;

    }
    
    .blog-preview {
        padding: 0px 20px;
    }
    
    .profile :is(.blurbs, .friends) .heading {
        padding: 10px 0px 7px 0px;
        background: url(https://i.imgur.com/LtqDmJB.gif), rgb(32, 36, 42);
        background-repeat: no-repeat;
        background-position: bottom right;
        background-blend-mode: soft-light;
        font-family: "sirquitry";
        line-height: 1.2;
        font-size: 10px;
        text-transform: lowercase;
        color: var(--silver-shine);
        padding-left: 10px;
    }
    
    .friends .heading a.more {
        font-family: Tahoma;
        font-size: 10px;
    }
    
    @font-face {
        font-family: 'sirquitry';
        src: url('https://dl.dropbox.com/s/xjs4pw11cd7ijr3/sirquitry.ttf');
    }
    
    .profile .friends .person img:not(.icon), .general-about .profile-pic img {
        aspect-ratio: 1;
        border-radius: 3px;
        box-shadow: 5px 5px #0001;
    }
    
    .profile .friends .person {
        padding: 5px 10px;
    }
    
    .friends-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        margin: 10px;
    }
    
    .friends .heading a.more {
        margin-right: 7px;
    }
    
    .comments-table td * {
        font-size: 10px;
    }
    
    .right p {
        color: white;
    }
    
    .profile :is(.friends, .blurbs) .inner {
        border: 1px solid #fff1;
        padding: 5px 15px;
        background-color: rgb(48, 56, 64);
        border-right: 0px;
    }
    
    table.comments-table {
        border: 1px solid var(--fog);
        border-radius: 5px 5px 2px 2px;
        background-color: #e0e4e7;
    }
    
    .comments-table td {
        border: 0px;
        background-color: #0000;
        border-bottom: 1px solid #6784!important;
        position: relative;
    }
    
     .comments-table td:first-child {
        border: 0px;
        background-color: var(--azure);
        background-image: linear-gradient(var(--azure), var(--jexx-blue));
    } 
    
    .comments-table td * {
        text-decoration: none;
    }
    
    .comments-table td:last-child * {
        color: black;
    }
    
    .comments-table td * :hover {
        text-decoration: underline;
        text-decoration-color: #fff4 ;
    }
    
    button, input, textarea, select, option, fieldset {
        padding: 3 15;
        font-size: 12px;
        border-radius: 8px; 
        text-transform: lowercase;
    }
    
    is(button, input[type=button])[disabled] {
    opacity: 0.5;
}

   :is(button, input[type=button])[disabled]:active {
    opacity: 0.25;
}

    button:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
    background-color: var(--azure);  
    box-shadow: 2px 2px #0004;
    color: white!important;
}

    button:active, input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
    opacity: 0.75;
}

    button, input[type=button], input[type=submit], input[type=reset] {
    font-family: "Tahoma", sans-serif;
    border: 1px outset #fff2;
    margin: 0.25em 0;
    min-width: 75px;
    border-radius: 3px; 
    border-top-left-radius: 10px 20px;
    border-bottom-right-radius: 10px 20px;
    transition-duration: 0.1s;
    }
    
    nav .top .center form {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 75%;
        position: relative;
        left: 15%;
    }
    
    nav .top .right {
        display: flex;
        justify-content: space-evenly;
        position: relative;
        bottom: 6px;
    }
    
    .top .right a {
        margin: 0px 10px;
    }
    
    td :is(.comments-table .report, button) {
        display: inline
    }
    
    .comments-table .report {
        position: relative;
        bottom: 6px;
        text-transform: lowercase;
    }
    
    input:not(button, input[type=button], input[type=submit], input[type=reset], input[type=radio], input[type=checkbox]), select { 
    border: 1px inset #bcd;
    background: linear-gradient(180deg, rgba(235,240,245,1) 0%, rgba(255,255,255,1) 100%);
    width: 300;
    font-family: "Tahoma", sans-serif;
    }
    
    
    .profile .friends .person p, .comments-table td {
        text-transform: none!important;
    }
    
    .profile .blurbs .section h4 {
        color: white;
    }
    
    .count {
        color: var(--frozen-metal);
    }
    
    :root {
    --topic1: "General";  /* EDIT INTEREST LABELS HERE */
    --topic2: "Music";
    --topic3: "Movies & TV";
    --topic4: "Aesthetic";
    --topic5: "Food";
    --topic6: "Hobbies";

 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
   color:var(--links) !important;
   letter-spacing:normal !important;
   text-shadow: 0px 0px var(--fog) !important; /* CHANGE COLOR OF INTEREST LABELS HERE */
}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
    content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
    content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
    content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
    content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
    content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
    content: var(--topic6);
}

.profile .friends .person p {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.comment-replies {
    margin: 2px;
    border: none;
}

.comment-reply {
    border: 1px solid #0004!important;
    margin: 2px;
    background-color: #f5f6f7;
    box-shadow: 2px 2px #6784;
}    

.comment-reply:first-of-type {
    border-radius: 5px 5px 0px 0px;
}

.comment-reply:last-of-type {
    border-radius: 0px 0px 5px 5px;
}

footer {
    border-radius: 5px;
    background-color: #1234;
}
    
.comments-table td:last-child p:nth-of-type(2) {
    background-color: var(--azure);
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #0004;
    color: white;
    box-shadow: 2px 2px #6784;
    background-image: linear-gradient(var(--jexx-blue), var(--azure));
}    

.comments-table td:last-child p:nth-of-type(2)::before {
content: '';
position: absolute;
border-style: solid;
border-width: 5px 15px 5px 0;
border-color: transparent #174c74;
display: block;
width: 0;
z-index: 0;
margin-top: -10px;
left: -11px;
top: 40px;
}

.comments-table td:last-child p:nth-of-type(2)::after {
content: '';
position: absolute;
border-style: solid;
border-width: 4px 13px 4px 0;
border-color: transparent var(--azure);
display: block;
width: 0;
z-index: 0;
margin-top: -9px;
left: -9px;
top: 40px;
filter: brightness(0.9)
} 
    .comment-reply p:nth-of-type(2) {
    background-color: white!important;
    background-image: none!important;
    box-shadow: 0px 0px #0000!important;
    margin-bottom: 0px;
    border-radius: 5px 5px 0px 0px!important;
    border: 1px solid #0002!important;
    position: relative;
    top: 10px;
}

.comment-reply p:nth-of-type(2)::before {
    display: none!important;
}

.comment-reply p:nth-of-type(2)::after {
    display: none!important;
}

.section p p, .details-table td:last-child{
    text-transform: none;
}

</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 2 of 2 comments ( View all | Add Comment )
C♡LI
1676999143
might use ^.^
Report Comment
Rikiishi
1676984480
I might use this, I like it a lot:]
Report Comment