geopjr / dnome Goto Github PK
View Code? Open in Web Editor NEWAdwaita-inspired Discord Theme
Home Page: https://dnome.geopjr.dev/
License: BSD 2-Clause "Simplified" License
Adwaita-inspired Discord Theme
Home Page: https://dnome.geopjr.dev/
License: BSD 2-Clause "Simplified" License
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
When in a voice channel the volume slider on a user has awful contrast.
A screenshot of an example below.
https://prnt.sc/ya7b93
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
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
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.
/* 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.
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.
only the colours work, and only sometimes. all of the layout changes are broken because discord re-rolled their css classes (to my understanding)
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
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:
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.