How can I get karma browser's to use a dark th

2019-08-21 02:40发布

问题:

I'm starting to use karma in an Angular app and would like to change the browser theme to be dark. I wanted to know if there was anywhere in the configuration file I can just inject simple css or use add a js file to inject these styles.

e.g. karma-styles.js

var css = `
  html * {
    background-color: black !important;
    color: white !important;
  }

  .html-reporter .failures .spec-detail .description {
    background-color: #b03911 !important;
  }
`,
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

I've tried adding the file in karma config: // list of files / patterns to load in the browser files: [ './karma-styles.js', ],

but can't seem to get it to work or am not sure if this is the appropriate place to add this file.

Does anyone know how I can get custom styles with karma for dark themes or plugins that can do this?

回答1:

I looked for premade styles for this but was unable to find any so quickly made my own and published it in a GitHub Gist as karma.css.

Karma allows you to add files to its config, which allows insertion of CSS or JS. Source.

// list of files / patterns to load in the browser
files: [
    'karma.css'
]

These are relative to the config, which would be the root of your project if you use the default setup for Angular.io.

Notably this only applies to the content of the iframe, so in lieu of having a proper plugin to do this, I directly edited the source HTML files in the node module with the following line:

<link type="text/css" href="base/karma.css" rel="stylesheet">

The path base is where you would find the CSS file as added by the configuration above. The 2 files you should edit are (typically) here: /node_modules/karma/static/client*.html. I suspect relative links would work as expected here (cannot use .. freely but can go into subdirs).