dark 模式的支持

[Ruikuan]

老黄您好。我之前一直在用你的全家桶来背单词和标记新词，受益良多，非常感谢！

最近 iOS 13 出来了，支持 dark 模式，我是 dark 模式爱好者，而 dark 模式下，现在的英语模板显得有点太耀眼了，所以我修改了下样式文件，做了一套 dark 模式的模板。现在我把它放在下面，有需要的话可以参考一下。

因为我自己不打算再用回 light 模式模板没有考虑双模式支持，不好意思。模板也根据我自己的需求进行了一些微小的调整

card1:

<!-- config & version section-->
<div class="section">
    <div class="bar config">Config
        <input type="checkbox" id="audio" onchange="saveConfig(this,'audio')">AutoPlay
        <input type="checkbox" id="fold" onchange="saveConfig(this,'fold')">HideHint
        <input type="checkbox" id="example" onchange="saveConfig(this,'example')">Example
    </div>
    <!--  versioncsection -->
    <div id='version' class='item'></div>
</div>

<!-- front section -->
<div class="section">
    <div id="front" class="items">
        <span>{{expression}}</span>
    </div>
    <hr>
    <div id="phonetic" class="items">
        <span>{{reading}}</span>
        <audio id="player" src="">{{audio}}</audio>
    </div>
</div>

<script type="text/javascript">
    loadConfig();
</script>

card2:

{{FrontSide}}

<!-- back section -->
{{#glossary}}
<div class="section">
  <div id="back" class="items">{{glossary}}</div>
</div>
{{/glossary}}

{{#notes}}
<div class="section">
  <div class="bar note" onclick="toggle('note')">Notes</div>
  <div id="note" class="items">{{notes}}</div>
</div>
{{/notes}}

{{#sentence}}
<div class="section">
  <div class="bar sentence" onclick="toggle('sentence')">Sentence</div>
  <div id="sentence" class="backlist items">{{sentence}}</div>
</div>
{{/sentence}}

<!-- foot section -->
<div class="bar foot">
  <div id="url"><a href={{text:url}}>URL</a></div>
</div>
{{audio}}
<script type="text/javascript">
  //customzied format function
  clearFormat();

  //hide hint based on config
  if (config.fold) {
    toggle('note');
    toggle('sentence');
  }

  //sample function
  highlightTag()

//sample function
//makeCloze()
</script>

style

</style>
<!-- 
author:ninja33  https://github.com/ninja33/anki-templates
inspired by: https://github.com/ecator/
-->

<script type="text/javascript">
  //declare global var config
  if (typeof (config) == "undefined") {
    var config = {};
    //audio autoplay
    config.audio = true;

    //hide or display hint section
    config.fold = true;

    //other config might be added
    config.example = true;

    config.version = '1.0';

    window.name = JSON.stringify(config);
  }
</script>

<style>
  /*global card style*/
  .card {
    font-family: helvetica, arial, sans-serif;
    font-size: 16px;
    text-align: left;
    color: #d9d9d9;
    background-color: #1e1e1e;
  }

  /*head & foot global style */
  .bar {
    border-bottom: 1px solid #455069;
    color: #ddd;
    padding: 5px;
    padding-left: 35px;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    background: #455069;
    background-repeat: no-repeat;
    background-position: 5px center;
  }

  .bar #url a {
    text-decoration: none;
    font-size: 12px;
    color: #d9d9d9;
    font-weight: bold;
  }

  /*head style*/
  .config {
    background-image: url(_toggles.png);
  }

  .head {
    background-image: url(_search.png)
  }

  .back {
    background-image: url(_bulb.png)
  }

  .note {
    background-image: url(_pencil.png)
  }

  .sentence {
    background-image: url(_clipboard.png)
  }

  /*foot style*/
  .foot {
    background-image: url(_cloud.png)
  }

  /* section global style */
  .section {
    border-color: #303030;
    background-color: #303030;
    position: relative;
    margin: 5px 0;
  }

  /* item global style */
  .items {
    margin: 0 12px;
    padding: 8px 0;
  }

  hr {
    border: 0;
    margin: 3px 13px;
    border-top: 1px solid #666;
  }

  /* front & back global style */
  #front,
  #back {
    line-height: 1.5em;
  }

  /* front field style */
  #front {
    font-size: 36px;
    color: #ddd;
    text-align: left;
  }

  #front span {
    display: inline-block;
    vertical-align: middle;
  }

  #front img {
    width: 36px;
    height: 36px;
    top: 6px;
    position: relative;
    margin-left: 10px;
  }

  /* back field style */
  #back {
    font-size: 16px;
    color: #ddd;
    text-align: left;
  }

  /* Tag highlight style */
  .highlight {
    font-size: 12px;
    border-radius: 4px;
    color: #f2f2f2;
    padding: 0 3px;
    margin-right: 5px;
    font-weight: bold;
  }

  /* phonetic style */
  #phonetic {
    font-size: 14px;
  }

  #sentence b {
    font-weight: normal;
    border-radius: 3px;
    color: #d9d9d9;
    background-color: #666;
    padding: 0 3px;
  }

  #sentence hr {
    border: 0;
    margin: 8px 0px;
    border-top: 1px solid #333;
  }

  /* version style */
  #version {
    text-align: center;
    font-size: 12px;
  }
