Skip to main content

friendica (DFRN) - Link to source

Dark Mode V3 of my Friendica FB Facelift user stylesheet. If you're using the Firefox userContent.css make sure to wrap all of this in @-moz-document domain(friendica.world){...} (or whichever server you're on). Otherwise copy+paste into the Stylus add-on for Firefox or Stylus extension for Chrome or the Userscripts extension for Safari. Then in your Friendica Settings - Display - Theme pick "Frio" and under Settings - Display - Theme Customization either pick "Dark" or "Black." Note that the dark mode version does not use a custom schemestring.

The Stylesheet:

/* FRIENDICA MODS V3 DARK MODE */
body {
       background-color: #1C1C1D !important;
       font-size: 15px !important;
       padding-top: 125px !important;
}
#topbar-first .nav > li > a, 
#topbar-first .nav > li > button, 
nav.navbar .nav > li > a, 
nav.navbar .nav > li > button{
       color: #B0B3B8 !important;
       
       }
#topbar-first, nav.navbar {
       background-color: #252728 !important;
       color: #B0B3B8 !important;
}
       #topbar-first .topbar-nav .nav-segment {
              margin-right: 10px;
       }
       #topbar-first .nav > li > a:hover:not(.selected) {
              background-color: rgba(255,255,255,.1) !important;
              border-radius: 8px !important;
       }
       .fa-lg {
              font-size: 24px !important;
       }
#topbar-first .nav > li > a:hover, 
#topbar-first .nav > li > a:focus, 
#topbar-first .nav > li > button:not(#main-menu):hover, 
#topbar-first .nav > li > button:not(#main-menu):focus, 
nav.navbar .nav > li > a:hover, 
nav.navbar .nav > li > a:focus, 
nav.navbar .nav > li > button:hover, 
nav.navbar .nav > li > button:focus {
  background-color: rgba(255,255,255,.1) !important;
       border-radius: 8px !important;
       
}    
#topbar-first .nav > li > a.selected {
       border-bottom: 3px solid #0866FF !important;
       color: #0866FF !important;
}
#topbar-first .nav > li > a.selected:hover,
#topbar-first .nav > li > #main-menu:hover,
#topbar-first .nav > li > #main-menu:focus {
       background-color: transparent !important;
       border-radius: 0 !important;
}
ul.tabs li {
       font-size: 15px !important;
       margin-left: 10px !important;
}
ul.tabs li.active {
       border-color: #0866FF !important;
}
       ul.tabs li a {
              margin-top: 8px;
              color: rgb(90, 167, 255) !important;
       }
       ul.tabs li:hover:not(.active) {
              border-bottom-width: 0px !important;
       }
              ul.tabs li:hover:not(.active) a {
                     background-color: rgba(255,255,255,.1) !important;
                     border-radius: 8px !important;
              }
    .dropdown-menu {
        padding-bottom: 15px !important;
    }
        .dropdown-menu li {
            margin: 10px;
            width: 92% !important;
            border-radius: 8px;
        }
            .dropdown-menu li:hover {
                border-color: transparent !important;
            }
header #banner {
       left: 0 !important;
       right: auto !important;
}
       header #banner #logo-img,
       .navbar-brand #logo-img {
              background-color: #0866FF !important;
       height: 40px !important;
       width: 40px !important;
       }
