Have ideas to improve npm?Join in the discussion! »

    mocha-dark

    8.3.2 • Public • Published

    Mocha Logo mocha-dark version: 8.3.2

    ☕️ A dark color scheme for Mocha, the Simple, flexible, fun JavaScript test framework for Node.js & The Browser. ☕️

    Motivation

    To provide a dark color scheme for the browser based Mocha test runner. For accessibility, for those who have visual difficulties or for those who just prefer a dark color theme when viewing their test results.

    Features

    In this release (version: 8.3.2) we provide a replacement for mocha.css and mocha.js with a dark color scheme for use in Mocha browser based tests.

    • Contains both default (light) and dark scheme.
    • It detects the CSS media query prefers-color-scheme setting on startup if your Operating System sets it and there is no override.
    • It changes to dark or light as your OS changes the preferes-color-scheme setting if no override is stored.
    • The user can make the page render dark on startup.
    • The user can click to toggle the scheme and have the setting remembered.
    • When you change the scheme the circular progress indicator now re-renders correctly without a reload.
    • Color scheme setting is remembered for file:// protocol as well as web server pages.

    Issues

    • None known. Please report any you discover.

    Usage

    After installing mocha-dark you need to replace mocha/mocha.css with mocha-dark/mocha.css within any *.html testing files in your project.

    And mocha/mocha.js with mocha-dark/mocha.js within any *.html testing files or any *.js files you use to import mocha.js in your project.

    This could be simply accomplished with a single command:

    perl -i -pne 's{mocha/mocha\.(css|js)}{mocha-dark/mocha.$1}g' test/*.html

    Then you can set the dark scheme on startup by adding a class="mocha-dark" to the body element of your *.html pages.

    Again a single command can do that:

    perl -i -pne 's{<body>}{<body class="mocha-dark">}g' test/*.html

    It is then simpler to switch back to the default scheme:

    perl -i -pne 's{"mocha-dark"}{"mocha-light"}g' test/*.html

    To automate this process when you run your tests you can add an additional target to your package.json

    // in package.json:
    "scripts": {
      "test": "mocha ...",
      "pretest:light": "perl -i -pne 's{\"mocha-dark\"}{\"mocha-light\"}g' test/*.html",
      "test:light": "npm test"
      "pretest:dark": "perl -i -pne 's{\"mocha-light\"}{\"mocha-dark\"}g' test/*.html",
      "test:dark": "npm test"
    }

    Then you run the dark tests with:

    npm run test:dark

    And back to the light tests with:

    npm run test:light

    Changing Scheme in the Browser

    Once you are viewing the tests in the browser you can toggle the color scheme by clicking on the circular progress indicator at top right of the page.

    The currently clicked setting is remembered using browser localStorage so it will persist forever and work on pages loaded from file:// or loaded from web servers.

    Alternatively, you can toggle the color scheme using a command in the Javascript console:

    mocha.updateColorScheme('mocha-dark') // or mocha-light

    And you can remove the setting from localStorage completely with:

    mocha.updateColorScheme()

    Color Scheme Differences

    Mocha Dark Theme

    Mocha Dark Theme

    Mocha Default Theme

    Mocha Default Theme

    Release History

    • 2.2.5 initial package matching an old version of mocha and providing only the dark scheme.
    • 2.3.4 release to match Mocha release with both light/dark CSS and mocha-dark class on body element and cookie setting to remember change to chosen scheme.
    • 2.4.5 release to match Mocha release using localStorage instead of cookie to save settings.
    • 3.2.0 release to match Mocha release hover and tooltip on progress indicator, replay color change.
    • 8.3.0 release to match Mocha release progress indicator re-renders, CSS prefers-color-scheme media query, features complete.
    • 8.3.2 release to match Mocha release added png logo image, updated chai

    Install

    npm i mocha-dark

    DownloadsWeekly Downloads

    6

    Version

    8.3.2

    License

    MIT

    Unpacked Size

    928 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar