a tweaked version of a phpmyadmin dark mode theme. fixed some bugs with the older userstyle (made more things dark)
PHPMyAdmin Dark Mode Ultimate by cosmicstar98
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
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...