Giter VIP home page Giter VIP logo

dnome's Introduction

a circle logo with an emblem of a speech bubble and a background of a gradient of blue and green

DNOME

Adwaita-inspired Discord Theme


COC BSD-2-Clause

Info

This is a Discord theme inspired by GNOME's default theme, Adwaita, in an attempt to make Discord look like it's part of the environment.

The theme is written in Less and supports both light and dark mode. There's a few config options in ./src/DNOME.less. If you are looking to recolor it, you can do so by modifying the Less/CSS variables found in ./src/modules/variables/.

The theme might be missing styles on elements that I don't have access to (Nitro) or are new (app directory) or changed class names. Please open an issue if you find any.

Screenshots

Note: might be outdated or not match the current version of Discord.

Show All

screenshot of the friends page
screenshot of a text channel with a new messages banner
screenshot of guild settings, safety setup showing radio buttons
screenshot of a text channel with a thread open
screenshot of the global search or spotlight
screenshot of inbox popup screenshot of search popup screenshot of context menu on a message screenshot of guild settings popup screenshot of search results screenshot of create a server modal screenshot of user profile popup screenshot of gif picker screenshot of inbox unread mentions popup screenshot of replying to message bar accessory

Note: these are just some of the compoenents - not everything.

Installing

You can inject it using Crycord, BeauitfulDiscord, BetterDiscord, Powercord & any other CSS injector available.

There are 3 options for obtaining the theme:

  1. DNOME-latest.css, which imports the latest compiled version.
  2. dist/DNOME.css, which is the latest compiled version.
  3. Compile it yourself.

Some client mods require special metadata. The theme is in its simplest form.

However, if you feel something needs extra instructions, open an issue and I'll list it below.

Keep in mind that many plugins and elements from them might not be styled.

For BetterDiscord

BetterDiscord requires a non-CSS META tag and a specific suffix on the filename. There are 2 options for installing the theme:

  1. Download ./DNOME.theme.css and place it in your themes/ folder.
  2. Copy paste the contents of the desired file in the Custom CSS section in settings.

Compiling

Web

You can compile DNOME from your browser!

Visit https://dnome.geopjr.dev/ and follow the instructions.

Manually

  • Install Less
  • Run one of the following commands:
$ make less
or
$ lessc ./src/DNOME.less ./dist/DNOME.css
  • Done, the theme should be available at ./dist/DNOME.css

GTK Themes

You can use colors from your current GTK theme by running:

$ make gtk
or
$ node gtk/grab_theme_colors.mjs

and then compiling DNOME again.

Warning Manually set your Discord theme in settings to the one matching your GTK theme (Dark/Light). DNOME doesn't override everything on Discord but rather enhance it.

Sponsors

GeopJr Sponsors

Contributing

  1. Read the Code of Conduct
  2. Read the Discord Theming Guide
  3. Fork it ( https://github.com/GeopJr/DNOME/fork )
  4. Create your feature branch (git checkout -b my-new-feature)
  5. Commit your changes (git commit -am 'feat: some feature')
  6. Push to the branch (git push origin my-new-feature)
  7. Create a new Pull Request

dnome's People

Contributors

geopjr avatar github-actions[bot] avatar theotheroracle avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

dnome's Issues

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

Screenshot of discord client with the DNOME theme applied - not really useful as alt text
Screenshot of discord client with the DNOME theme applied - not really useful as alt text

Screenshot of discord client with the DNOME theme applied - not really useful as alt text
Screenshot of discord client with the DNOME theme applied - not really useful as alt text

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

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.

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.

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:
grafik

Is this default behaviour?

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:
image

/* 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.

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)

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.
image

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
image
New messages bar being hidden behind the top some cases (rare)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.