[BUG] Dark mode css loading on website frontend

  • Resolved webbirddigital

    (@webbirddigital)


    7 months, 1 week ago

    The file litespeed-cache/assets/css/litespeed-dark-mode.css is loading on the website frontend of the website when logged in. This loads the following CSS on the page body…

    @media (prefers-color-scheme: dark) {
    body[class*="litespeed"]:not(.litespeed-lightmode) {
    background-color: #1e1e1e;
    color: #e0e0e0;
    }
    }

    The result is that this is affecting the styles of the actual website frontend, not just the backend. Obviously this is intended to only load in the website backend (ie. on the Litespeed Cache setting page), however there seems to be a bug somewhere.

    This affects Version 7.6

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support litetim

    (@litetim)

    7 months, 1 week ago

    @webbirddigital please provide a report ID.
    From LSC => Toolbox => Report => click on “Send to Litespeed” then share the ID generated(8 string)

    • This reply was modified 7 months, 1 week ago by litetim.
    Thread Starter webbirddigital

    (@webbirddigital)

    7 months, 1 week ago

    I can’t seem to send a report. Getting error “Cloud Error: Please try after 4m 27s for service wp/report.”. Last report number shows: –

    Note that we have observed this dark-mode bug on about 20 different websites after updating to 7.6 (version 7.5 is unaffected). This bug is not likely a plugin or theme conflict.

    Plugin Support litetim

    (@litetim)

    7 months, 1 week ago

    @webbirddigital
    Thank you for report(topic).
    The css is written to apply for body classes that have “litespeed”.
    We will look for improvements to make it safer.

    • This reply was modified 7 months, 1 week ago by litetim.
    Thread Starter webbirddigital

    (@webbirddigital)

    7 months, 1 week ago

    Upon further investigation, the bug here is a logical one. The litespeed-dark-mode.css file is being loaded by litespeed.css using @import url('litespeed-dark-mode.css?v=37'); however this litespeed.css file is loaded on the website frontend in src/gui.cls.php

    To correct this, I suggest that litespeed-dark-mode.css instead be loaded alongside litespeed.css in admin-display.cls.php, in the enqueue_style() function (and the @import rule removed from litespeed.css).

    eg.

    public function enqueue_style() {
    wp_enqueue_style( Core::PLUGIN_NAME, LSWCP_PLUGIN_URL . 'assets/css/litespeed.css', array(), Core::VER, 'all' );
    wp_enqueue_style( Core::PLUGIN_NAME . '-darkmode', LSWCP_PLUGIN_URL . 'assets/css/litespeed-dark-mode.css', array(), Core::VER, 'all' );
    }

    Thread Starter webbirddigital

    (@webbirddigital)

    7 months, 1 week ago

    Additionally, the reason that your CSS rules are applying is that the body[class*="litespeed"]:not(.litespeed-lightmode) is matching the frontend class .litespeed_lazyloaded which is applied to the <body> element when lazyloaded images are enabled.

    Thread Starter webbirddigital

    (@webbirddigital)

    7 months, 1 week ago

    I’ve created a pull-request with a fix, here: https://github.com/litespeedtech/lscache_wp/pull/923

    Plugin Support Hai Zheng⚡

    (@hailite)

    7 months, 1 week ago

    Thanks for the investigation and solution. Will fix and push a hotfix.

    Plugin Support Hai Zheng⚡

    (@hailite)

    7 months, 1 week ago

    The fix was released in v7.6.1.

    Thanks again for the quality and quick feedback.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘[BUG] Dark mode css loading on website frontend’ is closed to new replies.