Vertigo: a simple userChrome theme for Firefox (and Sidebery)

userChrome.css

/***
* Vertigo: a simple userChrome theme for Firefox
* To install, use the instructions at
* https://www.userchrome.org/how-create-userchrome-css.html
* then paste this entire file into userChrome.css
* (or download this file into your chrome folder).
*
* author: Ved Thiru (PerpetualCreativity), vedthiru.com
***/

/* feel free to delete any lines that aren't relevant to you. */

/* colors from https://rosepinetheme.com/palette/ingredients/ */
/* you can customize these colors */

:root {
    --font: VictorMono Nerd Font;
    --nav-bar-bg: #faf4ed; /* Base */
    --nav-bar-fg: #9893a5; /* Muted */
    --url-bar-bg: #f2e9e1; /* Overlay */
    --url-bar-fg: #575279; /* Text */
    --highlight:  #cecacd; /* Highlight High */
}

@media (prefers-color-scheme: dark) {
    :root {
        --nav-bar-bg: #232136; /* Base */
        --nav-bar-fg: #6e6a86; /* Muted */
        --url-bar-bg: #2a273f; /* Overlay */
        --url-bar-fg: #e0def4; /* Text */
        --highlight:  #56526e; /* Highlight High */
    }
}

* {
    font-family: var(--font) !important;
}

#nav-bar {
    background: var(--nav-bar-bg) !important;
    color: var(--nav-bar-fg) !important;
}
#urlbar-background {
    background: var(--url-bar-bg) !important;
    color: var(--url-bar-fg) !important;
}
#urlbar-input-container {
    color: var(--nav-bar-fg) !important;
}
#urlbar-input::selection {
    background-color: var(--highlight) !important;
}
#urlbar-scheme, #urlbar-input {
    font-family: var(--font) !important;
    color: var(--url-bar-fg) !important;
}

#fxa-toolbar-menu-button,
#downloads-button,
#unified-extensions-button,
#PanelUI-menu-button {
    fill: var(--url-bar-fg) !important;
}

/* make the url bar a reasonable size */
#urlbar-container { max-width: 1200px !important; }
toolbarspring { max-width: none !important; }

/* vertical/tree tab friendly layout */
/* best used with an extension like github.com/mbnuqw/sidebery */
#TabsToolbar { visibility: collapse; }
#titlebar, #sidebar-header, #back-button, #forward-button {
    display: none;
}

userContent.css

/***
* Put this alongside userChrome.css to make the new tab page
* and reader mode look better
***/

/* colors from https://rosepinetheme.com/palette/ingredients/ */
/* you can customize these colors */

body {
  --font: Recursive Sans Casual Static;
  --bg: #faf4ed; /* Base */
  --fg: #575279; /* Text */
}
@media (prefers-color-scheme: dark) {
  body {
    --bg: #232136; /* Base */
    --fg: #e0def4; /* Text */
  }
}

@-moz-document url("about:newtab") {
  body {
    background-color: var(--bg) !important;
  }
}

@-moz-document url-prefix("about:reader"){
  #toolbar { display: none; }
  body {
    background-color: var(--bg) !important;
    color: var(--fg) !important;
    font-family: var(--font) !important;
  }
}

x-sidebery.css

/***
* Theme for Sidebery: github.com/mbnuqw/sidebery
* If you are using Sidebery, go to
* Sidebery Settings, then Styles Editor.
* Then paste the contents below on the right-hand-side text editor.
***/

/* colors from https://rosepinetheme.com/palette/ingredients/ */
/* you can customize these colors */

#root {
    --font: VictorMono Nerd Font;
    --bg-secondary: #faf4ed; /* Base */
    --fg-secondary: #797593; /* Subtle */
    --bg-primary: #fffaf3;   /* Surface */
    --fg-primary: #575279;   /* Text */
}

@media (prefers-color-scheme: dark) {
    #root {
        --bg-secondary: #232136; /* Base */
        --fg-secondary: #908caa; /* Subtle */
        --bg-primary: #2a273f;   /* Surface */
        --fg-primary: #e0def4;   /* Text */
    }
}

#root.root {--tabs-font: 1.2rem var(--font);}
#root.root {--tabs-activated-bg: var(--bg-primary);}
#root.root {--tabs-activated-fg: var(--fg-primary);}
#root.root {--tabs-count-font: 0.625rem var(--font);}
#root.root {--frame-bg: var(--bg-secondary);}
#root.root {--frame-fg: var(--fg-secondary);}
#root.root {--toolbar-fg: var(--fg-primary);}
#root.root {--toolbar-bg: var(--bg-secondary);}

/***
* Now copy and paste this into the Group Page section
* of the Styles Editor.
***/

#root {
    --font: Recursive Sans Casual Static;
    --bg-secondary: #faf4ed; /* Base */
    --fg-secondary: #797593; /* Subtle */
    --bg-primary: #fffaf3;   /* Surface */
    --fg-primary: #575279;   /* Text */
}

@media (prefers-color-scheme: dark) {
    #root {
        --bg-secondary: #232136; /* Base */
        --fg-secondary: #908caa; /* Subtle */
        --bg-primary: #2a273f;   /* Surface */
        --fg-primary: #e0def4;   /* Text */
    }
}

#root.root {--frame-bg: var(--bg-primary);}
#root.root {--frame-fg: var(--fg-primary);}
#root.root {--toolbar-bg: var(--bg-secondary);}