betterbird/thunderbird matugen template

README.md

@@ -565,7 +565,7 @@ paru -S qt6ct-kde
 
 You'll have to restart your session for themes to take effect.
 
-Nevigate to dms settings -> themes & colors -> and click "Apply QT Themes"
+Navigate to dms settings -> themes & colors -> and click "Apply QT Themes"
 
 #### Firefox
 
@@ -591,12 +591,7 @@ Firefox does use the GTK3 theme, but it doesn't look that good on the stock them
 - set `svg.context-properties.content.enabled` to `true`
 - Create a new property called `userChrome.theme-material` and type `boolean`
   - set to `true`
-
+l
-<details><summary><strong>Expand for firefox screenshots</strong></summary>
-<img width="1262" height="104" alt="image" src="https://github.com/user-attachments/assets/4bca43d1-5735-4401-9b91-5ee4f0b1e357" />
-<img width="1262" height="104" alt="image" src="https://github.com/user-attachments/assets/348d37e0-5c6c-4db8-b7c9-89cabf282c25" />
-<img width="1244" height="106" alt="image" src="https://github.com/user-attachments/assets/75fd4972-bc4a-4657-b756-b31ef8061b3b" />
-</details>
 
 2. **Install material fox theme**
 ```bash
@@ -616,6 +611,18 @@ rm -f "$PROFILE_DIR/chrome/theme-material-blue.css"
 ln -sf ~/.config/DankMaterialShell/firefox.css "$PROFILE_DIR/chrome/theme-material-blue.css"
 ```
 
+#### Betterbird/Thunderbird
+
+1. **In betterbird** - open config editor
+- set `toolkit.legacyuserprofilecustomizations.stylesheets` to `true`
+
+2. **Create chrome directory and symlink**
+```bash
+export TB_PROFILE=$(find ~/.thunderbird -maxdepth 1 -type d -name "*.default-default" | head -n 1)
+mkdir $TB_PROFILE/chrome
+ln -sf ~/.thunderbird/dms-thunderbird.css $TB_PROFILE/chrome/userChrome.css
+```
+
 ### Terminal Integration
 
 The matugen integration will automatically generate new colors for certain apps only if they are installed.

matugen/configs/thunderbird.toml

@@ -0,0 +1,3 @@
+[templates.thunderbird]
+input_path = './matugen/templates/thunderbird-userchrome.css'
+output_path = '~/.thunderbird/dms-thunderbird.css'

matugen/templates/thunderbird-userchrome.css

