Skip to content

PHPMyAdmin Dark Mode Ultimate by cosmicstar98

Screenshot of PHPMyAdmin Dark Mode Ultimate
Write a review Install Get Stylus

Details

Authorcosmicstar98

LicenseNo License

Categorydemo.phpmyadmin.net

Created

Updated

Size17 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

a tweaked version of a phpmyadmin dark mode theme. fixed some bugs with the older userstyle (made more things dark)

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           dark theme for PhpMyAdmin
@namespace      github.com/s-light/
@version        1.0.0
@description    a dark theme for PhpMyAdmin based on [**Shadow PMA** by markreddick](https://userstyles.org/styles/172636/shadow-pma)
@author         s-light.eu
==/UserStyle== */
@-moz-document domain("demo.phpmyadmin.net"),
regexp("http://pma.*"),
regexp("https://pma.*"),
regexp(".*/phpmyadmin/.*") {
    /*
    dark theme for PhpMyAdmin
    based on https://userstyles.org/styles/172636/shadow-pma
    license CC BY-SA*/
    :root {
        --main: #b9b9b9;
        --main-bg: #1a1a1a;
        --input: white;
        --input-bg: #3c3c3c;
        --link: hsl(60, 100%, 93%);
        --link_dark: hsl(60, 100%, 30%);
        --link-hover: #f5fb89;
        --tab-bg: #3c3c3c;
        --tab: #bbb;
        --tab-hover: white;
        --tab-hover-bg: #aeaeae;
        --panel-bg: hsl(255, 15%, 14%);
        --panel-header: hsl(0, 0%, 90%);
        --panel-header-bg: #313131;
        --highlight: black;
        --highlight-bg: #999;
        --button: white;
        --button-bg: #354979;
        --button-hover-bg: #4160aa;
        --header: #e6e6e6;
        --header-bg: #555;
        --row: hsl(190, 100%, 90%);
        --row-even-bg: hsl(40, 15%, 15%);
        --row-odd-bg: hsl(40, 15%, 22%);
        --filter-control: #ff7373;
        --notice: hsl(60, 50%, 40%);
        --notice-bg: hsl(60, 50%, 10%);
        --success: white;
        --success-bg: hsl(90, 100%, 15%);
        --error: #fff;
        --error-bg: #733c3c;
        --sql: hsl(255, 100%, 10%);
        --sql-keyword: #873e00;
        --sql-var2: #4a0569;
        --sql-num: #0b7d00;
        --disabled: #c12d2d;
        --disabled-bg: #9f2e2e00;
    }

    body {
        background-color: var(--main-bg);
        color: var(--main);
    }

    a,
    a:active,
    a:link,
    a:visited {
        color: var(--link);
    }

    a:hover {
        color: var(--link-hover);
    }

    h1,
    h2,
    h3,
    h4 p a {
        text-shadow: none;
    }

    div {
        box-shadow: none !important;
    }

    div.success,
    div.notice,
    div.error {
        border: none !important;
    }

    button.mult_submit,
    button.mult_submit:hover {
        color: var(--link);
    }

    .checkall_box + label,
    .checkall_box + label:hover {
        color: var(--link);
    }

    fieldset,
    fieldset fieldset {
        background-color: var(--panel-bg);
        color: var(--panel);
    }

    .group {
        background-color: var(--panel-bg);
        color: var(--main);
        border: none;
        border-radius: 6px;
        overflow: hidden;
    }

    .group h2 {
        background-color: var(--panel-header-bg);
        color: var(--panel-header);
        text-shadow: none;
        box-shadow: none;
    }

    table {
        border-top: none !important;
    }

    table caption,
    table th,
    table td {
        text-shadow: none;
    }

    table tbody:first-of-type tr:nth-child(odd) {
        background-color: var(--row-odd-bg);
    }

    table tbody:first-of-type tr:nth-child(odd) th {
        background-color: var(--row-odd-bg);
    }

    table tbody:first-of-type tr:nth-child(even) {
        background-color: var(--row-even-bg);
    }

    table tbody:first-of-type tr:nth-child(even) th {
        background-color: var(--row-even-bg);
    }

    thead th {
        border-right: 1px solid var(--main-bg);
    }

    th {
        background-image: none;
        background-color: var(--header-bg);
        color: var(--header);
    }

    tr th {
        color: var(--header);
    }

    th a,
    th a:link {
        color: var(--link);
    }

    tr.disabled td {
        background-color: var(--disabled-bg) !important;
        color: var(--disabled) !important;
    }

    .disabled {
        color: var(--disabled) !important;
        background-color: var(--disabled-bg) !important;
    }

    .disabled a:link,
    .disabled a:active,
    .disabled a:visited {
        color: var(--main) !important;
        background-color: var(--disabled-bg) !important;
    }

    .disabled:hover a,
    .disabled a:hover {
        color: var(--main-bg) !important;
        background-color: var(--disabled-bg) !important;
    }

    tr.marked:not(.nomarker) td {
        background: var(--highlight-bg) !important;
        color: var(--highlight) !important;
    }

    tr:hover:not(.marked),
    tr:not(.marked) td.hover,
    rd:not(.marked) th:hover,
    tr:hover:not(.marked) a:link,
    td:not(.marked).hover a:link,
    tr:hover:not(.marked) th,
    li.nowrap:hover {
        background: none !important;
        background-image: none !important;
        background-color: var(--highlight-bg) !important;
        color: var(--highlight);
    }

    input,
    select,
    textarea {
        background: var(--input-bg) !important;
        color: var(--input) !important;
        text-shadow: none !important;
    }

    #sectionlinks {
        background-color: var(--panel-bg);
        color: var(--panel);
        border: none;
    }

    input[type="button"],
    input[type="submit"],
    input[type=reset],
    button,
    #sectionlinks a {
        background: none !important;
        background-color: var(--button-bg) !important;
        border-radius: 2px !important;
        box-shadow: none !important;
        color: var(--button) !important;
        border: none !important;
    }

    input[type="button"]:hover,
    input[type="submit"]:hover,
    input[type=reset]:hover,
    #sectionlinks a:hover {
        background-color: var(--button-hover-bg) !important;
    }

    #sectionlinks a:hover {
        color: var(--button-bg) !important;
        background-color: var(--button) !important;
    }

    li.fast_filter span {
        color: var(--filter-control);
    }

    .notice,
    .ajax_notification {
        border: none !important;
        box-shadow: none !important;
        background-color: var(--notice-bg) !important;
        color: var(--notice) !important;
    }

    .notice a {
        color: black;
    }

    .tblcomment {
        color: var(--highlight-bg);
    }

    .tblHeaders {
        background: var(--panel-header-bg) !important;
        color: var(--panel-header) !important;
    }

    th.header,
    .var-header {
        background: var(--header-bg) !important;
        color: var(--header) !important;
    }

    .tblFooters {
        background: var(--panel-header-bg);
        color: var(--panel-header);
    }

    fieldset {
        border: none !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
    }

    .result_query div.sqlOuter {
        -webkit-filter: invert(100%) !important;
    }

    .result_query div.sqlOuter input[type="button"],
    .result_query div.sqlOuter input[type="submit"] {
        -webkit-filter: invert(100%) !important;
    }

    .result_query div.sqlOuter,
    #sqlquerycontainer .CodeMirror,
    #sqlquerycontainerfull .CodeMirror {
        -webkit-filter: invert(100%) !important;
    }

    .navigation input[type=submit] {
        background: none !important;
    }

    .navigation tr:hover input[type=submit] {
        color: var(--highlight) !important;
    }

    .navigation tr:hover input[type=submit]:hover {
        background-color: var(--highlight) !important;
        color: var(--highlight-bg) !important;
    }


    .cm-s-default {
        color: var(--sql);
        font-size: 1.1rem;
    }

    .cm-keyword {
        color: var(--sql-keyword) !important;
    }

    .cm-variable-2 {
        color: var(--sql-var2) !important;
    }

    .cm-number {
        color: var(--sql-num) !important;
    }

    #pma_navigation {
        color: var(--main);
        background: var(--main-bg);
    }

    #pma_navigation_header {
        background-color: var(--input-bg);
    }

    #pma_navigation_tree {
        color: var(--main);
    }

    #pma_navigation_tree a {
        color: var(--link);
    }

    #pma_navigation_tree li.activePointer {
        background-color: var(--highlight-bg);
    }

    #pma_navigation_tree li.activePointer a {
        color: var(--highlight) !important;
    }

    #pma_navigation_tree li.activePointer.selected a:hover {
        color: var(--link) !important;
    }

    #pma_navigation_tree li.selected {
        background-color: var(--panel-bg);
    }

    #pma_navigation_tree li.selected a {
        color: var(--link);
    }

    .pma_quick_warp .drop_button {
        border: none;
        background: none;
    }

    .menucontainer {
        background-image: none;
        background-color: var(--tab-bg);
        color: var(--tab);
    }

    #topmenu a,
    #topmenu a:link {
        color: var(--link);
        text-shadow: none;
    }

    #topmenu a.tabactive,
    #topmenu a:link.tabactive {
        background-color: var(--main-bg) !important;
        color: var(--main) !important;
    }

    #topmenu a:hover,
    #topmenu a:link:hover {
        background-color: var(--highlight-bg);
        color: var(--highlight);
    }

    ul#topmenu li,
    ul#topmenu li.active {
        border-color: var(--main-bg);
    }

    ul#topmenu2 a {
        color: var(--highlight) !important;
        background-color: var(--highlight-bg);
        border-color: var(--highlight) !important;
    }

    ul#topmenu2 a .tabactive {
        background-color: var(--main-bg) !important;
        color: var(--main) !important;
    }

    #serverinfo {
        background: var(--main-bg);
        text-shadow: none;
    }

    #serverinfo .item {
        color: var(--main);
    }

    div.tools {
        background-color: var(--panel-bg);
        color: var(--main);
    }

    div.tools a,
    div.tools a:link {
        color: var(--link) !important;
    }

    .success {
        background-color: var(--success-bg);
        color: var(--success);
    }

    .error {
        background-color: var(--error-bg);
        color: var(--error);
    }

    a img {
        border: no...

Reviews

No reviews yet.