/ .chezmoitemplates / zen-chrome / userChrome.css
userChrome.css
  1  /* Catppuccin Mocha Mauve userChrome.css*/
  2  
  3  @media (prefers-color-scheme: dark) {
  4    :root {
  5      --zen-colors-primary: #313244 !important;
  6      --zen-primary-color: #cba6f7 !important;
  7      --zen-colors-secondary: #313244 !important;
  8      --zen-colors-tertiary: #181825 !important;
  9      --zen-colors-border: #cba6f7 !important;
 10      --toolbarbutton-icon-fill: #cba6f7 !important;
 11      --lwt-text-color: #cdd6f4 !important;
 12      --toolbar-field-color: #cdd6f4 !important;
 13      --tab-selected-textcolor: rgb(204, 190, 246) !important;
 14      --toolbar-field-focus-color: #cdd6f4 !important;
 15      --toolbar-color: #cdd6f4 !important;
 16      --newtab-text-primary-color: #cdd6f4 !important;
 17      --arrowpanel-color: #cdd6f4 !important;
 18      --arrowpanel-background: #1e1e2e !important;
 19      --sidebar-text-color: #cdd6f4 !important;
 20      --lwt-sidebar-text-color: #cdd6f4 !important;
 21      --lwt-sidebar-background-color: #11111b !important;
 22      --toolbar-bgcolor: #313244 !important;
 23      --newtab-background-color: #1e1e2e !important;
 24      --zen-themed-toolbar-bg: #181825 !important;
 25      --zen-main-browser-background: #181825 !important;
 26      --toolbox-bgcolor-inactive: #181825 !important;
 27    }
 28  
 29    #permissions-granted-icon {
 30      color: #181825 !important;
 31    }
 32  
 33    .sidebar-placesTree {
 34      background-color: #1e1e2e !important;
 35    }
 36  
 37    #zen-workspaces-button {
 38      background-color: #1e1e2e !important;
 39    }
 40  
 41    #TabsToolbar {
 42      background-color: #181825 !important;
 43    }
 44  
 45    .urlbar-background {
 46      background-color: #1e1e2e !important;
 47    }
 48  
 49    .content-shortcuts {
 50      background-color: #1e1e2e !important;
 51      border-color: #cba6f7 !important;
 52    }
 53  
 54    .urlbarView-url {
 55      color: #cba6f7 !important;
 56    }
 57  
 58    #zenEditBookmarkPanelFaviconContainer {
 59      background: #11111b !important;
 60    }
 61  
 62    #zen-media-controls-toolbar {
 63      & #zen-media-progress-bar {
 64        &::-moz-range-track {
 65          background: #313244 !important;
 66        }
 67      }
 68    }
 69  
 70    toolbar .toolbarbutton-1 {
 71      &:not([disabled]) {
 72        &:is([open], [checked])
 73          > :is(
 74            .toolbarbutton-icon,
 75            .toolbarbutton-text,
 76            .toolbarbutton-badge-stack
 77          ) {
 78          fill: #11111b;
 79        }
 80      }
 81    }
 82  
 83    .identity-color-blue {
 84      --identity-tab-color: #89b4fa !important;
 85      --identity-icon-color: #89b4fa !important;
 86    }
 87  
 88    .identity-color-turquoise {
 89      --identity-tab-color: #94e2d5 !important;
 90      --identity-icon-color: #94e2d5 !important;
 91    }
 92  
 93    .identity-color-green {
 94      --identity-tab-color: #a6e3a1 !important;
 95      --identity-icon-color: #a6e3a1 !important;
 96    }
 97  
 98    .identity-color-yellow {
 99      --identity-tab-color: #f9e2af !important;
100      --identity-icon-color: #f9e2af !important;
101    }
102  
103    .identity-color-orange {
104      --identity-tab-color: #fab387 !important;
105      --identity-icon-color: #fab387 !important;
106    }
107  
108    .identity-color-red {
109      --identity-tab-color: #f38ba8 !important;
110      --identity-icon-color: #f38ba8 !important;
111    }
112  
113    .identity-color-pink {
114      --identity-tab-color: #f5c2e7 !important;
115      --identity-icon-color: #f5c2e7 !important;
116    }
117  
118    .identity-color-purple {
119      --identity-tab-color: #cba6f7 !important;
120      --identity-icon-color: #cba6f7 !important;
121    }
122  
123    hbox#titlebar {
124      background-color: #181825 !important;
125    }
126  
127    #zen-appcontent-navbar-container {
128      background-color: #181825 !important;
129    }
130  }