Dark theme tweak

[donniewr]

I like the new default dark theme support, but I think the dark theme's color palette could be improved and use darker colors.

Here’s a example:

[vrana]

Every user has own preferences. That's why Adminer allows custom styles.

[unix4you2]

I think that the best way to have a quick dark-mode is using just one line of CSS over the default theme!:

html {
  filter: invert(1);
}

This is more consistent that a full dark-theme because the deafult theme cover all the elements to be showed ok on screen, so with that filter all the things will be showed fine but darker.

And in some cases, if you have images, videos or something that you need to skip this filter just add something like this:

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

Steps to reproduce ON ANY WEBSITE (or our loved ❤️ Adminer):

• Go to any light-theme site. Ie: https://www.adminer.org/
• Open your console (F12)
• Just paste this code and press Enter and all the web will be darker-mode:

const style = document.createElement("style");
style.innerHTML = `
  html, img, video, iframe {
    filter: invert(1);
  }
`;
document.head.appendChild(style);

Then you will see something like this:

[MartinZubek]

My biggest gripe with the current dark theme implementation is the presence of jarringly bright input fields. I'd suggest to add:

color-scheme: dark;

when dark-mode is enabled.

[vrana]

This is what I was looking for, thanks! I thought that the OS should do this automatically and my test environment is only being stupid.

587f6a5

[meesha81]

Hi, how to force light theme? There is no theme switch. Thanky you.

[vrana]

Adminer respects the OS settings for dark mode. If you want to force the light mode then you can create an empty file adminer.css next to adminer.php. You can also create an empty file adminer-dark.css to force dark mode.