shy-rosepine.css (5179B)
1 /*== Rosé Pine for ShyFox =========================================================================== 2 3 Rosé Pine (main / dark) — https://rosepinetheme.com 4 5 ShyFox does not ship a palette. shy-variables.css derives everything from four 6 variables that the active browser theme normally supplies: 7 8 --bg-col <- --lwt-accent-color darker background 9 --tb-col <- --toolbar-bgcolor lighter background 10 --bt-col <- --toolbarbutton-icon-fill text and icons 11 --pp-col <- --arrowpanel-background popups 12 13 Pinning them here means ShyFox renders Rosé Pine even with no theme add-on 14 installed, and it cannot drift if an add-on updates its palette. A Rosé Pine 15 theme add-on is still worth installing for the surfaces ShyFox does not style 16 (about:preferences, about:addons, the PDF viewer) — it will simply agree 17 with these values instead of fighting them. 18 19 To switch variants, replace the palette block below with Moon or Dawn. 20 21 ===================================================================================================*/ 22 23 :root { 24 /* ---- Rosé Pine (main) palette ---- */ 25 --rp-base: #191724; 26 --rp-surface: #1f1d2e; 27 --rp-overlay: #26233a; 28 --rp-muted: #6e6a86; 29 --rp-subtle: #908caa; 30 --rp-text: #e0def4; 31 --rp-love: #eb6f92; 32 --rp-gold: #f6c177; 33 --rp-rose: #ebbcba; 34 --rp-pine: #31748f; 35 --rp-foam: #9ccfd8; 36 --rp-iris: #c4a7e7; 37 --rp-highlight-low: #21202e; 38 --rp-highlight-med: #403d52; 39 --rp-highlight-high: #524f67; 40 41 /* ---- ShyFox accent ---- */ 42 --shy-accent-color: var(--rp-iris) !important; 43 44 /* ---- the four variables ShyFox derives everything from ---- */ 45 --lwt-accent-color: var(--rp-base) !important; 46 --toolbar-bgcolor: var(--rp-surface) !important; 47 --toolbarbutton-icon-fill: var(--rp-text) !important; 48 --arrowpanel-background: var(--rp-overlay) !important; 49 50 /* ---- text colours ---- */ 51 --lwt-text-color: var(--rp-text) !important; 52 --toolbar-color: var(--rp-text) !important; 53 --arrowpanel-color: var(--rp-text) !important; 54 --panel-color: var(--rp-text) !important; 55 --newtab-text-primary-color: var(--rp-text) !important; 56 57 /* ---- url bar / search field ---- */ 58 --toolbar-field-background-color: var(--rp-overlay) !important; 59 --toolbar-field-color: var(--rp-text) !important; 60 --toolbar-field-border-color: var(--rp-highlight-med) !important; 61 --toolbar-field-focus-background-color: var(--rp-highlight-low) !important; 62 --toolbar-field-focus-color: var(--rp-text) !important; 63 --toolbar-field-focus-border-color: var(--rp-iris) !important; 64 --lwt-toolbar-field-background-color: var(--rp-overlay) !important; 65 --lwt-toolbar-field-color: var(--rp-text) !important; 66 --lwt-toolbar-field-focus: var(--rp-highlight-low) !important; 67 --lwt-toolbar-field-focus-color: var(--rp-text) !important; 68 --urlbar-box-bgcolor: var(--rp-overlay) !important; 69 --urlbar-box-text-color: var(--rp-subtle) !important; 70 71 /* ---- tabs ---- */ 72 --lwt-selected-tab-background-color: var(--rp-overlay) !important; 73 --tab-selected-bgcolor: var(--rp-overlay) !important; 74 --tab-selected-textcolor: var(--rp-text) !important; 75 --tab-hover-background-color: var(--rp-highlight-low) !important; 76 --lwt-tab-line-color: var(--rp-iris) !important; 77 78 /* ---- sidebar (Sidebery lives here) ---- */ 79 --lwt-sidebar-background-color: var(--rp-surface) !important; 80 --lwt-sidebar-text-color: var(--rp-text) !important; 81 82 /* ---- popups / menus ---- */ 83 --panel-separator-color: var(--rp-highlight-med) !important; 84 --panel-item-hover-bgcolor: var(--rp-highlight-low) !important; 85 --panel-item-active-bgcolor: var(--rp-highlight-med) !important; 86 --arrowpanel-border-color: var(--rp-highlight-med) !important; 87 --autocomplete-popup-background: var(--rp-overlay) !important; 88 --autocomplete-popup-color: var(--rp-text) !important; 89 90 /* ---- links, focus, state ---- */ 91 --link-color: var(--rp-foam) !important; 92 --link-color-hover: var(--rp-rose) !important; 93 --focus-outline-color: var(--rp-iris) !important; 94 --error-text-color: var(--rp-love) !important; 95 --warning-text-color: var(--rp-gold) !important; 96 --success-text-color: var(--rp-pine) !important; 97 98 /* ---- ShyFox extras ---- */ 99 --shadow-col: #00000040; 100 --private-col: #c4a7e780; /* iris at 50% for the private-window outline */ 101 } 102 103 /* Rosé Pine is a dark palette; keep it if the OS reports light mode. */ 104 @media (prefers-color-scheme: light) { 105 :root { 106 --lwt-accent-color: var(--rp-base) !important; 107 --toolbar-bgcolor: var(--rp-surface) !important; 108 --toolbarbutton-icon-fill: var(--rp-text) !important; 109 --arrowpanel-background: var(--rp-overlay) !important; 110 } 111 }