Skip to content

nForum Dark by paoloperrone

Screenshot of nForum Dark

Details

Authorpaoloperrone

LicenseCC0-1.0

Categorynforum.ncatlab.org

Created

Updated

Size7.8 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Accessible dark theme for the nForum (nforum.ncatlab.org) to be paired with the nLab Dark theme.

Notes

Source code

/* ==UserStyle==
@name           nForum Dark
@namespace      USO Archive
@author         Paolo Perrone
@version        1.1
@description    Accessible dark theme for the nForum (nforum.ncatlab.org) to be paired with the "nLab Dark" theme. 
@license        CC0-1.0
@preprocessor   uso
==/UserStyle== */

@-moz-document url-prefix("https://nforum.ncatlab.org/") {
        
    /* Main background color */
    body {
        background: hsl(198, 30%, 10%);
    }
               
    /* Main text color */
    html, body, div, 
    h1, h2, h3, h4, h5, h6,
    #Header h1,
    #Panel h2,
    #AccountProfile h2 {
        color: #fffe;
    }
        
    /* Secondary text color */
    #TagLine, 
    #Session,
    .ContentInfo h1,
    #AccountProfile .ProfileTitle p {
        color: #fffb;
    }
    
    #logo {
        filter: invert(100%);
        opacity: 90%;
        mix-blend-mode: lighten;
    }
      
    /* Links */
    a, .PageList a, .PageList li a,
    .DiscussionTopic a, .User.Name a,
    .CategoryName a,
    #Discussions ul a:hover {
        color: hsla(212, 35%, 70%, 0.95) !important;
    }    
    
    /* Links to nlab pages */
    a[href^="ncatlab.org/"],
    a[href^="http://ncatlab.org/"],
    a[href^="https://ncatlab.org/"] {
        color: hsla(120, 20%, 65%, 1) !important;
    }
    
    /* Header */
    #Header {
        background: hsla(198, 26.25%, 21.25%);
        border-top: 1px solid hsl(198, 10%, 41.5%);
        border-bottom: 1px solid hsl(198, 10%, 41.5%);
    }
    #TagLine a, #Session a {
        color: #fffe !important;
    }
        
    /* Navigation bar */    
    #Header ul li a {
        background-color: hsl(198, 21.75%, 34.75%);
        color: #fffe !important;
        border-bottom: 1px solid #fff6;
    }
    #Header ul li a:hover {
        background-color: hsl(198, 19.5%, 41.5%);
    }
    #Header ul li.TabOn{
        background: none;
        border: none;
    }
    #Header ul li.TabOn a, #Header ul li.TabOn a:hover {
        background-color: hsl(198, 18%, 46%) !important;
        border: 1px solid #fff6;
    }
        
    /* Left panel */
    #Panel {
        background: hsl(198, 29.75%, 12.25%);
        margin-left: 0px;
        padding-left: 18px;
        border-right: 1px solid hsl(198, 13.5%, 19%);
    }
    #Panel h1 {
        background: none;
    }
    #Panel h2 {
        border-bottom: 1px solid hsl(198, 10%, 41.5%);
    }
    #Panel a:hover, #Panel h1:hover {
        background: hsl(198, 25.5%, 23.5%) !important;
    }
    #AboutVanilla {
        border-top: 1px solid hsl(198, 10%, 41.5%);
        background: none;
        color: #fff8 !important;
    }
    #AboutVanilla a, #AboutVanilla a:hover {
        color: #fffb !important;
    }
    #Panel ul, #Panel p {
        color: #fffe;
    }
    #GuestSignIn p {
        background: hsl(198, 27%, 19%);
        border: 1px solid hsl(198, 10%, 41.5%);
        color: #fffc;
    }
    .Button {
        background: hsl(198, 24%, 28%);
        border: 1px solid hsl(198, 10%, 41.5%);
    }
    #openid_choice {
        filter: invert(100%) saturate(0%) brightness(120%);
        mix-blend-mode: screen;
    }
    
    /* Welcome to the nForum */
    .Notice {
        background: hsl(198, 27%, 19%);
        border: 1px solid hsl(198, 10%, 41.5%);
        color: #fffc;
    }
    
    /* Discussions */
    .PageInfo {
        color: hsl(198, 15%, 55%);
        border-top: 1px solid hsl(198, 10%, 41.5%);
        border-bottom: 1px solid hsl(198, 10%, 41.5%);
    }
    #Discussions li ul {
        border-bottom: 1px solid hsl(198, 10.25%, 38.5%);      
    }    
    .NoNewComments {
        background: none !important;
        border-top-right-radius: 0px;
    }   
    #Discussions li.Read.NewComments ul,
    #Discussions li.Unread.NoNewComments ul,
    #Discussions li.Unread.NewComments ul,
    .NewComments{
        background: hsl(198, 27.75%, 16.75%) !important;        
    }
    #Discussions li.Read.NoNewComments ul {
        background: hsl(198, 29%, 13%) !important;
        border-bottom: none;
    }
    #Discussions ul span, #Discussions ul span a, #Discussions ul a {
        color: #fffb;
    }
    #Discussions li ul {
        color: #fff9;
    }
    .NewComments .DiscussionNew a {
        color: #fffe !important;
    }
    #frmPostComment * { 
        color: #fffc !important;
    }
    #Comments li
    {
        background: none;
        border-bottom: 1px solid hsl(198, 10%, 41.5%);
    }
    #Comments .CommentBody {
        background: none;
    }
    #Comment_Preview {
        background: none !important;
    }
    
    /* Forms */
    #Form form {
        background: hsl(198, 27.75%, 16.75%);
        border: 1px solid hsl(198, 10.5%, 37%);
    }
    #Form.AddComments label, #Form li {
        color: #fffe;
    }
    #Form label a {
        background: hsl(198, 11.5%, 32.5%);
        border: 1px solid hsl(198, 7.5%, 55%);
        color: #fffe !important;
    }
    textarea {
        border: 1px solid hsl(198, 10%, 41.5%) !important;
        background-color: hsl(198, 30%, 10%) !important;
        color: #fffe !important;
    }
    input {
        border: 1px solid hsl(198, 7.5%, 55%) !important;
        background: hsl(198, 30%, 10%);
        color: #fffe;
    }
    #Form .Button {
        background: hsl(198, 11.5%, 32.5%);
        color: #fffd !important;
    }
    #Form fieldset legend,
    #Form.Account legend,
    #Form.Account *, #frmPostDiscussion * {
        color: #fffe !important;
    }
    /* Advanced search */
    .SearchSwitch {
        color: #fffe !important;
        background: hsl(198, 24%, 28%);
        border: 1px solid hsl(198, 7.5%, 55%);
    }
    .SearchInput,
    .SearchSelect, .CategorySelect  {
        color: #fffe !important;
        background: hsl(198, 30%, 10%);
        border: 1px solid hsl(198, 7.5%, 55%);
    }
    .SearchSelect option, .CategorySelect option {
        color: #fffe !important;
        background: hsl(198, 30%, 10%);
    }
    
    /* Log in */
    #Form label {
        color: #fffe;
    }
    fieldset p {
        color: #fffc;
    }
    .ForgotPasswordLink a, .ApplyForMembershipLink a {
        background: hsl(198, 30%, 10%) !important;
        color: #fffc !important;
    }
    .ForgotPasswordLink a:hover, .ApplyForMembershipLink a:hover {
        background: hsl(198, 25.5%, 23.5%) !important;
    }
    
    /* Log out */
    .SiteContainer {
        background: none;
        border: 1px solid hsl(198, 7.5%, 55%);
    }
    .FormComplete {
        background: none;
    }
    .FormComplete h2 {
        color: #fffe;
    }
    .FormComplete a:hover {
        background: none;
    }
    .SiteContainer h1 {
        background: hsl(198, 25.5%, 23.5%);
        border-bottom: 1px solid hsl(198, 15%, 55%);
    }
    
    /* Categories list */
    .UnblockedCategory {
        background: none;
    }
    #Categories {
        border-top: 1px solid hsl(198, 10.25%, 38.5%);
    }
    #Categories li ul {
        border-bottom: 1px solid hsl(198, 10.25%, 38.5%);
    }
    
    /* Misc */
    #Comments pre,
    #Comments blockquote {
        border-left: 6px solid hsl(198, 25.5%, 23.5%);
        background: hsl(198, 27.75%, 16.75%);
        color: #fffe;
    }
    #Comments code {
        background: none;
    }
    #AccountProfile .Tagline {
        border-top: 1px solid hsl(198, 10%, 41.5%);
        border-bottom: 1px solid hsl(198, 10%, 41.5%);
        background: hsl(198, 27%, 19%);
        color: #fffe !important;
    }
    
    /* Starting to make it responsive - it will need more work. */
    @media only screen and (max-width: 680px){
        #TagLine {
            margin-top: 30px;
            width: 70%;
        }
        #Session {
            top: 50px;
        }
        #Header ul li {
            display: inline-block;
            margin-top: 1px;
        }
    }
    
}

Reviews

No reviews yet.