.topbar ul.nav {
       left: 50% !important;
       margin-left: -25% !important;
       position: relative;
}
#topbar-first .nav > .account img {
       border-radius: 100% !important;
       box-shadow: 0 0 1px rgba(255,255,255,.1) !important;
       height: 40px !important;
       width: 40px !important;
}
#search-box {
       position: fixed !important;
       left: 100px;
}
#topbar-first #search-box .form-search {
       height: 40px !important;
       font-size: 15px;
       background-position: unset;
       box-shadow: none !important;
}
#search-box form > div {
       background-color: #333334;
       border-radius: 50px;
}
#search-box form > div::before {
       content: '\f002';
       font-family: ForkAwesome;
       position: absolute;
       left: 10px;
       top: 8px;
}
#search-box .form-control.form-search {
       border-radius: 50px !important;
       background: transparent !important;
       width: 100% !important;
}
#search-box .form-control::placeholder {
       color: #B0B3B8 !important;
}
#topbar-first #search-box .btn {
       font-size: 0px !important;
         height: 32px;
       width: 32px;
       top: 2px !important;
       background-color: black !important;
}
#topbar-first #search-box .btn::before {
       content: '\f061';
       font-family: ForkAwesome;
       font-size: 15px;
       color: #B0B3B8;
}
#nav-user-menu, #nav-notifications-menu {
       background-color: #252728 !important;
       border: 1px solid #1C1C1D !important;
}
#nav-user-menu {
    min-width: 250px !important;
}
.nav-pills .dropdown-menu li a, 
.nav-pills .dropdown-menu li .btn-link, 
.nav-tabs .dropdown-menu li a, 
.nav-tabs .dropdown-menu li .btn-link, 
.account .dropdown-menu li a, 
.account .dropdown-menu li .btn-link, 
.contact-photo-wrapper .dropdown-menu li a, 
.contact-photo-wrapper .dropdown-menu li .btn-link {
       color: #B0B3B8 !important;
       border-color: #252728 !important;
}
       .nav-pills .dropdown-menu li > a:hover, 
       .nav-tabs .dropdown-menu li > a:hover, 
       .account .dropdown-menu li > a:hover, 
       .contact-photo-wrapper .dropdown-menu li > a:hover, 
       .nav-pills .dropdown-menu li.selected a, 
       .nav-tabs .dropdown-menu li.selected a, 
       .account .dropdown-menu li.selected a, 
       .contact-photo-wrapper .dropdown-menu li.selected a {
              color: #333 !important;
              background: #f2f2f2 !important;
              border-radius: 8px;
       }  
.nav-pills .dropdown-menu li.divider, 
.nav-tabs .dropdown-menu li.divider, 
.account .dropdown-menu li.divider, 
.contact-photo-wrapper .dropdown-menu li.divider {
       background-color: #252728 !important;
}    
#topbar-first #nav-notifications-menu {
       border: 1px solid #1C1C1D !important;
}
#topbar-first #nav-notifications-menu li {
       border-color: transparent !important;
box-sizing: border-box;
       margin: 10px;
       border-radius: 10px !important;
       width: 94% !important;
}
#topbar-first .notification-unseen {
       background-color: rgba(56, 88, 152,.2) !important
}
#topbar-first #nav-notifications-menu li.notif-entry:hover{
       background-color:rgba(128,128,128,.2) !important;    
       border-color: transparent !important;
}
#topbar-second {
       height: 60px !important;
       background-color: #252728 !important;
       border-color: #333 !important;
}
       .btn.btn-primary:hover,
       .btn.btn-primary:focus {
              border-radius: 8px !important;
       }
       #dropdownMenuTools {
              height: 40px;
              width: 40px;
              background-color: rgba(255,255,255,.1) !important;
              border-radius: 100% !important;
              margin-top: 5px !important;
              margin-right: 10px !important;
       }
              #dropdownMenuTools:hover,
              #dropdownMenuTools:focus {
              background-color: rgba(0,0,0,.1) !important;
       }
       #jotOpen {
              border-radius: 8px !important;
              background-color: #0866FF !important;
              color: #ffffff !important;
              border-color: #000 !important;
              box-shadow: none !important;
       }
       #jotOpen:hover, #jotOpen:focus {
              box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
       }
       #jotOpen::before {
              content: 'Compose';
              font-size: 15px;
              margin-right: 10px;
              line-height: 32px;
              position: relative;
              display: inline;
              top: -4px;
       }
       #jotOpen .fa-pencil-square-o {
              font-size: 32px !important;
              position: relative;
              top: 4px;
       }
       #topbar-second #nav-short-info {
              margin-top: 10px;
       }
    /* Compose Window */
    #upload-photo {
        background-color: #0866FF !important;
        color: white !important;
        border-radius: 8px !important;
    }
     #upload-photo:hover,
     #upload-photo:focus {
        background-color: darkblue !important;
    }
    /* hide attach file option since there is no way to manage attachments */
    .fbswitcher [data-mode="attachment"] {
           display: none !important;
    }
