最近 iOS 13 出来了，支持 dark 模式，我是 dark 模式爱好者，而 dark 模式下，现在的英语模板显得有点太耀眼了，所以我修改了下样式文件，做了一套 dark 模式的模板。现在我把它放在下面，有需要的话可以参考一下。
<!-- 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>{{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>
<!--
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>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent