feat: 3.3.0 (#14)

* fix: broken theme on newer Discord versions * fix(Makefile): mark PHONies Stream Dorian Electra's Phonies while you are at it * fix(guide): typo * fix(global): filled buttons color when error or floating * fix(chat): mentions * fix: custom color picker * fix(context): some submenus not having border radius * fix(discover): sidebar selected item color on light mode the default is white making it hard to see * feat(settings)[guild]: bans searchbar * feat(nitro): remove over-themed ad banners we get it, you want us to buy avatar decorations, it doesn't need sparkles, gradients, arts, a simple banner is enough. * chore: format * fix(settings)[my_account]: floating button blending in the background in light mode * feat: 3.3.0 --------- Co-authored-by: Evangelos Paterakis <[email protected]>
GeopJr · Nov 13, 2023 · 2eabeaa · 2eabeaa
1 parent 1232efa
commit 2eabeaa
Show file tree

Hide file tree

Showing 75 changed files with 749 additions and 691 deletions.
diff --git a/DNOME-BD.theme.css b/DNOME-BD.theme.css
@@ -1,7 +1,7 @@
 /**
   * @name DNOME
   * @author GeopJr
-  * @version 3.1.0
+  * @version 3.3.0
   * @description Adwaita-inspired Discord theme
   * @authorLink https://geopjr.dev
   * @source https://github.com/GeopJr/DNOME

diff --git a/DNOME.theme.css b/DNOME.theme.css
@@ -1,3 +1,3 @@
-//META{"name":"DNOME","description":"Adwaita-inspired Discord theme","author":"GeopJr","version":"3.1.0"}*//
+//META{"name":"DNOME","description":"Adwaita-inspired Discord theme","author":"GeopJr","version":"3.3.0"}*//
 
 @import "https://raw.githack.com/GeopJr/DNOME/dist/DNOME.css";
diff --git a/Makefile b/Makefile
@@ -1,3 +1,5 @@
+.PHONY: gtk less
+
 gtk:
 	node gtk/grab_theme_colors.mjs
 

diff --git a/discord_theming_guide.md b/discord_theming_guide.md
@@ -21,9 +21,9 @@ This makes it a bit harder to select the element you need.
 For example consider the following:
 
 ```html
-<div class="base-2jDfDU">
-    <div class="content-1SgpWY">
-        <div class="sidebar-1tnWFu">
+<div class="base__2jDfDU">
+    <div class="content__1SgpWY">
+        <div class="sidebar_1tnWFu">
         </div>
     </div>
 </div>
@@ -32,51 +32,51 @@ For example consider the following:
 If the class names were static, you could do:
 
 ```css
-.sidebar-1tnWFu {
+.sidebar_1tnWFu {
     color: red;
 }
 ```
 
 but since they aren't, you have to use wildcard selectors:
 
 ```css
-div[class*="sidebar-"] {
+div[class*="sidebar_"] {
     color: red;
 }
 ```
 
 However, there's a problem with that - it's too easy to target element you don't want to:
 
 ```html
-<div class="base-2jDfDU">
-    <div class="content-1SgpWY">
-        <div class="sidebar-1tnWFu"></div>
+<div class="base__2jDfDU">
+    <div class="content__1SgpWY">
+        <div class="sidebar_1tnWFu"></div>
     </div>
-    <div class="sidebar-1jsabYE"></div>
+    <div class="sidebar_1jsabYE"></div>
 </div>
 ```
 
 the previous selector would target both. You need to instead "re-create" the DOM using child combinators:
 
 ```css
-div[class*="base-"] > div[class*="content-"] > div[class*="sidebar-"] {
+div[class*="base_"] > div[class*="content_"] > div[class*="sidebar_"] {
     color: red;
 }
 ```
 
 CSS preprocessors help with that through nested CSS making maintaining your theme slightly easier:
 
 ```less
-div[class*="base-"] {
-    > div[class*="content-"] {
-        > div[class*="sidebar-"] {
+div[class*="base_"] {
+    > div[class*="content_"] {
+        > div[class*="sidebar_"] {
             color: red;
         }
     }
 }
 ```
 
-> Note: Only omit the dash at the end when you are  targetting multiple classes that have the same prefix like: colorDefault-, colorError- => *="color"
+> Note: Only omit the dash at the end when you are targetting multiple classes that have the same prefix like: colorDefault_, colorError_ => *="color"
 
 ## Inspecting Discord's elements
 
@@ -86,8 +86,8 @@ Next time you open Discord you'll be able to press Ctrl + Shift + I to open web
 
 To select an element that dissapears when it loses focus you need to use breakpoints.
 
-For example, to select the search bar popup, you need to right click `<div class="layerContainer-2v_Sit">` (near the bottom) (you can see it getting children every time you open the search popup and removing them when it loses focus) and select `Break on > subtree modifications`.
+For example, to select the search bar popup, you need to right click `<div class="layerContainer_d5a653">` (near the bottom) (you can see it getting children every time you open the search popup and removing them when it loses focus) and select `Break on > subtree modifications`.
 
-Now you have to trigger a subtree modification by triggering the popup (click on the search bar). The script will now stop. The popup isn't there yet so you need to skip a tep by clicking the icon next to the play button at the top. It should now show up.
+Now you have to trigger a subtree modification by triggering the popup (click on the search bar). The script will now stop. The popup isn't there yet so you need to skip a step by clicking the icon next to the play button at the top. It should now show up.
 
 You can now freely select it, see its classes and modify your style.
diff --git a/src/DNOME.less b/src/DNOME.less
@@ -1,5 +1,5 @@
 // DNOME version (can be seen in Discord settings).
-@version: "3.2.0";
+@version: "3.3.0";
 
 // The way Discord loads channels in the sidebar
 // depends on the channel tab height, making it

diff --git a/src/modules/attribution.less b/src/modules/attribution.less
@@ -2,13 +2,13 @@
 // Adds a cute background image (small svg on top of linear gradient), DNOME's version
 // next to the other debug info, a thank you message and 1-2 links (not actually
 // anchors as it's a pseudo).
-div[class*="layer-"] {
-    >div[class*="standardSidebarView-"] {
-        >div[class*="sidebarRegion-"] {
-            >div[class*="sidebarRegionScroller-"] {
-                >nav[class*="sidebar-"] {
-                    >div[class*="side-"] {
-                        >div[class*="info-"] {
+div[class*="layer_"] {
+    >div[class*="standardSidebarView_"] {
+        >div[class*="sidebarRegion_"] {
+            >div[class*="sidebarRegionScroller_"] {
+                >nav[class*="sidebar_"] {
+                    >div[class*="side_"] {
+                        >div[class*="info_"] {
                             background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='85' height='85' viewBox='0 0 22.49 22.49'%3E%3Cpath fill-opacity='.1' d='M13.23 0a13.23 13.23 0 1 0 0 26.46 13.23 13.23 0 0 0 4.01-.64v-3.1a10.32 10.32 0 0 1-4 .83 10.32 10.32 0 1 1 0-20.64A10.32 10.32 0 0 1 22.9 16.8h3.06A13.23 13.23 0 0 0 13.23 0zM6.35 6.09a11.7 11.7 0 0 0-2.9 6.35v.26c.52.26 4.23 3.7 9.25 1.85 2.12-.8 3.44.27 5.03 1.32l.53.27-2.12 6.61.53-.26.53-.27 5.03-13.49h-.53c-1.06-1.06-1.59-1.85-2.91-2.38-1.85-.8-3.44.8-5.03 1.32-2.64.53-5.03.27-7.14-1.06l-.27-.52zm-2.9 6.87v.53l.52 1.33c1.06 2.64 4.24 3.7 6.62 3.17 1.32 0 1.58.27 2.38.53h.26l-1.32 4.5a2.38 2.38 0 0 0 .8 0l2.9-7.94-.53-.26c-1.32-.53-2.38.26-3.7.53-3.44.53-5.56-.27-7.94-2.39z'/%3E%3C/svg%3E"), linear-gradient(to bottom, #5ccefa, #5ccefa 20%, #f6a8b7 20%, #f6a8b7 40%, #fff 40%, #fff 60%, #f6a8b7 60%, #f6a8b7 80%, #5ccefa 80%, #5ccefa);
                             background-position: right bottom, center center;
                             background-repeat: no-repeat, repeat;

diff --git a/src/modules/discover/sidebar.less b/src/modules/discover/sidebar.less
@@ -1,16 +1,17 @@
 // The discover page sidebar.
-div[class*="sidebar-"] {
-    >div>div[class*="categoryItem-"] {
-        >div[class*="itemInner-"] {
+div[class*="sidebar_"] {
+    >div>div[class*="categoryItem_"] {
+        >div[class*="itemInner_"] {
             border-radius: var(--dnome-border-small);
 
             &:hover {
                 background-color: var(--dnome-list-item-hover);
             }
         }
 
-        &[class*="selectedCategoryItem-"] {
-            >div[class*="itemInner-"] {
+        &[class*="selectedCategoryItem_"] {
+            >div[class*="itemInner_"] {
+                color: var(--text-normal);
                 background-color: var(--dnome-list-item-selected);
 
                 &:hover {

diff --git a/src/modules/discover/view.less b/src/modules/discover/view.less
@@ -1,33 +1,33 @@
 // The discover page content
-div[class*="pageWrapper-"] {
+div[class*="pageWrapper_"] {
     background-color: var(--dnome-bg) !important;
 
-    div[class*="viewWrapper-"] {
+    div[class*="viewWrapper_"] {
 
         // The header image.
-        >div[class*="searchHeader-"],
-        >div[class*="headerContainer-"] {
-            >img[class*="headerImage-"] {
+        >div[class*="searchHeader_"],
+        >div[class*="headerContainer_"] {
+            >img[class*="headerImage_"] {
                 border-radius: var(--dnome-border-big);
             }
         }
 
         // The header search bar.
-        >div[class*="searchHeader-"] {
-            >div[class*="headerContentWrapper-"] {
-                >div[class*="headerContent-"] {
-                    >div[class*="container-"] {
-                        >div[class*="search-"] {
-                            >div[class*="searchBox-"] {
+        >div[class*="searchHeader_"] {
+            >div[class*="headerContentWrapper_"] {
+                >div[class*="headerContent_"] {
+                    >div[class*="container_"] {
+                        >div[class*="search_"] {
+                            >div[class*="searchBox_"] {
                                 background-color: var(--dnome-searchbox);
                                 border-radius: var(--dnome-border-medium);
 
-                                >div>input[class*="inputDefault-"] {
+                                >div>input[class*="inputDefault_"] {
                                     color: white;
                                 }
 
-                                >div>[class*="clearIcon-"],
-                                >svg[class*="searchIcon-"] {
+                                >div>[class*="clearIcon_"],
+                                >svg[class*="searchIcon_"] {
                                     color: white;
                                 }
                             }
@@ -38,17 +38,17 @@ div[class*="pageWrapper-"] {
         }
 
         // The guild cards below the header.
-        >div>section[class*="guildListSection-"] {
-            >div[class*="guildList-"] {
-                >div[class*="loaded-"] {
-                    >div[class*="card-"] {
+        >div>section[class*="guildListSection_"] {
+            >div[class*="guildList_"] {
+                >div[class*="loaded_"] {
+                    >div[class*="card_"] {
                         border-radius: var(--dnome-border-big);
                         background-color: var(--dnome-list-item-hover);
 
-                        >div[class*="cardHeader-"] {
-                            >div[class*="actionButtons-"] {
-                                >div[class*="actionButtonsContainer-"] {
-                                    >div[class*="wrapper-"] {
+                        >div[class*="cardHeader_"] {
+                            >div[class*="actionButtons_"] {
+                                >div[class*="actionButtonsContainer_"] {
+                                    >div[class*="wrapper_"] {
                                         border: 1px solid var(--dnome-border);
                                     }
                                 }