Yote's personal dark theme

Tags: dark theme, simple, spinning profile picture

Description:

Simple and easy dark theme with optional logo replacement in SpaceHey [WARNING: Please read the SpaceHey rules and change the logo to SpaceHey-like theme to respect the rules]

Preview:

Code:

<!-- (c) Layout created by SynceYote (https://layouts.spacehey.com/layout?id=105445) --> /* Please read the SpaceHey rules and change the logo to SpaceHey-like theme to respect the rules Simple HTML code to replace SpaceHey logo ```<a class="SpaceHeyNewLogo" href="https://spacehey.com/home"><img class="SpaceHeyNewLogoIcon" src="/path/to/your/logo.png"/></a>``` */ /* Adjusting position of the logo */ .SpaceHeyNewLogoIcon { position: absolute; top: 0%; width: 165px !important; margin-left: -335px; padding: 10px; } /* Hide existing logo */ .logo { display: none !important; } /* Make a little spinny profile picture */ img[alt="SynceYote's profile picture"].pfp-fallback { rotate: 0deg; -webkit-animation: spin 10s linear infinite; -moz-animation: spin 10s linear infinite; animation: spin 10s linear infinite; border-radius: 100%; } /* Spinning animation configuration */ @-webkit-keyframes spin{ 100%{-webkit-transform: rotate(360deg);} } @-moz-keyframes spin{ 100%{-webkit-transform: rotate(360deg);} } @keyframes spin{ 100%{-webkit-transform: rotate(360deg);} } /* Dark theme code goes here */ body { background-color: #111; } main { background-color: #333; color: #ccc; } .heading { color: white !important; background-color: rgb(27, 27, 27) !important; } .profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions { width: 100%; border: 2px solid rgb(27, 27, 27) !important; margin: 10px 0 !important; } .contact, .url-info, .table-section, .details-table td { border: 2px solid rgb(27, 27, 27) !important; } footer { background-color: rgb(30, 30, 30) !important; } .details-table td { background-color: #1d1d1d !important; } .details-table { background-color: #161616 !important; } /* Online animation goes here */ .online { -webkit-animation: online 1s ease-in-out infinite !important; -moz-animation: online 1s ease-in-out infinite !important; animation: online 1s ease-in-out infinite !important; } /* Online animation configuration */ @-webkit-keyframes online { 0% { color: white; } 50% { color: #0c8c00; } 100% { color: white; } } @-moz-keyframes online { 0% { color: white; } 50% { color: #0c8c00; } 100% { color: white; } } @keyframes online { 0% { color: white; } 50% { color: #0c8c00; } 100% { color: white; } } /* Stop green blinking icon */ .online img { -webkit-animation: none !important; -moz-animation: none !important; animation: none !important; } /* Flashing red whenever go offline */ .ago { -webkit-animation: offline 1s ease-in-out infinite !important; -moz-animation: offline 1s ease-in-out infinite !important; animation: offline 1s ease-in-out infinite !important; } /* Offline animation configuration */ @-webkit-keyframes offline { 0% { color: white; } 50% { color: #d70000; } 100% { color: white; } } @-moz-keyframes offline { 0% { color: white; } 50% { color: #d70000; } 100% { color: white; } } @keyframes offline { 0% { color: white; } 50% { color: #d70000; } 100% { color: white; } } /* Make all text white*/ p:not(.online), i, li { color: white !important; } /* Make all a tag a weird color*/ a { color: #6ba7ff !important; } /* Misc */ nav .top { background: #292929 !important; } nav .links { background: #242424 !important; } .links { margin-top: 10px; } .top { padding: 15px 10px 30px 10px !important; } /* What's new? 1.1 bug fixes */ /* Fixed logo appear on mobile devices */ /* Fixed all the common issue with replace logo and other areas */ /* This layout is now discontinued */

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.