如何使业力浏览器使用深色主题? [英] How can I get karma browser's to use a dark theme?

问题描述

我开始在Angular应用中使用业力，并希望将浏览器主题更改为黑暗.我想知道配置文件中是否有任何地方，我可以注入简单的CSS或使用添加js文件注入这些样式.

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.

例如karma-styles.js

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));
}

我尝试在业力配置中添加文件: //要在浏览器中加载的文件/模式列表 文件:[ './karma-styles.js'， ]

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?

推荐答案

我为此寻找了预制的样式，但找不到如此快的样式，因此将其发布到

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允许您将文件添加到其配置，该配置允许插入CSS或JS. 来源.

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'
]

这些是相对于配置的，如果您为 Angular.io

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

值得注意的是，这仅适用于iframe的内容，因此，我没有使用合适的插件来执行此操作，而是直接在node模块中使用以下行编辑了源HTML文件:

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">

路径base是您在其中找到由上述配置添加的CSS文件的位置.您应该编辑的2个文件(通常)在这里:/node_modules/karma/static/client*.html.我怀疑相对链接在这里可以正常工作(不能随意使用..，但可以进入子目录).

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).

这篇关于如何使业力浏览器使用深色主题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！