</style>

<!-- 
JS helper functions
-->
<script>
  //hide or display hint
  function toggle(e) {
    var box = document.getElementById(e);
    if (box)
      if (box.style.display == 'none') {
        box.style.display = 'block';
      }
      else {
        box.style.display = 'none';
      }
  }

  //save config
  function saveConfig(obj, item) {
    config[item] = obj.checked;
    window.name = JSON.stringify(config);
  }

  //load config
  function loadConfig() {
    document.getElementById("audio").checked = config.audio
    document.getElementById("fold").checked = config.fold
    document.getElementById("example").checked = config.example
  }

  //delete HTML element
  function removeTag(tag) {
    var items = document.querySelectorAll(tag);
    for (var i = 0; i < items.length; i++) {
      items[i].outerHTML = "";
    }
  }

  //clear WordQuery output Format
  function clearFormat() {
    var ex = document.querySelectorAll(".explanation_box .text_blue");
    for (var i = 0; i < ex.length; i++) {
      ex[i].outerHTML = ex[i].outerHTML + "<br>";
    }

    var ex = document.querySelectorAll(".explanation_box .explanation_label");
    for (var i = 0; i < ex.length; i++) {

      ex[i].innerHTML = ex[i].innerHTML.replace(/.?\[(.+?)[\s|-].+/g, "$1").toLowerCase() + ".";
      //alert(ex[i].innerHTML)
    }

    removeTag(".word_header");
    removeTag(".item_number");
    if (!config.example) {
      removeTag(".explanation_item>ul");
    }
  }

  //sample functions: make cloze
  function makeCloze() {
    var bb = document.querySelectorAll("#back b");
    for (var i = 0; i < bb.length; i++) {
      bb[i].innerHTML = "____";
    }
  }

  //sample functions: highlight tag
  function highlightTag() {
    var colorMap = {
      'n.': '#e3412f',
      'a.': '#f8b002',
      'adj.': '#f8b002',
      'ad.': '#684b9d',
      'adv.': '#684b9d',
      'v.': '#539007',
      'vi.': '#539007',
      'vt.': '#539007',
      'verb.': '#539007',
      'phrase.': '#04B7C9',
      'prep.': '#04B7C9',
      'conj.': '#04B7C9',
      'pron.': '#04B7C9',
      'art.': '#04B7C9',
      'num.': '#04B7C9',
      'int.': '#04B7C9',
      'interj.': '#04B7C9',
      'modal.': '#04B7C9',
      'aux.': '#04B7C9',
      'pl.': '#D111D3',
      'abbr.': '#D111D3',
    };
    [].forEach.call(document.querySelectorAll('#back'), function (div) {
      div.innerHTML = div.innerHTML.replace(/\b[a-z]+\./g, function (symbol) {
        if (colorMap[symbol]) {
          return '<a class="highlight" style="color: #eee; background-color: ' + colorMap[symbol] + ';" >' + symbol + '</a>';
        } else {
          return symbol;
        }
      });
    });
  }

</script>

<style>

[Ruikuan]

一般网页支持模式自动切换是通过

@media (prefers-color-scheme: dark) 

来实现的，不知道 anki 是不是也支持。iOS 应该都是用的系统 Webview 实现，估计是支持的，不过我自己没测试过。Windows 版本估计是老旧的 IE 套件，不支持了。

[Ruikuan]

iOS 下使用效果：

[TianMo-ZhangSan]

你是使用在线词典助手吗？

[Ruikuan]

是的，用它导入单词。 不过老黄提供的 COCA20000 之类的也可以改改套上去