Foxit Developer

Dark Mode ​

The "/lib/UIExtension.dark-variable.css" stylesheet defines CSS variables used in dark mode. To enable dark mode, load both "/lib/UIExtension.css" and "/lib/UIExtension.dark-variable.css", then reference the variables from "/lib/UIExtension.dark-variable.css" inside "/lib/UIExtension.css". Steps:

  1. Add "/lib/UIExtension.css" in the HTML <head>:

    html
    <link rel="stylesheet" type="text/css" href="./lib/UIExtension.css">

  2. Add "/lib/UIExtension.dark-variable.css" in the HTML <head>:

    html
    <link id="dark-variable-css" rel="stylesheet" type="text/css" href="./lib/UIExtension.dark-variable.css">

  3. Define a function to toggle theme mode by changing the link element’s rel attribute to enable or disable the referenced stylesheet in the browser.

    javascript
    function toggleDarkTheme() {
    let eCssLink = document.getElementById('dark-variable-css');
    let rel = eCssLink.getAttribute('rel');
    let STYLESHEET = 'stylesheet';
    eCssLink.setAttribute('rel', rel === STYLESHEET ? STYLESHEET + '-template' : STYLESHEET)
}

Tip: There are many ways to toggle themes. Referencing the variables in /lib/UIExtension.dark-variable.css enables dark mode; omitting them keeps the default theme.