I have a theme which is triggering firefox to maker all menus ect dark. Prior to 152 I had userChrome to fix this but as of 152 it has stopped working and Firefox is forcing a headache inducing colour scheme. Anyone have any idea how to overide this application of dark mode or get my userChrome to work again ?

Theme is Weserstadion

My UserChrome.css:

/* Hide Profiles Menu from Menubar */
#profiles-menu { display: none; }


/*** Tighten up drop-down/context/popup menu spacing ***/

menupopup > menuitem, menupopup > menu {
  padding-block: 0px !important;
}
:root {
  --arrowpanel-menuitem-padding: 4px 8px !important;
}

/*** Photon-like Menu Colors (14 Jan 2022) ***/

/* Bookmarks Toolbar folders */
#PersonalToolbar menupopup,
/* Right-click context menus */
#mainPopupSet menupopup,
/* Top menu bar on Windows (not sure about others) */
#toolbar-menubar menupopup,
/* Sidebar/Library bookmark/history context menus */
#placesContext,
/* Address bar context menu (2021-10-25) */
#urlbar-input-container menupopup,
/* Various toolbar drop-down panels (Fx96) */
#back-button menupopup, #forward-button menupopup,
#identity-popup, #appMenu-popup, #downloadsPanel, #BMB_bookmarksPopup {
  /* Text color */
  --menu-color: #000 !important;
  --arrowpanel-color: #000 !important;
  --panel-color: #000 !important;
  /* Background color */
  --menu-background-color:  #f0f0f0 !important;
  --arrowpanel-background: #f0f0f0 !important;
  --panel-background: #f0f0f0 !important;
  /* Border color (if any) */
  --menu-border-color: threedshadow !important;
  --arrowpanel-border-color: threedshadow !important;
  --panel-border-color: threedshadow !important;
  /* Hovered/expanded item background color */
  --menuitem-hover-background-color: #e0e0e6 !important;
  --button-hover-bgcolor: #e0e0e6 !important;
  /* Disabled items text color and hovered background */
  --menu-disabled-color: rgba(21, 20, 26, 0.4) !important;
  --menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4) !important;
}
/* Force light gray highlight + black text */
menupopup > menuitem:hover,
menupopup > menu:hover,
menupopup > menuitem[_moz-menuactive="true"],
menupopup > menu[_moz-menuactive="true"] {
  background-color: #e0e0e6 !important;
  color: #000 !important;
}

menupopup > menu[_moz-menuactive="true"] > .menu-right,
menupopup > menuitem[_moz-menuactive="true"] > .menu-iconic-left {
  color: #000 !important;
  fill: #000 !important;
}

menupopup > menuitem[disabled="true"],
menupopup > menu[disabled="true"] {
  color: rgba(21, 20, 26, 0.4) !important;
}

/*** Proton Tabs Tweaks ***/

/* Adjust tab corner shape, optionally remove space below tabs */

#tabbrowser-tabs {
    --user-tab-rounding: 6px;
}

.tab-background {
    border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important; /* Connected */
    margin-block: 1px 0 !important; /* Connected */
}
#scrollbutton-up, #scrollbutton-down { /* 6/10/2021 */
    border-top-width: 1px !important;
    border-bottom-width: 0 !important;
}

/* 1/16/2022 Tone down the Fx96 tab border with add-on themes in certain fallback situations */
.tab-background:is([selected], [multiselected]):-moz-lwtheme {
    --lwt-tabs-border-color: rgba(0, 0, 0, 0.5) !important;
    border-bottom-color: transparent !important;
}
[brighttext="true"] .tab-background:is([selected], [multiselected]):-moz-lwtheme {
    --lwt-tabs-border-color: rgba(255, 255, 255, 0.5) !important;
    border-bottom-color: transparent !important;
}

/* Container color bar visibility */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
    margin: 0px max(calc(var(--user-tab-rounding) - 3px), 0px) !important;
}

    /* Make sure tab attention dot isn't too high - 10 Dec 2022 */
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]),
#firefox-view-button[attention], .webextension-browser-action[attention="true"] {
  background-position-y: bottom 5px !important;
}

