Results 1 to 1 of 1

Thread: Introducing the Anti-Proton Firefox Theme

  1. #1
    Orca Whisperer N1LAF's Avatar
    Join Date
    Jul 2007
    Location
    Ledyard, CT
    Posts
    13,937

    Introducing the Anti-Proton Firefox Theme

    Recent versions of firefox has changed the UI (User Interface) color schemes, now in line with the boring original Windows 10 mindset. The default 'light' version leaves little contrast between the menu area and workspace. The dark scheme also changes some websites to a dark background (Twitter, DuckDuckGo as examples, at least DuckDuckGo has option to change background scheme). What is missing is to have a dark menu area and light workspace area.

    We have a solution.

    I have developed a userChrome.css file that will fix the UI woes. Easy to customize to your liking.

    First step is to change Firefox theme, if needed, to the default light theme.

    Second is to enable userChrome.css use.

    This Link will give instructions on how to do the second step:https://www.askvg.com/tip-new-working-method-to-restore-classic-theme-and-ui-in-firefox-91-and-later-versions/

    When this is done, create file userChrome.css in the chrome folder, and copy the following contents to userChrome.css file. userChrome.css is a simple text file.

    Code:
    /* Anti-Proton UI Theme,Mozilla Firefox, by N1LAF - Begin */
    
    /*   -- quick instructions --
    Use default light theme first 
    about:config
    Set: 'toolkit.legacyUserProfileCustomizations.stylesheets' preference to 'true' 
    about:support > Profile Folder > Open Folder
    Create folder 'chrome'
    in folder 'chrome', create file 'userChrome.css'
    copy contents to 'userChrome.css'
    */
    
    /* bookmark menu spacing  */
    menupopup > menu, menupopup > menuitem{
     padding-block: 2px !important;
     min-height: 0px !important;
     border: black;
    }
    
    
    /* ----- Anti-Proton Customization ----- */
    
    /* title bar and nav bar colors */
    .titlebar-color {                                                                     
    color: white;  /* for Windows colors, replace 'white' with '-moz-accent-color-foreground' */
    background-color: black;  /* for Windows colors, replace 'black' with '-moz-accent-color' */
    }
    
    /* background navbar, bookmarks bar */
    #navigator-toolbox > toolbar, .browserContainer > findbar, #browser-bottombox {
    background-color: black !important; /* for Windows colors, replace 'black' with '-moz-accent-color' */
    }
    
    
    /* -- tab customization -- */
    .tab-background {
    border-radius: 0px 0px !important;
    margin-bottom: 0px !important;
    }
    
    .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background{
    background-color: #444444;
    }
    
    
    /* -- Bookmark customization -- */
    #PlacesToolbarItems {                                          /* status = DEFAULT */
    color: white !important;                                       /* text color */
    }
    
    toolbarbutton.bookmark-item:hover {                            /* status = HOVER */
    background-color: #555555 !important;                          /* background color */
    /* color: rgb(64,64,64) !important;  */                        /* text color */
    }
    
    
    
    /* -- icon color customization -- */
    .toolbarbutton-icon {
      fill: white;
    }
    
    /* bookmark modification */
    #PlacesToolbarItems  .toolbarbutton-icon {
      fill: #fffdd0;
    }
    
    :root{
    --arrowpanel-menuitem-padding: 2px !important;
    }
    
    /* --- for Light drop down menus, delete all below --- */
    
    /* bookmarks toolbar dropdown menu*/
    #PlacesToolbar menupopup[placespopup="true"] {
      --arrowpanel-background: #111111 !important; 
      --arrowpanel-color: #fffdd0 !important;
    }
    
    /* menu separator */
    #personal-bookmarks menuseparator {
      -moz-appearance: none !important;
      background-color: #555555 !important;
      height: 1px !important;
      margin: 2px 5px !important;
    }
    
    /* Anti-Proton UI Theme, Mozilla Firefox - End */
    }[/CODE]

    Note: Compact mode was from different method.

    Compact Mode:https://www.askvg.com/tip-restore-compact-mode-density-option-in-firefox-customize-window/
    Last edited by N1LAF; 12-22-2021 at 02:05 PM. Reason: hilight link, removed compact mode

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •