moved palletes and templates into categories in extra

extra/templates/browsers/firefox/readme.md

@@ -0,0 +1,17 @@
+# Firefox
+
+1. Download the [template file](userChrome.css)
+
+2. Configure the template in `~/.config/clrsync/config.toml`:
+
+```toml
+[templates.firefox]
+enabled = true
+input_path = '~/.config/clrsync/templates/userChrome.css'
+output_path = '~/.mozilla/firefox/<profile>/chrome/userChrome.css'
+reload_cmd = ''
+```
+
+3. Enable `toolkit.legacyUserProfileCustomizations.stylesheets` in `about:config`
+
+4. Restart Firefox to apply the theme

extra/templates/browsers/firefox/userChrome.css

@@ -0,0 +1,109 @@
+/* clrsync Firefox Theme */
+/* Place in: <Firefox Profile>/chrome/userChrome.css */
+/* Enable: about:config -> toolkit.legacyUserProfileCustomizations.stylesheets = true */
+
+:root {
+  --lwt-accent-color: {background} !important;
+  --lwt-text-color: {foreground} !important;
+
+  --toolbar-bgcolor: {surface} !important;
+  --toolbar-color: {on_surface} !important;
+  --toolbarbutton-hover-background: {surface_variant} !important;
+  --toolbarbutton-active-background: {border_focused} !important;
+  --toolbarbutton-icon-fill: {on_surface} !important;
+
+  --tab-selected-bgcolor: {surface} !important;
+  --tab-selected-textcolor: {foreground} !important;
+  --tab-loading-fill: {accent} !important;
+  --lwt-tab-text: {foreground} !important;
+  --tab-line-color: {accent} !important;
+
+  --urlbar-box-bgcolor: {surface_variant} !important;
+  --urlbar-box-text-color: {on_surface} !important;
+  --urlbar-box-hover-bgcolor: {surface} !important;
+  --urlbar-box-focus-bgcolor: {surface} !important;
+  --urlbar-popup-url-color: {editor_link} !important;
+
+  --arrowpanel-background: {surface} !important;
+  --arrowpanel-color: {on_surface} !important;
+  --arrowpanel-border-color: {border} !important;
+  --panel-separator-color: {border} !important;
+
+  --sidebar-background-color: {background} !important;
+  --sidebar-text-color: {foreground} !important;
+  --sidebar-border-color: {border} !important;
+
+  --toolbar-field-focus-background-color: {surface} !important;
+  --toolbar-field-focus-color: {on_surface} !important;
+  --toolbar-field-focus-border-color: {accent} !important;
+}
+
+#TabsToolbar {
+  background-color: {background} !important;
+}
+
+.tab-background[selected="true"] {
+  background-color: {surface} !important;
+}
+
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]) {
+  background-color: {surface_variant} !important;
+}
+
+.tab-line {
+  background-color: {accent} !important;
+}
+
+#nav-bar {
+  background-color: {surface} !important;
+}
+
+#urlbar-background {
+  background-color: {surface_variant} !important;
+  border-color: {border} !important;
+}
+
+#urlbar[focused="true"] > #urlbar-background {
+  background-color: {surface} !important;
+  border-color: {accent} !important;
+}
+
+#urlbar-input {
+  color: {on_surface} !important;
+}
+
+#PersonalToolbar {
+  background-color: {surface} !important;
+}
+
+menupopup, panel {
+  --panel-background: {surface} !important;
+  --panel-color: {on_surface} !important;
+}
+
+menupopup {
+  background-color: {surface} !important;
+  color: {on_surface} !important;
+}
+
+menuitem:hover, menu:hover {
+  background-color: {surface_variant} !important;
+}
+
+#sidebar-box {
+  background-color: {background} !important;
+}
+
+#sidebar-header {
+  background-color: {surface} !important;
+  border-bottom-color: {border} !important;
+}
+
+findbar {
+  background-color: {surface} !important;
+  color: {on_surface} !important;
+}
+
+* {
+  scrollbar-color: {surface_variant} {background} !important;
+}