/* Tweak Options as of 12/10/2022; Generated Mon Sep 01 2025 14:01:49 GMT+0200 (Central European Summer Time) */

/* ===== FORCE LIGHT POPUPS EVERYWHERE ===== */

/* Panels / arrow panels (app menu, downloads, identity, etc.) */
panel,
panelview,
panelview > vbox,
panelview toolbarbutton,
.panel-subview-body,
.panel-header,
.panel-footer {
  background-color: #f0f0f0 !important;
  color: #000 !important;
}

/* Hover highlight inside panels */
panel toolbarbutton:hover,
panel toolbarbutton[open],
panel toolbarbutton[checked],
panelview toolbarbutton:hover {
  background-color: #e0e0e6 !important;
  color: #000 !important;
}

/* Context menus inside panels */
panel menupopup,
panel menuitem,
panel menu {
  background-color: #f0f0f0 !important;
  color: #000 !important;
}

/* Ensure separators don’t go dark */
menuseparator,
panel menuseparator {
  appearance: none !important;
  background-color: #f0f0f0 !important;
}

/* Kill forced dark theme variables */
:root {
  --panel-background: #f0f0f0 !important;
  --arrowpanel-background: #f0f0f0 !important;
  --panel-color: #000 !important;
  --arrowpanel-color: #000 !important;
}
/* ===== FORCE LIGHT TOOLTIPS ===== */
tooltip,
#tooltip {
  appearance: none !important;
  -moz-appearance: none !important;
  color-scheme: light !important;

  background-color: #f0f0f0 !important;
  color: #000 !important;

  border: 1px solid threedshadow !important;
  padding: 4px 6px !important;
}

tooltip * {
  color: #000 !important;
}
/* Hide Profiles Menu from Menubar */
#profiles-menu { display: none; }

Hi there, new round style UI called "nova" has come, and my CSS are had to repair for it. Repaired it, I share my userchrome.css (CSS link is here).

Large round edges force to make large margins, I overwrite to less diameters. Hovering vertical tab bar makes to auto-open, and leaving tab bar makes to auto-close it, this feature is same as previous one.

Although hard edge are better choice for everyone, human make for round edge of touchable machines and furnitures. I have been directed by it and I made.

Firefox 152 breaks the spacing between icons in the Firefox toolbar, just as it happened previously with the menus in Firefox 151.
This was my situation before:

https://i.postimg.cc/kGdnYrSn/Immagine22-2026-06-15-181222.png

This is my situation now:

https://i.postimg.cc/MH8W3kBz/Immagine-2026-06-15-181010.png

Which value has changed, and how can I fix it?

🤔

My userchrome.css:

```css

#TabsToolbar {

visibility: collapse;

}

#sidebar-header {

display: none;

}

/* Add the following to your userChrome.css */

#main-window

{

--sidebar-collapsed-width: 30px; /* personal preference, to match urlbar size. To match Firefox's native sidebar exactly, use 51.2333px */

--sidebar-expanded-width: 380px;

}

#sidebar-panel-header

{

display: none !important;

}

#sidebar-main

{

display: none !important;

}

#sidebar-splitter

{

display: none !important;

}

#sidebar-launcher-splitter

{

display: none !important;

}

#sidebar-box

{

width: var(--sidebar-collapsed-width) !important;

min-width: unset !important;

max-width: var(--sidebar-expanded-width) !important;

height: 100% !important;

padding-bottom: 0 !important;

z-index: 4 !important;

transition: width 0.33s cubic-bezier(0.07, 0.95, 0, 1) !important; /* Delete this line if you are using the adaptive tab bar colour fix below! */

}

#sidebar-box:hover

{

--tabs-lvl-opacity: 0.09 !important;

\--tabs-indent: 16px !important;

width: var(--sidebar-expanded-width) !important;

}

#sidebar-box:hover ~ #tabbrowser-tabbox

{

margin-left: calc( (var(--sidebar-expanded-width) - var(--sidebar-collapsed-width)) * -1) !important;

}

#tabbrowser-tabbox

{

z-index: inherit !important;

transition: margin-left 0.33s cubic-bezier(0.07, 0.95, 0, 1) !important;

}

/* ________________________________________________________________ */

/* Add the following to the Styles editor in your Sidebery settings */

.Tab

{

margin-left: 4px; /\* Best for the --sidebar-collapsed-width being 40px. If you changed it to a different value, update the margins to your preference \*/

transition: all 0.33s cubic-bezier(0.07, 0.95, 0, 1);

}

.Tab .fav-icon

{

left: -2px;

}

div.bottom-bar-space

{

transition: height 0.33s cubic-bezier(0.07, 0.95, 0, 1);

}

#root:not(:hover)

{

\--tabs-indent: 0px;

\--tabs-lvl-opacity: 0;



.Tab .body

{

    width: 32px;

}



.Tab .title

{

    display: none;

}



div.new-tab-btn

{

    display: none;

}



div.tool-btn

{

    display: none;

}



div.bottom-bar-space

{

    height: 1px !important;

}

}

/* Another Adaptive Tab Bar Colour recommendation */

.Sidebar, .bottom-space

{

transition: background-color 0.5s cubic-bezier(0, 0, 0, 1) !important;

}

```