@@ -0,0 +1,260 @@
+treechildren::-moz-tree-row(even) {
+  background-image: linear-gradient({{colors.surface_container.default.hex}}, {{colors.surface_container.default.hex}}) !important;
+}
+
+#threadTree tr[is="thread-row"][even="true"] {
+  background-image: linear-gradient({{colors.surface_container.default.hex}}, {{colors.surface_container.default.hex}}) !important;
+}
+
+#threadTree treechildren::-moz-tree-cell-text(untagged) {
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+#threadTree treechildren::-moz-tree-image(selected, untagged) {
+  stroke: {{colors.on_primary_container.default.hex}} !important;
+  fill: {{colors.primary_container.default.hex}} !important;
+}
+
+#threadTree treechildren::-moz-tree-twisty(selected, untagged) {
+  stroke: {{colors.on_primary_container.default.hex}} !important;
+  fill: {{colors.on_primary_container.default.hex}} !important;
+}
+
+#threadTree treechildren::-moz-tree-line(selected, untagged) {
+  border-color: {{colors.on_primary_container.default.hex}} !important;
+}
+
+#threadTree tr.selected[is="thread-row"][data-properties~="untagged"] {
+  color: {{colors.on_primary_container.default.hex}} !important;
+}
+
+#threadTree treechildren::-moz-tree-cell-text(multiline, untagged) {
+  color: {{colors.primary.default.hex}} !important;
+}
+
+#threadTree treechildren::-moz-tree-cell-text(multiline, colspan, untagged) {
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+#threadTree tr[is="thread-row"][multiline="true"] td:not(.subjectcol-column) {
+  color: {{colors.primary.default.hex}} !important;
+}
+
+#threadTree treechildren::-moz-tree-row(untagged, selected) {
+  border: none !important;
+  background-color: {{colors.primary_container.default.hex}} !important;
+}
+
+#threadTree treechildren::-moz-tree-row(untagged, selected, focus) {
+  background-color: {{colors.primary_container.default.hex}} !important;
+}
+
+#threadTree treechildren::-moz-tree-row(untagged, hover) {
+  background-color: {{colors.surface_container_high.default.hex}} !important;
+}
+
+#threadTree treechildren::-moz-tree-row(untagged, selected, focus, hover) {
+  background-color: {{colors.primary_container.default.hex}} !important;
+}
+
+#threadTree tr.selected[is="thread-row"][data-properties~="untagged"],
+#threadTree tr.selected[is="thread-row"][even="true"][data-properties~="untagged"] {
+  border: none !important;
+  background-color: {{colors.primary_container.default.hex}} !important;
+  background-image: none !important;
+}
+
+#threadTree [is="tree-view-table-body"]:focus        tr.selected[is="thread-row"][data-properties~="untagged"],
+#threadTree [is="tree-view-table-body"]:focus-within tr.selected[is="thread-row"][data-properties~="untagged"],
+#threadTree [is="tree-view-table-body"]:focus        tr.selected[is="thread-row"][even="true"][data-properties~="untagged"],
+#threadTree [is="tree-view-table-body"]:focus-within tr.selected[is="thread-row"][even="true"][data-properties~="untagged"] {
+   border: none !important;
+   background-color: {{colors.primary_container.default.hex}} !important;
+   background-image: none !important;
+}
+
+#threadTree tr:hover[is="thread-row"][data-properties~="untagged"] {
+  background-color: {{colors.surface_container_high.default.hex}} !important;
+}
+
+#threadTree tr.selected:hover[is="thread-row"][data-properties~="untagged"],
+#threadTree tr.selected:hover[is="thread-row"][even="true"][data-properties~="untagged"] {
+  background-color: {{colors.primary_container.default.hex}} !important;
+  background-image: none !important;
+}
+
+#threadTree treechildren::-moz-tree-row(multiline, unread) {
+  border-left: 2px solid {{colors.primary.default.hex}} !important;
+}
+
+#threadTree tr[is="thread-row"][multiline="true"][data-properties~="unread"] {
+  background-image: linear-gradient(to right, {{colors.primary.default.hex}} 0, {{colors.primary.default.hex}} 2px, transparent 2px) !important;
+}
+
+#threadTree tr[is="thread-row"][even="true"][multiline="true"][data-properties~="unread"] {
+  background-image: linear-gradient(to right, {{colors.primary.default.hex}} 0, {{colors.primary.default.hex}} 2px, {{colors.surface_container.default.hex}} 2px) !important;
+}
+
+#folderTree treechildren::-moz-tree-image(folderNameCol, selected, focus),
+#folderTree treechildren::-moz-tree-image(folderNameCol, newMessages-true, selected, focus),
+#folderTree treechildren::-moz-tree-image(folderNameCol, isServer-true, biffState-NewMail, selected, focus) {
+  stroke: {{colors.error.default.hex}} !important;
+  fill: {{colors.tertiary.default.hex}} !important;
+}
+
+#folderTree li.selected > .container > .icon {
+  stroke: {{colors.error.default.hex}} !important;
+  fill: {{colors.tertiary.default.hex}} !important;
+}
+
+#folderTree treechildren::-moz-tree-cell-text(selected) {
+  color: {{colors.on_primary_container.default.hex}} !important;
+}
+
+#folderTree treechildren::-moz-tree-twisty(selected) {
+  stroke: {{colors.on_primary_container.default.hex}} !important;
+  fill: {{colors.on_primary_container.default.hex}} !important;
+}
+
+#folderTree treechildren::-moz-tree-row(selected) {
+  border: none !important;
+  background-color: {{colors.primary_container.default.hex}} !important;
+}
+
+#folderTree treechildren::-moz-tree-row(selected, focus) {
+  background-color: {{colors.primary_container.default.hex}} !important;
+}
+
+#folderTree treechildren::-moz-tree-row(hover) {
+  background-color: {{colors.surface_container_high.default.hex}} !important;
+}
+
+#folderTree treechildren::-moz-tree-row(selected, focus, hover) {
+  background-color: {{colors.primary_container.default.hex}} !important;
+}
+
+#folderTree treechildren::-moz-tree-cell(dropOn) {
+  background-image: none !important;
+  background-color: {{colors.error_container.default.hex}} !important;
+}
+
+#folderTree li.selected > .container {
+  background-color: {{colors.primary_container.default.hex}} !important;
+  color: {{colors.on_primary_container.default.hex}} !important;
+}
+
+#folderTree:focus-within li.selected > .container {
+  background-color: {{colors.primary_container.default.hex}} !important;
+  color: {{colors.on_primary_container.default.hex}} !important;
+}
+
+#folderTree li[is="folder-tree-row"] > .container:hover {
+  background-color: {{colors.surface_container_high.default.hex}} !important;
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+#folderTree li.selected[is="folder-tree-row"] > .container:hover {
+  background-color: {{colors.primary_container.default.hex}} !important;
+  color: {{colors.on_primary_container.default.hex}} !important;
+}
+
+#folderTree li.drop-target[is="folder-tree-row"] > .container {
+  background-color: {{colors.error_container.default.hex}} !important;
+}
+
+.autocomplete-richlistitem:hover {
+  background-color: {{colors.error_container.default.hex}} !important;
+}
+
+#threadTree[filterActive="searching"] {
+  background-color: {{colors.tertiary_container.default.hex}} !important;
+}
+
+#folderTree .unread-count {
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+#folderTree .new-messages > .container > .unread-count {
+  color: {{colors.error.default.hex}} !important;
+}
+
+.calendar-month-day-box-current-month[relation="today"],
+.calendar-month-day-box-day-off[relation="today"],
+.calendar-month-day-box-other-month[relation="today"]
+{
+  border: 2px solid {{colors.error.default.hex}} !important;
+}
+
+.message-header-label {
+  color: {{colors.error.default.hex}} !important;
+  font-weight: bold !important;
+}
+
+button[type="button"].button-primary,
+button.primary,
+.button-primary {
+  background-color: {{colors.primary.default.hex}} !important;
+  color: {{colors.on_primary.default.hex}} !important;
+}
+
+button[type="button"].button-primary:hover,
+button.primary:hover,
+.button-primary:hover {
+  background-color: {{colors.primary.default.hex}} !important;
+  color: {{colors.on_primary.default.hex}} !important;
+}
+
+#newMsgButton,
+#newIMAccountButton {
+  background-color: {{colors.primary.default.hex}} !important;
+  color: {{colors.on_primary.default.hex}} !important;
+}
+
+.tabmail-tab[selected="true"],
+.tab-background[selected="true"],
+tab[selected="true"] {
+  background-color: {{colors.primary.default.hex}} !important;
+  color: {{colors.on_primary.default.hex}} !important;
+}
+
+.tabmail-tab[selected="true"] .tab-text,
+tab[selected="true"] .tab-text {
+  color: {{colors.on_primary.default.hex}} !important;
+}
+
+.spaces-toolbar-button.current {
+  background-color: {{colors.primary.default.hex}} !important;
+  color: {{colors.on_primary.default.hex}} !important;
+}
+
+#folderTree li[is="folder-tree-row"].new-messages > .container,
+#folderTree li[is="folder-tree-row"] > .container.new-messages {
+  color: {{colors.primary.default.hex}} !important;
+  font-weight: bold !important;
+}
+
+table th.column {
+  background-color: {{colors.primary.default.hex}} !important;
+  color: {{colors.on_primary.default.hex}} !important;
+}
+
+table tr th {
+  background-color: {{colors.primary.default.hex}} !important;
+  color: {{colors.on_primary.default.hex}} !important;
+}
+
+:root {
+  --folderpane-unread-new-count-background: {{colors.primary.default.hex}} !important;
+  --new-folder-color: {{colors.primary.default.hex}} !important;
+}
+
+#booksPaneCreateContact,
+button.button-primary.icon-button {
+  background-color: {{colors.primary.default.hex}} !important;
+  color: {{colors.on_primary.default.hex}} !important;
+}
+
+tree-table-cell-container button {
+  background-color: {{colors.surface_container_high.default.hex}} !important;
+  color: {{colors.on_surface.default.hex}} !important;
+}

scripts/matugen-worker.sh

@@ -108,6 +108,11 @@ build_once() {
     cat "$SHELL_DIR/matugen/configs/vesktop.toml" >> "$TMP_CFG"
     echo "" >> "$TMP_CFG"
   fi
+
+  if command -v thunderbird >/dev/null 2>&1 || command -v betterbird >/dev/null 2>&1; then
+    cat "$SHELL_DIR/matugen/configs/thunderbird.toml" >> "$TMP_CFG"
+    echo "" >> "$TMP_CFG"
+  fi
   
   # GTK3 colors based on colloid
   COLLOID_TEMPLATE="$SHELL_DIR/matugen/templates/gtk3-colors.css"