/* Other people profiles */
#mention-link {
border-radius: 8px !important;
              background-color: #0866FF !important;
              color: #ffffff !important;
              border-color: #000 !important;
              box-shadow: none !important;
       padding: 0 16px !important;
}
       #mention-link:hover,
       #mention-link:focus {
              box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
              
       }
       #mention-link span:first-of-type {
              float: right;
              font-size: 32px;
              top: 4px;
       }
       #mention-link span:first-of-type .fa-2x {
              font-size: inherit !important;
       }
       #mention-link span:last-of-type {
              font-size: 15px;
              margin-right: 10px;
              line-height: 32px;
              top: 6px;
              position:relative;
       }
#contact-edit-status-wrapper {
       margin: 15px 0px !important;
       border-radius: 10px;
}
/* sidebar widgets */
aside .widget,
.nav-container .widget {
       background-color: #1C1C1D !important;
       -webkit-box-shadow: none !important;
       -moz-box-shadow: none !important;
       box-shadow: none !important;
}
.tread-wrapper {
       background-color: rgb(37, 39, 40) !important;
  box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
  border-radius: 10px !important;
}
.wall-item-container .media {
       background-color: rgb(37, 39, 40) !important;
       border-radius: 10px !important;
}
.well {
       -webkit-box-shadow: none !important;
       box-shadow: none !important;
}
       .contact-photo,
       .contact-photo-xs {
              border-radius: 100% !important;
              border: 1px solid #252728 !important;
       }
.hovercard {
       background-color: #252728 !important;
       border: 1px solid #1C1C1D !important;        
}
       .hover-card-pic img.thumbnail {
              border-radius: 100% !important;
              background-color: #1C1C1D !important;
              border-color: black !important;
       }
       p.wall-item-announce,
       .media .time, .media .shared-time,
       .media .delivery, .media .location,
       .media .location a {
              font-size: 13px !important;
       }
              .type-link, .type-video {
                     padding: 0 !important;
                     margin:  0 !important;
                     background-color: rgb(51, 51, 52) !important;
                     border: 1px solid rgb(101, 104, 108) !important;
              }
              .type-link h4, .type-link blockquote, .type-link sup,
              .type-video h4, .type-video blockquote, .type-video sup {
                     padding-left: 10px !important;
                     padding-right: 10px !important;
              }
       /* ACTION BUTTON LABELS */
       .wall-item-actions-row button,
       .wall-item-actions-right button {
              position: relative;
              display: block;
              white-space: normal !important;
              margin: 0 auto !important;
              -webkit-box-shadow: none !important;
              box-shadow: none !important;
       }
       .wall-item-actions-row button::after,
       .wall-item-actions-right button::after {
              font-size: 14px;
              font-family: sans-serif;
              display: block;
              margin-top: 2px;
       }
       .wall-item-response {
              position: relative;
              padding-top: 4px;
       }
       .button-comments::after {
              content: 'Comment';
       }
       .button-announces::after {
              content: 'Share';
       }
              .share-links .dropdown-toggle::after {
                     content: 'Share';
              }
       .button-votes::after {
              content: 'Quote';
       }
       .button-likes::after {
              content: 'Like';
       }
     [id^="dislike-"]::after{
         content: 'Dislike';
     }
       .wall-item-actions-right .dropdown-toggle::after,
       .more-links .dropdown-toggle::after {
              content: 'More';
       }
       /* engagement counts */
       .wall-item-actions-row > button span,
       .wall-item-response span {
              position: absolute;
              text-align: center;
              display: block;
              background-color: #0866FF;
              box-shadow: -1px 1px 1px #000;
              border-radius: 4px;
              color: #fff;
              font-size: 12px;
              font-weight: 700;
              width: fit-content;
              padding: 0px 7px;
              left: 55%;
              top: 0px;
              z-index: 1;
       }
        /* this is some freaking ALCHEMY! */
        .vote-event:not(:has(.wall-item-response:empty)) {
            padding-bottom: 135px;
        }
        .vote-event .wall-item-response {
            position: absolute;
            top: 63px;
        }
        .vote-event .wall-item-response:empty{
            display: none;
        }
        .vote-event .wall-item-response:nth-of-type(1){
            left: 15px;
        }
        .vote-event .wall-item-response:nth-of-type(1) .button-event::after,
        [id^="attendyes"]::after{
            content: 'Going';
        }
        .vote-event .wall-item-response:nth-of-type(2){
            left: 105px;
        }
        .vote-event .wall-item-response:nth-of-type(2) .button-event::after,
        [id^="attendno"]::after{
            content: 'Can\'t Go';
            position: relative;
            height: 20px;
            overflow: hidden; /* or skews mobile button layout */
        }
        .vote-event .wall-item-response:nth-of-type(3){
            left: 204px;
        }
        .vote-event .wall-item-response:nth-of-type(3) .button-event::after,
        [id^="attendmaybe"]::after{
            content: 'Maybe';
        }
       /* END OF ACTION BUTTON LABELS */        
#profile-photo-wrapper {
    overflow: visible !important;
    padding: 5px;
    background-color: #1C1C1D;
    border-radius: 100%
}
aside .widget li {
    margin-bottom: 8px;
}
aside .vcard img.u-photo, aside img.vcard-photo {
    border-radius: 100% !important;
    box-shadow: 0 0 1px rgba(0,0,0,.3);
    border: 3px solid #1C1C1D;
}    
aside .widget h3.p-name {
    font-size: 32px !important;
    text-align: center;
    word-break: break-word;
}
aside .vcard .p-addr {
    font-weight: 600;
    text-align: center;
    white-space: break-spaces !important;
}
aside .widget li.selected {
    background-color:rgba(56, 88, 152,.2) !important;
    border-color: transparent !important;
    border-radius: 8px;
}
aside .widget li.selected a {
    font-weight: bold;
}
aside .widget li:hover {
    background-color:rgba(128,128,128,.2) !important;
    border-color: transparent !important;
    border-radius: 8px;
}
#widget-contacts {
    background-color: rgb(37, 39, 40) !important;
    border-radius: 8px !important;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2) !important;
}
       .contact-block-img {
            height: 100px !important;
            width: 100px !important;
            border-radius: 8px !important;
            box-shadow: 0 0 1px rgba(0, 0, 0, .2);
            margin: 5px;
       }
.comment-fake-form {
    border: none !important;
    background-color: transparent !important;
}
.comment-fake-form textarea {
    border-radius: 50px !important;
    background-color: rgb(51, 51, 52) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}    
.wall-item-actions button {
    font-size: 24px !important;
    color: #B0B3B8 !important;
}
       .wall-item-actions button:hover {
              color: #0866FF !important;
       }
       .wall-item-actions .checkbox {
              padding-top: 6px !important;
       }
       .comment .media-body {
              padding: 10px;
              background-color: rgb(51, 51, 52);
              border-radius: 20px;
       }
       .wall-item-actions-row .wall-item-emoji {
              font-size: 18px;
              line-height: 40px;
       }
       .navicon {
              font-size: 20px;
              position: relative;
              top: 1px;
       }
    /* not obviously clickable or intuitive what it does */
    .plink.u-url {
        -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
        box-shadow: 0 0 1px rgba(255,255,255,.5);
        border-radius: 100%;
        position: relative;
        padding: 6px 4px;
        height: 35px;
        width:  35px;
        display: block;
    }
        .plink.u-url:hover {
            background-color: rgba(255,255,255,.1) !important;
            text-decoration: none !important;
        }
        .plink.u-url::after {
              content: '\f101';
              font-family: ForkAwesome;
              color: #666;
        }        
.img-allocated-max-width {
       margin: 20px auto;
}

/* Photo Albums */
.photo-album-actions .icon-padding,
.photo-edit-link-wrap .icon-padding {
    margin-left: 10px !important;
}
.photos-upload-link {
    font-size: 28px;
    color: #0866FF !important;
    opacity: 1 !important;
    border-radius: 8px;
    padding: 0px 8px;
}
#photo-album-link {
    opacity: 1 !important;
}
.photos-upload-link i,
#photo-album-link i,
#photo-edit-link i,
#photo-toprofile-link i,
#album-edit-link i,
#album-drop-link i,
.photos-order-link i {
    font-size: 24px !important;
    color: #0866FF !important;
    opacity: 1 !important;
    border-radius: 100% !important;
    padding: 8px 11px !important;
    height: 40px;
    width:  40px;
}
#photo-edit-link i.fa-image {
    padding: 6px 7px !important;
}
.photos-order-link {
    margin-top: 5px !important;
}
    .photos-upload-link:hover i,
    .photos-upload-link:focus i,
    #photo-album-link:hover i,
    #photo-album-link:focus i,
    #photo-edit-link:hover i,
    #photo-toprofile-link:hover i,
    #photo-toprofile-link:focus i,
    #album-edit-link:hover i,
    #album-edit-link:focus i,
    #album-drop-link:hover i,
    #album-drop-link:focus i,
    .photos-order-link:hover i,
    .photos-upload-link:hover i,
    .photos-upload-link:focus i {
       background-color: rgba(255,255,255,.1) !important;
    }
.photos-content-wrapper .photos-upload-link::before {
    content: 'Add Photos';
    font-size: 15px; 
    vertical-align: middle; 
    margin-top: -10px;
    display: inline-block;
}
.justified-gallery {
    overflow: visible !important;
}
.justified-gallery > a, 
.justified-gallery > div, 
.justified-gallery > figure{
    height: 180px !important;
    width: 180px !important;
    border: 1px solid #ccc;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    border-radius: 8px;
    margin: 4px !important;
}
.justified-gallery > .jg-entry-visible > img,
.justified-gallery > .jg-entry-visible > a > img,
.justified-gallery > .jg-entry-visible > svg,
.justified-gallery > .jg-entry-visible > a > svg{
    width: 100% !important;
    height:  100% !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
    object-fit:cover;
    object-position: center;
}
#photo-photo {
    margin: 0 auto !important;
}

@media screen and (max-width: 1280px) {
    #search-box { 
        width: 18% !important;
    }
}
@media screen and (max-width: 991px){
    #search-box {
        left: 15%;
    }
    #jotOpen::before {
        content: '';
        margin: 0;
    }
    #mention-link span:last-of-type {
        margin-right: 42px;
    }
}
@media screen and (max-width: 768px){
    #topbar-first .navbar-toggle[data-target="#search-mobile"]{
        position: fixed !important;
        left: 15%;
    }
    #search-mobile {
        top: 110px !important;
    }
}

reshared this

in reply to Kristi H.

Daemon Silverstein
friendica (DFRN) - Link to source
Daemon Silverstein
•

@kmh Excellent! Just a tip: Friendica allows code formatting, which makes readability better, while also escaping the code (depending on markup language, some sequences or characters, such as asterisk and underline, could accidentally be parsed as bold/italic).

I don't fully remember which one is the valid syntax for the web version, I guess it's the markdown one (I'm using an Android app to access Friendica, and the app allows me to set either bbcode, html or markdown):

Bbcode: [ code ]your code[ /code ] (remove the spaces)
Html: < code >your code< /code > (remove the spaces)
Markdown: three grave accents (`) in a single line, then the code, then another single line with three grave accents.

Example:

html, body {
margin: 0px;
padding: 0px;
height: 100%;
}

Becomes:
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}

Hope this helps!

in reply to Daemon Silverstein

Kristi H.
friendica (DFRN) - Link to source
Kristi H.
•
Thanks! I put the entire thing inside of [pre]...[/pre] but somehow I scrolled right past the "code blocks" part of the Friendica BBCode reference.
⇧