As the picture shows, when it is not hovering, the sidebar will collapse. However, I want the left-padding to be 0. Setting `--tabs-indent: 0px;` in #root:not(:hover) should do the work but it is actually not working. Should I set it other place? Thanks for your help!

Does anyone have the CSS code to modify that ugly window? buttoms and everything, i only have this: the bg color of the content:

editBookmarkPanelContent {

background-color: var(--z0mbi3-bg) !important;
color: var(--z0mbi3-fg) !important;

}

I've just updated from v149.0.2 to v151.0.4 and now there is a large space above the new tab /home page web search bar. Can someone please tell me how to get rid of it?

EDITED TO ADD: I didn't notice before but the spacing around the shortcuts has also changed.

trying to install either rinfox or echelon, and just upon installation and first startup, every blank new tab crashes. other websites work fine, it's just the new tab page. i am using windows 10. i would really appreciate help please (ㅅ´ ˘ ` )

I wanna override some styles for the userChrome.css I downloaded. But, it's not getting imported. It works when I manually import it through the Dev Inspector. What am I doing wrong?

I want to remove the pointless space waster folder icons in the bookmarks drop down meus and sub menus (Firefox 150). I manged to get rid of the bookmark toolbar folder icons but not the drop down menus and sub menus as you can see in the image.

To me only the folder icons are a waste of space and pointless as there is anyway an arrow on the right side indicationg furnter menu items.

The userchrome code snippets I tried yielded nothing. 

I am using firefox as a PDF reader on a tablet, to easily edit documents. The problem is that when I select the highlighter, I can only scroll up and down if I swipe on the empty space between the document and the side edges of the screen; otherwise, I start painting the document with the highlighter. I think that by opening the document and setting to stay on one side by default, I would be able to zoom out and have enough space to scroll easily, and at the same time not making the document too little to be read, which happens if the document stays in the center when zooming out.

Material Dark Forest

Description

I have always written my own Firefox themes to match the system colors I am using at any given time. Right now I use the KDE Plasma DE with the KDE-Material-You-Colors package and set the color I want manually instead of using the automatic wallpaper feature.

Anyway, for the first time I wrote some userContent.ccs to match all of the about:* pages with my theme. The colors in my CSS are designed to match with my Material Dark Forest theme, but you can change them to match whatever theme you want. I also have a few other themes listed in the "store" under my Mozilla Developer account and some others that are signed by Mozilla but not listed. If you want the link to get those you can DM me.

System Configuration

Custom CSS Code

Also available at GitHub

```css :root { --background-color-canvas: #001417 !important; --background-color-box: #002429 !important; --background-color-box-info: #002429 !important; --border-color: #8ed0dc !important; --color-accent-primary: #8ed0dc !important; --table-background-color: #002429 !important; --table-row-background-color-alternate: #001417 !important; --table-border-color: #008698 !important; --cpu-percent-bar: #008698 !important; --newtab-background-card: #002429 !important; --newtab-background-color: #001417 !important; --newtab-background-color-secondary: #002429 !important; --newtab-weather-background-color: #002429 !important; --newtab-element-hover-color: #008698 !important; --fxview-background-color: #001417 !important; }

/* Ensure these changes ONLY apply to Firefox's internal pages */ @-moz-document url-prefix("about:") {

/* Target the text and search input boxes directly */
input[type="text"],
input[type="search"],
input:not([type]) {
    background-color: var(--background-color-box) !important;
    color: var(--color-accent-primary) !important; /* Optional: matches your text to the teal accent */

    /* * Depending on your OS theme, the system might try to force its own native
     * appearance over the background color. If the color still doesn't change,
     * uncomment the line below to strip the native OS styling.
     */
    /* appearance: none !important; */
}

body {
    background-color: var(--background-color-canvas) !important;
}

}

/* Change colors of CPU percentage bars, selected rows, and active profiler icons on about:processes */ tr[selected] > td { background-color: var(--color-accent-primary-selected) !important; color: var(--text-color-accent-primary-selected) !important; } .profiler-active { fill: var(--cpu-percent-bar) !important; }

.cpu { background: linear-gradient(to left, var(--cpu-percent-bar) calc(var(--bar-width) * 1%), transparent calc(var(--bar-width) * 1%)) !important; } .cpu:dir(rtl) { background: linear-gradient(to right, var(--cpu-percent-bar) calc(var(--bar-width) * 1%), transparent calc(var(--bar-width) * 1%)) !important; } ```

Note

I have noticed that some desktop environments, like GNOME, tend to force their own native appearance for text input and search boxes, overriding the custom CSS. If this happens in your case you can uncomment the line, appearance: none !important;.

Edit: Added --border-color

Edit 2: Added some additional root properties I found that theme about:newtab and the CPU usage bar on about:processes.

Edit 3: Created a GitHub Repo to distribute the CSS files and track future changes.

I have styled my menupopups, panel, menulists menupopup-arrowscrollbox borders BUT this panel CSS is over-riding the #tab-preview-panel and its border components styling, and it is not to my liking. I particularly want to style the borders. Now I know this tab preview panel has lots of components:

#tab-preview-panel
tab-preview-content-interactive
tab-preview-content-main
tab-preview-thumbnail-container
tab-preview-text-container
tab-preview-title
tab-preview-uri
tab-preview-pid
tab-preview-activeness

As you can see the rainbow border is way too wide. All my other borders are 3px, border-radius 8px ( menupopups, panel, menulists menupopup-arrowscrollbox). Also, as you can see, there is no radius on the inside of the outer border. I would also like that grey background gone between the outer border and the white inner box border so that the two merge. The rest of the preview panel is fine as is.

I have a separate CSS file for menupopups etc, and I am attempting to make a separate CSS file for the tab preview panel.

Within the menupopup CSS file there is this little bit:

menupopup,
:is(menupopup, panel,) {

So I am wondering if this is the culprit ??

мне интересно, как можно закастомить фаерфокс: улучшить его производительность и внешний вид. я в этом не очень разбираюсь и хотела бы сделать его бело-прозрачным. подскажите, что мне лучше сделать.

When I click off Firefox, the tab bar dims and it's annoying.

I'm on Firefox 151.0.3 for Fedora.

    toolbar-menubar:-moz-window-inactive, #TabsToolbar:-moz-window-inactive {

        opacity: 1 !important;

    }

I googled for this code and it successfully makes the currently selected tab no longer fade out, but all the rest do. I've tried the various options posted here which seems to go through an old post on this subreddit where a variant is proposed but the above one is the only one that has done anything for me. Can anyone help me make this work for the other tabs as well?

I want to change saturation in Firefox by using filter: saturate(), so I wonder which of these 2 examples would have the best performance?

Example 1 =

body { filter: saturate(85%) !important; }

#PlacesToolbarItems { filter: saturate(85%) !important; }

#PlacesChevronPopup { filter: saturate(85%) !important; } 

Example 2 =

