/* =======================================
======================================= */
/* Dark Mode Toggle Button */
.litespeed-dark-mode-toggle {
/* =======================================
Auto-applied based on browser preference
OR manually toggled with .litespeed-darkmode class
======================================= */
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) {
background-color: #1e1e1e;
body.litespeed-darkmode {
background-color: #1e1e1e;
/* WordPress admin wrapper */
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) #wpwrap {
background-color: #1e1e1e;
body.litespeed-darkmode #wpwrap {
background-color: #1e1e1e;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) #wpcontent {
background-color: #181818;
body.litespeed-darkmode #wpcontent {
background-color: #181818;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) input[type='text'],
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) input[type='number'],
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) input[type='email'],
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) input[type='url'],
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) input[type='password'],
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) input[type='search'],
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) input[type='file'],
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) textarea,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) select {
background-color: #2d2d30;
border: 1px solid #3e3e42;
body.litespeed-darkmode input[type='text'],
body.litespeed-darkmode input[type='number'],
body.litespeed-darkmode input[type='email'],
body.litespeed-darkmode input[type='url'],
body.litespeed-darkmode input[type='password'],
body.litespeed-darkmode input[type='search'],
body.litespeed-darkmode input[type='file'],
body.litespeed-darkmode textarea,
body.litespeed-darkmode select {
background-color: #2d2d30;
border: 1px solid #3e3e42;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) input[type='text']:focus,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) input[type='number']:focus,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) input[type='email']:focus,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) input[type='url']:focus,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) input[type='password']:focus,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) input[type='search']:focus,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) input[type='file']:focus,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) textarea:focus,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) select:focus {
background-color: #404043;
border: 1px solid #5a5a5d;
box-shadow: 0 0 0 1px #0073aa;
body.litespeed-darkmode input[type='text']:focus,
body.litespeed-darkmode input[type='number']:focus,
body.litespeed-darkmode input[type='email']:focus,
body.litespeed-darkmode input[type='url']:focus,
body.litespeed-darkmode input[type='password']:focus,
body.litespeed-darkmode input[type='search']:focus,
body.litespeed-darkmode input[type='file']:focus,
body.litespeed-darkmode textarea:focus,
body.litespeed-darkmode select:focus {
background-color: #404043;
border: 1px solid #5a5a5d;
box-shadow: 0 0 0 1px #0073aa;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .button,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .button-secondary {
background-color: #3e3e42;
body.litespeed-darkmode .button,
body.litespeed-darkmode .button-secondary {
background-color: #3e3e42;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) circle.litespeed-pie_bg {
body.litespeed-darkmode circle.litespeed-pie_bg {
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) g.litespeed-pie_info text {
body.litespeed-darkmode g.litespeed-pie_info text {
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) g.litespeed-pie_info .litespeed-pie-done {
body.litespeed-darkmode g.litespeed-pie_info .litespeed-pie-done {
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .litespeed-switch input:not(:checked) + label {
background-color: #3e3e42;
border: 1px solid #5a5a5d;
body.litespeed-darkmode .litespeed-switch input:not(:checked) + label {
background-color: #3e3e42;
border: 1px solid #5a5a5d;
/* Column with boxes layout */
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .litespeed-column-with-boxes .postbox {
body.litespeed-darkmode .litespeed-column-with-boxes .postbox {
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .litespeed-column-with-boxes > div.litespeed-column-right {
background-color: #2d2d30;
body.litespeed-darkmode .litespeed-column-with-boxes > div.litespeed-column-right {
background-color: #2d2d30;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .litespeed-image-optim-summary,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .litespeed-column-left-inside {
background-color: #1e1e1e;
border: 1px solid #3e3e42;
body.litespeed-darkmode .litespeed-image-optim-summary,
body.litespeed-darkmode .litespeed-column-left-inside {
background-color: #1e1e1e;
border: 1px solid #3e3e42;
@media (prefers-color-scheme: dark) {
body[class*="litespeed"]:not(.litespeed-lightmode).litespeed-cache_page_litespeed-img_optm [data-litespeed-layout='summary'],
body[class*="litespeed"]:not(.litespeed-lightmode).litespeed-cache_page_litespeed-img_optm .litespeed-column-with-boxes > div.litespeed-column-right,
body[class*="litespeed"]:not(.litespeed-lightmode).litespeed-cache_page_litespeed-cdn .litespeed-column-with-boxes > div.litespeed-column-right,
body[class*="litespeed"]:not(.litespeed-lightmode).litespeed-cache_page_litespeed-cdn [data-litespeed-layout='qc'] {
background-color: #181818;
body.litespeed-darkmode.litespeed-cache_page_litespeed-img_optm [data-litespeed-layout='summary'],
body.litespeed-darkmode.litespeed-cache_page_litespeed-img_optm .litespeed-column-with-boxes > div.litespeed-column-right,
body.litespeed-darkmode.litespeed-cache_page_litespeed-cdn .litespeed-column-with-boxes > div.litespeed-column-right,
body.litespeed-darkmode.litespeed-cache_page_litespeed-cdn [data-litespeed-layout='qc'] {
background-color: #181818;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .litespeed-image-optim-summary-footer,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .litespeed-column-with-boxes-footer {
border-top: 1px solid #373737;
body.litespeed-darkmode .litespeed-image-optim-summary-footer,
body.litespeed-darkmode .litespeed-column-with-boxes-footer {
border-top: 1px solid #373737;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .litespeed-column-with-boxes-footer {
border-top: 1px solid #3e3e42;
background-color: #353539;
body.litespeed-darkmode .litespeed-column-with-boxes-footer{
border-top: 1px solid #3e3e42;
background-color: #353539;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .nav-tab:focus:not(.nav-tab-active),
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .nav-tab:hover:not(.nav-tab-active) {
background-color: #4d4d51;
body.litespeed-darkmode .nav-tab:focus:not(.nav-tab-active),
body.litespeed-darkmode .nav-tab:hover:not(.nav-tab-active) {
background-color: #4d4d51;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .button:hover,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .button-secondary:hover {
background-color: #484851;
body.litespeed-darkmode .button:hover,
body.litespeed-darkmode .button-secondary:hover {
background-color: #484851;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .button-primary {
background-color: #0073aa;
body.litespeed-darkmode .button-primary {
background-color: #0073aa;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .button-primary:hover {
background-color: #005a87;
body.litespeed-darkmode .button-primary:hover {
background-color: #005a87;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .button-primary:disabled,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .button-primary[disabled] {
background-color: #3e3e42;
body.litespeed-darkmode .button-primary:disabled,
body.litespeed-darkmode .button-primary[disabled] {
background-color: #3e3e42;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .litespeed-btn-danger-bg,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .litespeed .litespeed-btn-danger-bg,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .litespeed-wrap .litespeed-btn-danger-bg {
background-color: #dc3232;
box-shadow: 0 1px 0 rgba(179, 45, 46, 0.5);
body.litespeed-darkmode .litespeed-btn-danger-bg,
body.litespeed-darkmode .litespeed .litespeed-btn-danger-bg,
body.litespeed-darkmode .litespeed-wrap .litespeed-btn-danger-bg {
background-color: #dc3232;
box-shadow: 0 1px 0 rgba(179, 45, 46, 0.5);
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .litespeed-btn-danger-bg:hover,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .litespeed .litespeed-btn-danger-bg:hover,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .litespeed-wrap .litespeed-btn-danger-bg:hover {
background-color: #b32d2e;
body.litespeed-darkmode .litespeed-btn-danger-bg:hover,
body.litespeed-darkmode .litespeed .litespeed-btn-danger-bg:hover,
body.litespeed-darkmode .litespeed-wrap .litespeed-btn-danger-bg:hover {
background-color: #b32d2e;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .notice {
background-color: #262626;
border-left: 4px solid #72a9d3;
body.litespeed-darkmode .notice {
background-color: #262626;
border-left: 4px solid #72a9d3;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .notice-success {
border-left-color: #46b450;
body.litespeed-darkmode .notice-success {
border-left-color: #46b450;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .notice-warning {
border-left-color: #b28100;
body.litespeed-darkmode .notice-warning {
border-left-color: #b28100;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .notice-error {
border-left-color: #dc3232;
body.litespeed-darkmode .notice-error {
border-left-color: #dc3232;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .notice-info {
border-left-color: #00a0d2;
body.litespeed-darkmode .notice-info {
border-left-color: #00a0d2;
/* Striped table notices */
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .striped > tbody > :nth-child(even) .notice {
background-color: #3e3e42;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
body.litespeed-darkmode .striped > tbody > :nth-child(even) .notice {
background-color: #3e3e42;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .postbox {
background-color: #2d2d30;
border: 1px solid #767679;
body.litespeed-darkmode .postbox {
background-color: #2d2d30;
border: 1px solid #767679;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .postbox h3,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .postbox .hndle {
body.litespeed-darkmode .postbox h3,
body.litespeed-darkmode .postbox .hndle {
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) table,
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .wp-list-table {
background-color: #2d2d30;
body.litespeed-darkmode table,
body.litespeed-darkmode .wp-list-table {
background-color: #2d2d30;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .wp-list-table th {
body.litespeed-darkmode .wp-list-table th {
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .wp-list-table td {
border-bottom: 1px solid #3e3e42;
body.litespeed-darkmode .wp-list-table td {
border-bottom: 1px solid #3e3e42;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .striped > tbody > :nth-child(odd) {
background-color: #2d2d30;
body.litespeed-darkmode .striped > tbody > :nth-child(odd) {
background-color: #2d2d30;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .striped > tbody > :nth-child(even) {
background-color: #353539;
body.litespeed-darkmode .striped > tbody > :nth-child(even) {
background-color: #353539;
@media (prefers-color-scheme: dark) {
body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .form-table {