raspap-webgui-mirror/app/css/dark.css
2024-10-27 00:05:45 -07:00

83 lines
2.1 KiB
CSS

/*
Theme Name: Lights Out
Author: @billz
Author URI: https://github.com/billz
Description: A Bootstrap dark mode theme for RaspAP
License: GNU General Public License v3.0
*/
@import url('custom.php');
html[data-bs-theme="dark"] {
background-color: var(--bs-dark);
color: var(--bs-light);
}
html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] footer,
html[data-bs-theme="dark"] .sb-sidenav,
html[data-bs-theme="dark"] .sb-topnav,
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .card-footer {
background-color: var(--bs-dark);
}
html[data-bs-theme="dark"] .card-body,
html[data-bs-theme="dark"] .card-footer,
html[data-bs-theme="dark"] .info-item-xs,
html[data-bs-theme="dark"] .table>:not(caption)>*>* {
color: var(--bs-secondary);
}
html[data-bs-theme="dark"] .sb-topnav.navbar {
background-color: var(--bs-dark) !important;
color: var(--bs-light);
}
html[data-bs-theme="dark"] .sb-topnav.navbar,
html[data-bs-theme="dark"] .sb-topnav.navbar a {
color: var(--raspap-theme-color) !important;
}
html[data-bs-theme="dark"] .sb-topnav.navbar a:hover,
html[data-bs-theme="dark"] .sb-topnav.navbar a:focus {
color: var(--raspap-theme-darker) !important;
}
html[data-bs-theme="dark"] .sb-topnav.navbar {
--bs-navbar-bg: var(--bs-dark);
}
html[data-bs-theme="dark"] .sb-topnav.navbar.navbar-light {
color: var(--bs-light);
}
html[data-bs-theme="dark"] .card {
border-color: var(--bs-secondary);
color: var(--bs-light);
}
html[data-bs-theme="dark"] .card-footer {
border-color: var(--bs-secondary);
}
html[data-bs-theme="dark"] .nav-tabs {
--bs-nav-tabs-link-active-color: var(--bs-light);
--bs-nav-tabs-link-active-bg: var(--bs-dark);
--bs-nav-tabs-link-active-border-color: var(--bs-secondary) var(--bs-secondary) var(--bs-dark);
--bs-nav-tabs-border-color: var(--bs-secondary);
--bs-nav-tabs-link-hover-border-color: var(--bs-secondary);
}
html[data-bs-theme="dark"] .btn {
color: var(--bs-gray-800);
opacity: 75%;
}
html[data-bs-theme="dark"] select,
html[data-bs-theme="dark"] .form-control {
background-color: var(--bs-dark);
border-color: var(--bs-secondary);
color: var(--bs-light);
}