follow the GNOME HIG more closely

[itsvic-dev]

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

[GeopJr]

I don't use Discord anymore (apart from maintaining this) and can't keep up with their constant changes and new features. At the same time there's only so much CSS alone can do, many parts of their frontend start breaking when you stop following their patterns (see the sidebar items setting, originally DNOME had taller sidebar items but their lazy loading code would miscalculate the available space and the scrollbar would constantly move vertically so it had to be removed).

Basically the theme is maintenance-only from my side. Feel free to make PRs or fork it 🤷

[bbb651]

Would you accept a PR pre-generating the theme for the different Gnome 47 accent colors and hosting it in dist, and linking to them on the README/website?

I really like the theme and recommend it to people who don't use linux, and although it says it's not required the layout of the website makes it seem like it is. It also prevents you from using it through online themes (which can auto-update, and not interfere with other QuickCSS you have).
Ideally this would make use of AccentColor but chromium has it under an experimental flag or SystemPrefrences.getAccentColor on the Vencord side to polyfill it but there's no linux support yet.

[GeopJr]

Sure! I'd rather you created <named_color>.less in https://github.com/GeopJr/DNOME/tree/main/src/modules/variables for each color if you don't mind and I'll take care of the rest (CI, less config, website)

edit: probably both -light and -dark variants

[bbb651]

I referenced libadwaita!824 and made one .less per color based on this:

:root {
  --accent-blue: #3584e4;
  --accent-teal: #2190a4;
  --accent-green: #3a944a;
  --accent-yellow: #c88800;
  --accent-orange: #ed5b00;
  --accent-red: #e62d42;
  --accent-pink: #d56199;
  --accent-purple: #9141ac;
  --accent-slate: #6f8396;
  
  --accent-bg-color: @accent_bg_color;
  --accent-fg-color: @accent_fg_color;

Looking through more of the MR, I think --accent-color and --accent-bg-color are always the same and --accent-fg-color is always white. The only thing that changes is adw_accent_color_to_standalone_rgba, which I think may apply to something like

The computation is a bit complex but since there's a limited amount of colors we can just copy them from the test (the boolean argument is dark), do you know where they would fit in DNOME?
P.S. I recommend this userscript to preview colors in github codeblocks

static void
test_adw_accent_color_to_rgba (void)
{
  GdkRGBA rgba;
  int hex;

  TEST_ACCENT_TO_RGBA (ADW_ACCENT_COLOR_BLUE,   0x3584e4);
  TEST_ACCENT_TO_RGBA (ADW_ACCENT_COLOR_TEAL,   0x2190a4);
  TEST_ACCENT_TO_RGBA (ADW_ACCENT_COLOR_GREEN,  0x3a944a);
  TEST_ACCENT_TO_RGBA (ADW_ACCENT_COLOR_YELLOW, 0xc88800);
  TEST_ACCENT_TO_RGBA (ADW_ACCENT_COLOR_ORANGE, 0xed5b00);
  TEST_ACCENT_TO_RGBA (ADW_ACCENT_COLOR_RED,    0xe62d42);
  TEST_ACCENT_TO_RGBA (ADW_ACCENT_COLOR_PINK,   0xd56199);
  TEST_ACCENT_TO_RGBA (ADW_ACCENT_COLOR_PURPLE, 0x9141ac);
  TEST_ACCENT_TO_RGBA (ADW_ACCENT_COLOR_SLATE,  0x6f8396);
}

static void
test_adw_accent_color_to_standalone_rgba (void)
{
  GdkRGBA rgba;
  int hex;

  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_BLUE,   FALSE, 0x0461be);
  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_TEAL,   FALSE, 0x007184);
  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_GREEN,  FALSE, 0x15772e);
  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_YELLOW, FALSE, 0x905300);
  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_ORANGE, FALSE, 0xb62200);
  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_RED,    FALSE, 0xc00023);
  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_PINK,   FALSE, 0xa2326c);
  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_PURPLE, FALSE, 0x8939a4);
  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_SLATE,  FALSE, 0x526678);

  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_BLUE,   TRUE, 0x81d0ff);
  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_TEAL,   TRUE, 0x7bdff4);
  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_GREEN,  TRUE, 0x8de698);
  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_YELLOW, TRUE, 0xffc057);
  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_ORANGE, TRUE, 0xff9c5b);
  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_RED,    TRUE, 0xff888c);
  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_PINK,   TRUE, 0xffa0d8);
  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_PURPLE, TRUE, 0xfba7ff);
  TEST_ACCENT_TO_STANDALONE_RGBA (ADW_ACCENT_COLOR_SLATE,  TRUE, 0xbbd1e5);
}

[GeopJr]

You did too much work 😅 The colors are being set as css variables so we can get them from the docs (or by opening the gtk inspector on any libadwaita 1.6 app) https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/css-variables.html