Dark theme inspired by PhpStorm's dark background

[MichaelGrznar]

Český přepis:
Ahoj, chtěl jsem se podělit o svůj vlastní tmavý vzhled Admineru, protože jsem na oficiálních stránkách nenašel žádný, který by mi vyhovoval nebo se mi líbil. Tento CSS soubor nemění rozvržení, ponechává ho ve vanilla vzhledu. Má to ještě mouchy, například inputy či textarea, ale už teď se mi to líbí a večer vám to ušetří oči :) Kdyby byl zájem, mohu to dotáhnout do dokonalosti.

Soubor adminer-dark.css stačí dát vedle vašeho souboru adminer.php.
adminer-dark-css on GitHub

English translation:
Hi, I wanted to share my own dark theme for Adminer because I couldn't find any on the official website that would suit me or that I liked. This CSS file doesn't change the layout; it keeps the vanilla look. There are still some rough edges, like inputs and textareas, but I already like it and it will save your eyes at night :) If there's interest, I can polish it to perfection.

Simply place the adminer-dark.css file next to your adminer.php file.
adminer-dark-css on GitHub

[vrana]

Díky, určitě prosím o dotažení k dokonalosti. Pokud se soubor bude jmenovat adminer-dark.css, tak se některé věci přebarví samy (např. formulářová políčka).

Ideální způsob zveřejnění je na vlastním GitHubu nebo aspoň v Gistu.

[MichaelGrznar]

Ahoj, děkuji Ti za zprávu. Dotáhl jsem to a zveřejnil jsem to zde: https://github.com/MichaelGrznar/adminer-dark-css
Veškeré kredity za Adminer jsou jak na GitHubu, tak v readme tak v samotném css připočteny Tobě. :)
Pokud budou jakékoli připomínky, sem s nimi :)

[vrana]

Díky, odkázal jsem z https://www.adminer.org/en/#extras.

[MichaelGrznar]

Děkuji, moc si toho vážím. Už mám i zpětnou vazbu, ještě to trochu vylepším, ale stále budu cílit na to, aby to zůstalo co nejvíce vanilla a opravdu si hrál jen s barvičkama.

[ifrond]

about the same theme, but darker and with css vars

:root {
  /* Base Colors */
  --bg-base: #0d0e10;
  --text-base: #f0f0f0;
  --accent-base: #c9a769;

  /* Background Variants */
  --bg-dark: var(--bg-base);
  --bg-darker: color-mix(in srgb, var(--bg-base) 90%, black);
  --bg-darkest: color-mix(in srgb, var(--bg-base) 80%, black);

  /* Text Variants */
  --text-light: color-mix(in srgb, var(--text-base) 80%, black);
  --text-lighter: color-mix(in srgb, var(--text-base) 90%, black);
  --text-lightest: var(--text-base);

  /* Border Colors */
  --border-dark: color-mix(in srgb, var(--bg-base) 70%, white);
  --border-darker: color-mix(in srgb, var(--bg-base) 50%, white);

  /* Accent Colors */
  --accent-gold: var(--accent-base);
  --accent-blue: color-mix(in srgb, dodgerblue 90%, black);
  --accent-blue-hover: color-mix(in srgb, var(--accent-blue) 80%, black);

  /* Table Colors */
  --table-row-odd: var(--bg-dark);
  --table-row-even: color-mix(in srgb, var(--bg-dark) 93%, white);
  --table-row-hover: color-mix(in srgb, var(--bg-dark) 70%, white);
  --table-header: var(--bg-darker);
}



/* Basic page settings */
html,
body {
    background-color: var(--bg-dark);
    color: var(--text-light);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body {
    background-color: var(--bg-dark) !important;
}

/* Headings */
h1 {
    background: transparent;
    border-bottom: 1px solid var(--border-dark);
    color: var(--text-light);
    font-size: 150%;
    font-weight: normal;
    margin: 0;
    padding: 0.8em 0.667em;
}

h2 {
    background: var(--bg-darker);
    font-size: 150%;
    font-weight: normal;
    margin: 0 0 20px -18px;
    padding: 0.8em 1em;
    color: var(--text-lighter);
}

h3 {
    color: var(--accent-gold);
    font-size: 130%;
    font-weight: normal;
    margin: 1em 0 0;
}

/* ==========================================================================
   LINKS AND NAVIGATION
   ========================================================================== */

/* Basic link styling */
a {
    color: var(--text-light);
}

a:visited {
    color: var(--text-light);
}

/* Active elements */
.active {
    color: var(--accent-gold) !important;
    font-weight: bold;
}

/* Navigation elements */
#logins a,
#tables a,
#tables span {
    background: transparent;
}

/* JUSH syntax highlighting links */
.jush a {
    color: #2a5d9f;
}

/* ==========================================================================
   BUTTONS AND FORM ELEMENTS
   ========================================================================== */

/* Button styling */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    background-color: var(--accent-blue) !important;
    color: var(--text-lightest) !important;
    border: none !important;
    padding: 3px 16px;
    cursor: pointer;
    border-radius: 4px;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
    background-color: var(--accent-blue-hover) !important;
}

/* ==========================================================================
   LAYOUT COMPONENTS
   ========================================================================== */

/* Main menu */
#menu {
    background-color: var(--bg-darker);
}

/* Breadcrumb navigation */
#breadcrumb {
    background: var(--bg-darker);
    height: 2em;
    left: 21em;
    line-height: 1.8em;
    margin: 0 0 0 -18px;
    padding: 0 1em;
    position: absolute;
    top: 0;
    white-space: nowrap;
}

/* Logout button */
.logout {
    background-color: transparent;
    box-shadow: 0 0 5px 5px transparent;
    margin-top: 0.5em;
    position: absolute;
    right: 0;
    top: 0;
}

/* ==========================================================================
   TABLES AND DATA DISPLAY
   ========================================================================== */

/* Basic table styling */
table,
td,
th,
.js .column {
    border-color: var(--border-darker);
    border-style: solid;
    background: transparent;
}

/* Table headers */
thead td,
thead th {
    background: var(--table-header);
}

/* Row alternating background - odd rows (darker) */
tbody tr:nth-child(odd),
table tr:nth-child(odd) {
    background-color: var(--table-row-odd) !important;
}

/* Row alternating background - even rows (lighter) */
.odds tbody tr:nth-child(2n),
tbody tr:nth-child(even),
table tr:nth-child(even) {
    background-color: var(--table-row-even) !important;
}

/* Hover effect for table rows */
table tr:hover {
    background-color: var(--table-row-hover) !important;
}

/* Basic styling for rows */
tr {
    border-color: inherit;
    display: table-row;
    unicode-bidi: isolate;
    vertical-align: inherit;
}

/* ==========================================================================
   CODE BLOCKS AND SYNTAX
   ========================================================================== */

code {
    background: transparent;
    font-size: 110%;
    padding: 1px 2px;
    color: var(--text-lighter);
}

/* ==========================================================================
   PAGE FOOTER
   ========================================================================== */

.footer {
    bottom: 0;
    box-shadow: 0 -5px 10px 10px var(--bg-darker);
    margin: 23px -20px 0.5em 0;
    position: sticky;
}

.footer > div {
    background: var(--bg-darker);
    padding: 0 0 0.5em;
}