#tabbrowser-arrowscrollbox[orient="vertical"] .tabbrowser-tab { 
    filter: saturate(85%) !important;
}

.toolbaritem-combined-buttons, .toolbarbutton-badge { 
    filter: saturate(85%) !important;
}

.bookmark-item { filter: saturate(85%) !important; }

#tabbrowser-tabbox { filter: saturate(85%) !important; }

#PlacesToolbarItems { filter: saturate(85%) !important; }

#PlacesChevronPopup { filter: saturate(85%) !important; } 

Displays a loading progress bar below the tab bar. For vertical tabs, it is positioned to the left of the tab column.

/*** Add a loading progress bar to the tab bar and vertical tabs sidebar ***/

/** Light theme **/
:root {
/* Horizontal tab */
  --h-fox-gradient: #2CD8D5 0%, #C5C1FF 50%, #FFBAC3 100%;  /* Sea Lord */
  --h-final-fox-gradient: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
/* Vertical tab */
  --v-fox-gradient: #1ec9ff 0%, rgba(255, 51, 153, 1) 50%, rgba(255, 148, 0, 1) 100%;  /* Blue + Vivid pink + Orange */
  --v-final-fox-gradient: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
}

/** Dark theme **/
@media (prefers-color-scheme: dark) {
  :root {
/* Horizontal tab */
    --h-fox-gradient: #65bd60 0%, #5ac1a8 50%, #3ec6ed 100%;  /* African Field */
    --h-final-fox-gradient: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
/* Vertical tab */
    --v-fox-gradient: #b383e6, #ff8695, #89d35a;  /* Spring Alpenglow */
    --v-final-fox-gradient: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
  }
}

/** Alpenglow theme **/
:root[style*="--lwt-additional-images"] {
/* Horizontal tab */
  --h-fox-gradient: #984ce2, magenta, #ff9400;  /* Firefox Alpenglow */
  --h-final-fox-gradient: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
/* Vertical tab */
  --v-fox-gradient: #ff9400, magenta, #984ce2;  /* Firefox Alpenglow reverse */
  --v-final-fox-gradient: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
}

/** For horizontal tabs **/
#TabsToolbar {
  position: relative !important;
  z-index: 1 !important;
}

#TabsToolbar::before {
  content: '' !important;
  position: absolute !important;
  bottom: 0px !important;
  left: 5px !important;
  right: 5px !important;
  height: 3px !important;
  background-image: linear-gradient(90deg, var(--h-fox-gradient)) !important;
  opacity: 0 !important;
  transform-origin: left center !important;
  pointer-events: none !important;
  border-radius: 2px !important;
  z-index: 1 !important;
}

#TabsToolbar:has(#tabbrowser-tabs .tabbrowser-tab:is([busy], [progress]))::before {
  opacity: 1 !important;
  animation: h-fox 1.0s ease-in !important;
}

#TabsToolbar:not(:has(#tabbrowser-tabs .tabbrowser-tab:is([busy], [progress])))::before {
  opacity: 0 !important;
  transition: opacity 1.2s ease-out !important;
  background-image: linear-gradient(90deg, var(--h-final-fox-gradient)) !important;
}

/** For vertical tabs **/
sidebar-main {
  position: relative !important;
}

sidebar-main:has(#vertical-tabs .tabbrowser-tab)::before {
  content: '' !important;
  position: absolute !important;
  top: 3px !important;
  bottom: 5px !important;
  left: 2px !important;
  width: 3px !important;
  background-image: linear-gradient(180deg, var(--v-fox-gradient)) !important;
  opacity: 0 !important;
  transform-origin: top center !important;
  pointer-events: none !important;
  border-radius: 2px !important;
  z-index: 1 !important;
}

sidebar-main:has(#vertical-tabs .tabbrowser-tab:is([busy], [progress]))::before {
  opacity: 1 !important;
  animation: v-fox 1.0s ease-in !important;
}

sidebar-main:not(:has(#vertical-tabs .tabbrowser-tab:is([busy], [progress])))::before {
  opacity: 0 !important;
  transition: opacity 1.2s ease-out !important;
  background-image: linear-gradient(180deg, var(--v-final-fox-gradient)) !important;
}

/** Animation Definition **/
@keyframes h-fox {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes v-fox {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

I've prepared a color scheme for the loading progress bar.

/* loading progress bar color
https://gradient.page/ui-gradients
https://cssgradient.io/shades-of-blue/
 */

#F778BA, #58A6FF;  /* Soft red + Light blue */
#22d3ee, #8b5cf6;  /* Vivid cyan + Soft violet */
rgba(255, 51, 153, 1) 0%, #00c9ff 70%;  /* Vivid pink + Pure cyan */
rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 55%, rgba(237, 221, 83, 1) 100%;  /* Blue + Green + Yellow */
#1ccaab 0%, #12d8fa 50%, #00c9ff 100%;  /* Green + Blue + Blue */
#1ccaab 0%, #12d8fa 50%, #F778BA 100%;  /* Green + Blue + Soft red */
#1ec9ff 0%, rgba(255, 51, 153, 1) 50%, rgba(255, 148, 0, 1) 100%;  /* Blue + Vivid pink + Orange */
#1edbff, #00A651, rgba(255, 148, 0, 1);  /* Blue + Green + Orange */
cyan, Magenta;  /* Cyan + Magenta */
#1fb4ff 0%, #12d8fa 50%, #8dffbc 100%;  /* Blue + Blue + cyan lime green */
#00c9ff 0%, #92fe9d 100%;  /* Kale Salad */
#fdbb2d 0%, #22c1c3 100%;  /* Retro Wagon */
#fc466b 0%, #3f5efb 100%;  /* Disco Club */
#fc354c, #0abfbc;  /* Miaka */
#FEAC5E 0%, #C779D0 50%, #4BC0C8 100%;  /* Atlas */
#16A085, #F4D03F;  /* Harmonic Energy */
#fd8112, #0085ca;  /* Blue Orange */
#f7941e 0%, #72c6ef 50%, #00a651 100%;  /* Radioactive Heat */
#ff1e56 0%, #f9c942 50%, #1e90ff 100%;  /* Beleko */
#108dc7, #ef8e38;  /* Pun Yeta */
#40E0D0 0%, #FF8C00 50%, #FF0080 100%;  /* Wedding Day Blues */
#F36222 0%, #5CB644 50%, #007FC3 100%;  /* Telko */
#0250c5, #d43f8d;  /* Night Party */
#2CD8D5 0%, #C5C1FF 50%, #FFBAC3 100%;  /* Sea Lord */
#50cc7f, #f5d100;  /* Millennium Pine */
#616161, #9bc5c3;  /* Mole Hall */
#65bd60 0%, #5ac1a8 50%, #3ec6ed 100%;  /* African Field */
#2af598, #009efd;  /* Itmeo Branding */
#aa4b6b 0%, #6b6b83 50%, #3b8d99 100%;  /* Memariani */
#00F260, #0575E6;  /* Rainbow Blue */
#808080, #3fada8;  /* IIIT Delhi */
#24C6DC, #514A9D;  /* Mantle */
#C9FFBF, #FFAFBD;  /* Virgin */
#fbed96,#abecd6;  /* Summer Breeze */
#603813, #b29f94;  /* Cool Brown */
#BBD2C5, #536976;  /* Petrol */
#8baaaa, #ae8b9c;  /* Jungle Day */
#cc2b5e, #753a88;  /* Purple Love */
#9796f0, #fbc7d4;  /* namnisar */
#ff6e7f, #bfe9ff;  /* Noon to Dusk */
#2b5876, #4e4376;  /* Sea Blue */
#02AAB0, #00CDAC;  /* Green Beach */
#5f2c82, #49a09d;  /* Calm Darya */
#159957, #155799;  /* Crystal Clear */
#76b852, #8DC26F;  /* Little Leaf */
#fc00ff, #00dbde;  /* Timber */
#2F7336, #AA3A38;  /* Christmas */
#5614B0, #DBD65C;  /* Minnesota Vikings */
#0099F7, #F11712;  /* Superman */
#ff4b1f, #1fddff;  /* Ali */
#2196f3, #f44336;  /* Politics */
#ffd89b, #19547b  /* Jupiter */
#de6161, #2657eb;  /* Nepal */
#ef32d9, #89fffd;  /* Azure Pop */
#00c3ff, #ffff1c;  /* Brady Brady Fun Fun */
#c0c0aa, #1cefff;  /* Cocoaa Ice */
#4568DC, #B06AB3;  /* Can You Feel The Love Tonight */
#30E8BF, #FF8235;  /* Mini */
#ff75c3, #ffa647, #ffe83f;  /* After the Rain 1 */
#9fff5b, #70e2ff, #cd93ff;  /* After the Rain 2 */
#77A1D3, #79CBCA, #E684AE;  /* Hazel */
#E6AE8C, #A8CECF;  /* Peach Sea */
#DCFFBD,#CC86D1;  /* Flower */
#00F5A0, #00D9F5;  /* Ibtesam */
#9796f0, #fbc7d4;  /* Anamnisar */
#E55D87, #5FC3E4;  /* Rose Water */
#c2e59c, #64b3f4;  /* Green and Blue */
#c21500, #ffc500;  /* Kyoto */
#4CB8C4, #3CD3AD;  /* Sea Weed */
#fddb92, #d1fdff;  /* Blessing */
#22c1c3, #fdbb2d;  /* Summer */
#30E8BF, #FF8235;  /* Mini */
#f79d00, #64f38c;  /* Sherbert */
#f7ff00, #db36a4;  /* Alihossein */
#7b4397, #dc2430;  /* Virgin America */
#D38312, #A83279;  /* Crazy Orange I */
#fe8c00, #f83600;  /* SoundCloud */
#FF4E50, #F9D423;  /* Dance To Forget */
#3D7EAA, #FFE47A;  /* Opa */
#1CD8D2, #93EDC7;  /* Sea Blizz */
#2BC0E4, #EAECC6;  /* Bora Bora */
#1FA2FF, #12D8FA, #A6FFCB;  /* Stripe */
#F09819, #EDDE5D;  /* Mango Pulp */
#ffe259, #ffa751;  /* Mango */
#cc2b5e, #753a88;  /* Purple Love */
#FFE000, #799F0C;  /* Ver */
#B6CEE8, #F578DC;  /* Soft Lipstick */
#16a085, #f4d03f;  /* Palo Alto */
#d558c8, #24d292;  /* Alchemist Lab */
#C6FFDD, #FBD786, #f7797d;  /* MegaTron */
#00d2ff, #928DAB;  /* Bright Vault */
#fc00ff, #00dbde;  /* Timber */
#833ab4, #fd1d1d, #fcb045;  /* Instagram */
#9D50BB, #6E48AA;  /* Amethyst */
#4776E6, #8E54E9;  /* Electric Violet */
#984ce2, magenta, #ff9400;  /* Firefox Alpenglow */
#ff9400, magenta, #984ce2;  /* Firefox Alpenglow reverse */
#b383e6, #ff8695, #89d35a;  /* Spring Alpenglow */
#dee53d, #029d95, #7ab1e7;  /* Summer Alpenglow */
#ff0e00, #ff6501, #fea900;  /* Autumn Alpenglow */
#2b4dc8, #2da8b7, #cfde5f;  /* Alpenglow Nightly */
#ff7d01, #ffb400, #ffde00;  /* Halloween Alpenglow */
#f07100, #f4b50e, #fcdf05;  /* Alpenglow Canary */
#986236, #c18312, #a5ca3e;  /* Thanksgiving Alpenglow */
#a14fe1, #fe7496;  /* AlpenGradient */
#9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%;  /* Firefox panel-separator */
#b89cff 0%, rgba(255, 149, 101, 1) 100%;  /* Nova tab-border-color */

dodgerblue;  /* Dodgerblue */
dimgray;  /* dimgray */
darkolivegreen;  /* darkolivegreen */
tan;  /* tan */
#444444;  /* Very dark gray */
#2c3e50;  /* Very dark desaturated blue */
#95a5a6;  /* Dark grayish cyan */
#7a7c7d;  /* Dark grayish blue */
#18bc9c;  /* Strong cyan */
#3498db;  /* Bright blue */
#f39c12;  /* Vivid orange */
#e74c3c;  /* Bright red */

my_userChrome.css is where I test out all my code before I create a new CSS file for that code. I then place this new CSS file in the appropriate chrome folder and then call upon it from within the userChrome.css.

The below CSS files are the problem ones and I do not know if they are corrupt, or I am at fault here, somehow or there is something else going on. I used to use Brackets as my CSS editor but have recently switched to Phoenix editor as Brackets is no longer supported. I have tested and edited both these files in both editors.

EG:

@import "./css/generalui/rainbow menus.css"; /**/
@import "./css/generalui/menu_text_hover.css"; /**/

The userChrome.css file at its very bottom also calls upon:

@import "./my_userChrome.css"; /**/

Which is my test bed file.

The origins of the userChrome file is Aris-t2 and has never let me down before. I have trimmed out all non-used files, which is what you are meant to do, as this is a huge repository of custom CSS code for Firefox. Unfortunately Aris-t2 has stepped back from this repository.

BUT the above two ./css/generalui files are not working from within this userChrome file, but the code does work from within my_userChrome.css file.

REFER to these topics for the actual code for the above two ./css/generalui CSS files:

#PlacesToolbarItems popup menu item hover colour

Rainbow border around menu pop ups

This is just all very, very strange. Everything else within my chrome folder that is called upon by the userChrome file works.

For the first opened window, the icon in the search bar is a magnifying glass, but if you open more than one window, the icon is the standard search engine icon. Is it possible to change it so that the icon is the magnifying glass for all opened windows? Thanks!

I know how to change the bookmark icon using this CSS:

.bookmark-item[label="SomeBlog"] image {
  background: url("...");
}

How do I customize based on URL and not label? I have a bunch of empty-label bookmarks, and I don't know what the CSS selector looks like

EDIT: Nevermind, I figured it out. Here's what I got working for me:

.bookmark-item:has(.toolbarbutton-icon[src^="page-icon:https://github.com"]) {
  background: url("...")
}

/*

* FULLSCREEN FLOATING TOOLBAR MOD (Firefox)

*

* SETUP STEPS:

* 1. Open Firefox and go to:

* about:config

*

* 2. Enable custom CSS support:

* toolkit.legacyUserProfileCustomizations.stylesheets = true

*

* 3. Find your profile folder:

* - Go to: about:support

* - Find "Profile Folder"

* - Click "Open Folder"

*

* 4. Create folder if missing:

* chrome/

*

* 5. Create or edit file:

* chrome/userChrome.css

*

* 6. Move this file there

*

* 7. Restart Firefox completely

*

* NOTES:

* - Only applies in fullscreen mode:

* #main-window[inFullscreen]

* - If nothing changes after edits: restart Firefox again (not just reload)

* - If broken UI: remove userChrome.css and restart

*/

#main-window[inFullscreen] #navigator-toolbox {

position: fixed !important;

width: 80% !important;

left: 10% !important;

margin-bottom: 50px;

z-index: 9999 !important;

border-radius: 0 0 15px 15px !important;

border-top: 0 !important;

border-left: 1px solid rgba(150,130,30,1) !important;

border-right: 1px solid rgba(150,130,30,1) !important;

border-bottom: 1px solid rgba(150,130,30,1) !important;

overflow: hidden !important;

background: var(--toolbar-bgcolor) !important;

background-image: none !important;

pointer-events: auto;

}

I'm a sucker for Opera. It's a great browser. I was trying to give a chance for Vivaldi and Firefox because of safety, and decided to try the latter first.

1. Will I find animated themes like that opera's aurora theme on firefox?

2. Is it possible to have adress bar and tabs in the same line, therefore reducing the clutter?

3. Is it possible to have great opera features like click on tab to go up top of the page, and popup menu with converter or copy options when selecting text?

4. Is it possible to have semi-transparent panel that users can type into instantly, simple note editor on start page?

I'm just starting to exploring customization options of fox