├── README.md ├── chrome.css ├── preferences.json └── screenshots ├── 1.png ├── 2.png ├── 3.png └── pywalzen.png /README.md: -------------------------------------------------------------------------------- 1 |

🎨 PywalZen

2 | 3 |

By using some native color variables, this theme makes Pywalfox work with Zen Browser correctly.

4 | 5 | > [!NOTE] 6 | > This theme overrides custom gradients, but it is compatible with the new grain effect! 7 | 8 | ![](./screenshots/1.png) 9 | ![](./screenshots/2.png) 10 | ![](./screenshots/3.png) 11 | 12 | > [!CAUTION] 13 | > Use this exclusively with Pywalfox, if not the theme will look wrong causing unreadable text and other issues. 14 | 15 | ## Installation 16 | 1. Make sure you have [Pywalfox](https://github.com/Frewacom/pywalfox) installed and configured correctly. 17 | 2. Paste the contents of [chrome.css](https://github.com/Axenide/PywalZen/blob/main/chrome.css) into your `userChrome.css` file. 18 | - Check this [guide](https://docs.zen-browser.app/guides/live-editing) for more information on how to edit the `userChrome.css` file. 19 | 3. Modify the preferences in `about:config` as follows: 20 | - Type `uc.pywalzen.darkness` 21 | - Set it to any of these strings: `default`, `dark`, `darker`, `yet-darker`, `pitch-black`. 22 | 4. Enjoy! 23 | 24 |

25 | 26 | 27 | 28 | Please consider giving me a tip. :) 29 |
30 | ☕ Cafecito | 31 | ❤️ Ko-Fi | 32 | 💸 PayPal 33 | 34 | 35 |

36 | -------------------------------------------------------------------------------- /chrome.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --zen-primary-color: #d9d9d9 !important; 3 | --zen-colors-primary: var(--tab-loading-fill) !important; 4 | --zen-colors-secondary: var(--tab-loading-fill) !important; 5 | --toolbarbutton-icon-fill: var(--tab-loading-fill) !important; 6 | } 7 | 8 | :root:has(#theme-PywalZen[uc-pywalzen-darkness="default"]) { 9 | --zen-colors-tertiary: var(--lwt-accent-color) !important; 10 | --zen-main-browser-background: var(--lwt-accent-color) !important; 11 | --zen-themed-toolbar-bg: var(--lwt-accent-color) !important; 12 | --arrowpanel-background: var(--lwt-accent-color) !important; 13 | #urlbar[breakout-extend="true"] > #urlbar-background { 14 | background: var(--lwt-accent-color) !important; 15 | } 16 | } 17 | 18 | :root:has(#theme-PywalZen[uc-pywalzen-darkness="dark"]) { 19 | --zen-colors-tertiary: color-mix( 20 | in srgb, 21 | var(--lwt-accent-color), 22 | black 25% 23 | ) !important; 24 | --zen-main-browser-background: color-mix( 25 | in srgb, 26 | var(--lwt-accent-color), 27 | black 25% 28 | ) !important; 29 | --zen-themed-toolbar-bg: color-mix( 30 | in srgb, 31 | var(--lwt-accent-color), 32 | black 25% 33 | ) !important; 34 | --arrowpanel-background: color-mix( 35 | in srgb, 36 | var(--lwt-accent-color), 37 | black 25% 38 | ) !important; 39 | #urlbar[breakout-extend="true"] > #urlbar-background { 40 | background: color-mix( 41 | in srgb, 42 | var(--lwt-accent-color), 43 | black 25% 44 | ) !important; 45 | } 46 | } 47 | 48 | :root:has(#theme-PywalZen[uc-pywalzen-darkness="darker"]) { 49 | --zen-colors-tertiary: color-mix( 50 | in srgb, 51 | var(--lwt-accent-color), 52 | black 50% 53 | ) !important; 54 | --zen-main-browser-background: color-mix( 55 | in srgb, 56 | var(--lwt-accent-color), 57 | black 50% 58 | ) !important; 59 | --zen-themed-toolbar-bg: color-mix( 60 | in srgb, 61 | var(--lwt-accent-color), 62 | black 50% 63 | ) !important; 64 | --arrowpanel-background: color-mix( 65 | in srgb, 66 | var(--lwt-accent-color), 67 | black 50% 68 | ) !important; 69 | #urlbar[breakout-extend="true"] > #urlbar-background { 70 | background: color-mix( 71 | in srgb, 72 | var(--lwt-accent-color), 73 | black 50% 74 | ) !important; 75 | } 76 | } 77 | 78 | :root:has(#theme-PywalZen[uc-pywalzen-darkness="yet-darker"]) { 79 | --zen-colors-tertiary: color-mix( 80 | in srgb, 81 | var(--lwt-accent-color), 82 | black 75% 83 | ) !important; 84 | --zen-main-browser-background: color-mix( 85 | in srgb, 86 | var(--lwt-accent-color), 87 | black 75% 88 | ) !important; 89 | --zen-themed-toolbar-bg: color-mix( 90 | in srgb, 91 | var(--lwt-accent-color), 92 | black 75% 93 | ) !important; 94 | --arrowpanel-background: color-mix( 95 | in srgb, 96 | var(--lwt-accent-color), 97 | black 75% 98 | ) !important; 99 | #urlbar[breakout-extend="true"] > #urlbar-background { 100 | background: color-mix( 101 | in srgb, 102 | var(--lwt-accent-color), 103 | black 75% 104 | ) !important; 105 | } 106 | } 107 | 108 | :root:has(#theme-PywalZen[uc-pywalzen-darkness="pitch-black"]) { 109 | --zen-colors-tertiary: black !important; 110 | --zen-main-browser-background: black !important; 111 | --zen-themed-toolbar-bg: black !important; 112 | --arrowpanel-background: black !important; 113 | #urlbar[breakout-extend="true"] > #urlbar-background { 114 | background: black !important; 115 | } 116 | } 117 | 118 | #urlbar:not([focused="true"]):not([breakout-extend="true"]) 119 | > #urlbar-background { 120 | background: color-mix( 121 | in srgb, 122 | light-dark(#fff, var(--zen-colors-secondary)) 35%, 123 | transparent 65% 124 | ) !important; 125 | } 126 | 127 | #commonDialogWindow { 128 | background-color: black !important; 129 | } 130 | -------------------------------------------------------------------------------- /preferences.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "property": "uc.pywalzen.darkness", 4 | "label": "Darkness level", 5 | "type": "dropdown", 6 | "defaultValue": "default", 7 | "options": [ 8 | {"value": "default", "label": "Default"}, 9 | {"value": "dark", "label": "Dark"}, 10 | {"value": "darker", "label": "Darker"}, 11 | {"value": "yet-darker", "label": "Yet darker"}, 12 | {"value": "pitch-black", "label": "Pitch black"} 13 | ], 14 | "disabledOn": [] 15 | } 16 | ] 17 | -------------------------------------------------------------------------------- /screenshots/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Axenide/PywalZen/31fa83343c2e4224bae1c20ce2bcd53f0b987332/screenshots/1.png -------------------------------------------------------------------------------- /screenshots/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Axenide/PywalZen/31fa83343c2e4224bae1c20ce2bcd53f0b987332/screenshots/2.png -------------------------------------------------------------------------------- /screenshots/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Axenide/PywalZen/31fa83343c2e4224bae1c20ce2bcd53f0b987332/screenshots/3.png -------------------------------------------------------------------------------- /screenshots/pywalzen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Axenide/PywalZen/31fa83343c2e4224bae1c20ce2bcd53f0b987332/screenshots/pywalzen.png --------------------------------------------------------------------------------