Light Theme #846

magiruuvelvet · 2026-01-31T11:41:11Z

magiruuvelvet
Jan 31, 2026

For anyone that needs or depends (accessibility) on a light theme right now I put together a surgical CSS to create a somewhat acceptable light theme to make Grayjay at least usable.

You need to append this custom style tag to the wwwroot/web/index.html file right before the end of the </body> tag. Note that these changes will be lost on Grayjay updates and need to be redone.

For Linux Flatpak installations the full location is: /var/lib/flatpak/app/app.grayjay.Grayjay/current/active/files/grayjay/wwwroot/web/index.html

    <style>
body {
  filter: invert(1);
}

img, video {
  filter: invert(1);
}

/* for some reason fullscreen videos are still inverted */
div[class^="_containerFullscreen"] video {
  filter: unset !important;
}

div.root-content {
  background-color: #030303;
}
div.root-content div[class^="_sidebar_"] {
  background-color: #101010;
}

/* invert internal images and icons */
img[class^="_icon_"][src^="data:"],
img[class^="_editIcon_"][src^="data:"],
img[src^="data:"] {
  filter: brightness(1);
}

/* unset filters on Grayjay logo */
div[class^="_grayjay_"] img[src^="data:"] {
  filter: invert(1);
}

/* unset filters on external background images */
div[class^="_image_"][style^='background-image: url("http'] {
  filter: invert(1);
}
    </style>

The final result should look similar to this:

  <body>

    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <style>
        <!-- the style here -->
    </style>

  </body>

Thank you for this great software. I hope you consider implementing a proper light theme in the future. Light themes are a real accessibility concern for some people, not just a preference.

Navigation Menu

Uh oh!

Light Theme #846

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Light Theme #846

Uh oh!

magiruuvelvet Jan 31, 2026

Replies: 0 comments

magiruuvelvet
Jan 31, 2026