Skip to content

dark theme for PhpMyAdmin by s-light

Screenshot of dark theme for PhpMyAdmin

Details

Authors-light

LicenseCC-BY-SA-4.0

Categorydemo.phpmyadmin.net

Created

Updated

Size11 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

a dark theme for PhpMyAdmin
based on Shadow PMA by markreddick
licensed as CC BY-SA

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
@version      20230106.08.10
@namespace    userstyles.world/user/s-light
@description  a dark theme for PhpMyAdmin 
based on Shadow PMA by markreddick
licensed as CC BY-SA
@author       s-light
@license      CC-BY-SA-4.0
==/UserStyle== */

@-moz-document domain("demo.phpmyadmin.net"), regexp("http://pma.*"), regexp("https://pma.*"), regexp(".*/phpMyAdmin/.*") {
/* ==UserStyle==
@name           Test style name
@namespace      userstyles.world
@version        1.0.0
==/UserStyle== */

/*
Shadow PMA
by markreddick
CC BY-SA - Creative Commons Attribution-ShareAlike
https://userstyles.org/styles/172636/shadow-pma 
*/
:root {
    --main: #b9b9b9;
    --main-bg: #1a1a1a;
    --input: white;
    --input-bg: #3c3c3c;
    --link: #ffffda;
    --link-hover: #f5fb89;
    --tab-bg: #3c3c3c;
    --tab: #bbb;
    --tab-hover: white;
    --tab-hover-bg: #aeaeae;
    --panel-bg: #3e3d3d;
    --panel-header: #e8e8e8;
    --panel-header-bg: #313131;
    --highlight: black;
    --highlight-bg: #999;
    --button: white;
    --button-bg: #354979;
    --button-hover-bg: #4160aa;
    --header: #e6e6e6;
    --header-bg: #555;
    --row: white;
    --row-even-bg: #313131;
    --row-odd-bg: #3c3c3c;
    --filter-control: #ff7373;
    --notice: black;
    --notice-bg: #9f9f85;
    --success: white;
    --success-bg: #3d6f3d;
    --error: #fff;
    --error-bg: #733c3c;
    --sql: black;
    --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);
}

.table th, .table td {
	text-shadow:none;
    color: var(--input);
}

.tblcomment {
	color: var(--highlight) !important;
    text-shadow: none;
}

th a, th a:link {
	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);
}

.navbar.bg-light,
.navbar-nav .nav-item {
    border-right: 1px solid var(--button-bg);
    border-left: 1px solid var(--panel-header-bg);
    border-bottom: 1px solid var(--panel-header-bg);
    background: linear-gradient(var(--panel-header-bg), var(--button-bg));
}

.navbar-nav .nav-item.active {
    background: var(--button-bg);
    border-bottom: 0;
}

.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: none;
    outline: none;
}

#pma_console {
    -webkit-filter: invert(100%) !important;
    color: var(--main-bg);
}

.action_content {
    color: var(--main-bg);
}

#full_name_layer {
    background-color: var(--panel-bg);
    color: var(--link-hover);
    border-color: var(--link-hover);
}

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

.submenu .tab {
    color: var(--panel);
    background-color: var(--panel-bg);
}

#goto_pagetop,
#lock_page_icon,
#page_settings_icon {
    background: none;
}

.ui-widget-header {
    border: none;
    color: var(--panel-header);
    background: none;
    background-color: var(--panel-header-bg);
}

.ui-widget-content {
    background-color: var(--panel-bg);
    color: var(--main);
}

ul.tabs a {
    color: var(--tab) !important;
    background: n...

Reviews

No reviews yet.