geopjr/dnome

Adwaita-inspired Discord Theme

Website	About	Work	Blog	Donate	Contact	Sponsor

dnome's Issues

Scrollbar in search box blocks view

Hi, I've been having problems with long queries in the search bar at the top right of the screen, because the scroll bar shows up as a huge blocky windows-like scroll bar.

hopefully this theme is still being maintained, because I love this theme.

New update issues

I will list some issues I got:
Scroll bar moving weirdly in some cases (only happens in server with a lot of channels)
Forum and threads thing isn't aligned

New messages bar being hidden behind the top some cases (rare)

New Adwaita theme

with gnome 42 around the corner, a new Adwaita theme will be introduced with LibAdwaita for any GTK 4 applications
you can see the new changes by running either GnomeOS nightly or Fedora 36 beta
otherwise there is this LibAdwaita theme for GTK 3 applications: lassekongo83/adw-gtk3

Voice Chat User Context Menu Volume contrast is bad

When in a voice channel the volume slider on a user has awful contrast.

A screenshot of an example below.
https://prnt.sc/ya7b93

Using custom GTK colors doesnt seem to change the theme

Im using Andromeda-gtk and when building the theme with node gtk/grab_theme_colors.mjs it generates the gtk.less file, but when doing lessc ./src/DNOME.less ./dist/DNOME.css it doesnt seem to actually use anything from the file when making the dist/DNOME.css

Borders in Darkmode

Hi, just in case you are still maintaining:

On dark mode, the icons in the leftmost bar show a square border when selected:

Is this default behaviour?

[BUG] Settings and mute buttons is invisible

In new discord version my settings and mute buttons is invisible

With theme:

Without

follow the GNOME HIG more closely

i think the theme would look a lot better if it followed the GNOME Human Interface Guidelines more closely

i understand if this is out of scope for the theme of course, but making it look more like a native GNOME app seems like a big improvement to me

GIF favourite hover star background

When hovering over a gif there is a star that becomes visible in the top right corner.
One of the wildcard selectors is causing a background to be added when the gif has already been favourited.

Themed:

/* All the classes on this star element */
.gifFavoriteButton-2SKrBk.size-3rN-gI.gifFavoriteButton-3Zycl7.selected-1mBDsA {

}

/* Selector from discord themselves */
.gifFavoriteButton-3Zycl7.selected-1mBDsA {
    color: #faa61a;
}

Possible solution:
Make the background transparent for this element.
==== or ====
Add corners to the background of this star but that would make this theme drift away from the native styling of Discord.

Have your builds push to GitHub Pages

You could have your builds push to GitHub Pages so you don't have to use GitHack. Here's an example of how that workflow would look (I'm not able to PR it because I don't have access to create actions on your repos):

name: Compile & Push

on:
  push:
    branches:
      - main
      - master
      - dev

jobs:
  compile:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18.x'
      - name: Install Less
        run: npm install -g less
      - name: Install the csso
        run: npm install -g csso-cli
      - name: Compile Less
        run: lessc ./src/DNOME.less ./dist/DNOME.css
      - name: Optimize CSS
        run: |
          csso ./dist/DNOME.css -o ./dist/DNOME.css --comments none --stat
          
          # csso downcases some pseudo content
          # escaped characters
          sed -i 's/\\a/\\A/g' ./dist/DNOME.css
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist
          keep_files: false
          full_commit_message: Publish compiled CSS

You would then enable GitHub pages on the gh-pages branch.

recent discord update broke the theme

only the colours work, and only sometimes. all of the layout changes are broken because discord re-rolled their css classes (to my understanding)

Streaming to voice popup is poorly themed

The switch between Applications and Screens still uses the old colours as well as the entire popup is the default dark discord.

Example Image:
https://i.imgur.com/3ZnV2iW.png

libadwaita version

Hi, I don't really use Discord anymore but had some free time today so I started working on the libadwaita version.

I tried to make it look closer to Fractal which included not-just-recoloring (aka changed some paddings, heights, borders, margins, border-radius etc.)

(Additionally I removed more Nitro dark patterns (gift button next to text input, sparkles, shiny animation on buttons))

TODO:

• consistency between colors, padding, border-radius
• settings pages (switches, drop-downs, checkboxes)
• other components I didn't have the chance to test (new bot uis, voice chat, video chat, group chat...)
• clean DNOME - most css is no longer needed and it not really that easy to maintain

You can use it from the dev branch - I updated all the links to point to that.

I'm not really sure if I can continue maintaining DNOME after this. I don't use Discord much and the way theming works is too annoying to maintain - for those unaware, you have to use css wildcard selectors to target the elements you need while also being specific enough so it doesn't target others sharing the same class:

div[class*="chat-"] {
    main>form {
    }
    div[class*="callContainer-"] {
    }
    >div[class*="content-"] {
        div[class*="divider-"] {
            &[class*="isUnread-"] {
            }
        }
        >div[class*="container-"] {
            >aside[class*="membersWrap-"] {
                div[class*="member-"] {
                    >div[class*="layout-"] {

You have to use wildcard selectors because classes get a random suffix when they build their frontend (e.g. layout-2yBXZl).

Nested CSS makes maintaining it slightly easier but that's about it.

Screenshots

Gradience Compatibility?

Currently you cant (or can but with effort) theme the blue color if I'm seeing things right, a cool way to implement this would be through Gradience.

Background styling issues in forums and media channels

Hi,
If this project is still being maintained I found some issues with the backgrounds of the forums and media channels. Please view my screenshots below.