shahram
February 2, 2021, 10:26am
1
Hello everyone,
P.S.: i have tried mix_blend_mode in card styling. It didn’t help!
.win .card{
font-family: arial;
font-size: 12px;
text-align: center;
mix-blend-mode: difference !important;
}
dae
February 2, 2021, 11:37am
2
I’m not sure inverting text colours by default is the best option, as it could conflict with explicit night-mode styling people have. You might be able to imitate it with some CSS - perhaps some CSS guru has a suggestion.
yea you’re right its not the best option but it works for me and i don’t have any problem with it in Ankidroid.
could you please help me more?
How about instead of using mix-blend-mode, you simply use:
.nightMode {
color: white;
}
?
For example, with the following trick and a slight adjustment to keep default dark mode colors uninverted.
HTML
<span style="background:#4577be;color:white"> seedling </span>
<span style="color:#5e1624">NAmE</span>
noun
Light Mode
Dark Mode
Styling
.night-mode [style*="color:"], .night-mode [style*="background:"] {
filter: invert(100%);
}
6 Likes
shahram
February 3, 2021, 11:00am
7
Hi Kelciour,
<style type="text/css">.entry{font-family:Arial,sans-serif;color:#333;line-height:160%;margin:0;padding:0}.h-g{margin:0;padding:0}ol{list-style-type:none}img{max-width:100%;border:none}a{font-weight:bold;color:#004AAC}.oxf{color:#C76E06}.gram-g,.label-g,.dis-g{color:#004AAC}.hm,pnc.hm,.xhm{font-size:smaller;margin-left:1px;position:relative;top:-5.25px}block{margin:0 0 5px 0;display:block;border-bottom:1px dashed #333}block a{color:#8f0610}.topc,.top-g,.wtg{margin:0;padding:0}.wtg .aca{display:inline-block;margin-top:0px;padding:1px 4px 0;line-height:15px;font-size:75%;font-weight:bold;color:white;background-color:#C76E06}.wtg .oxf{font-size:20px;color:white}.wtg h2{display:inline-block;margin:0;padding:0 5px;font-size:20px;font-weight:bold;font-family:Arial,sans-serif}.wtg .pos{color:#8f0610;font-weight:bold;font-style:italic;padding-left:5px}.top-g .v-gs:not([type~="sym"]){display:block}.pgs{display:inline-block;margin:0;padding-left:5px}.pgs .phon{color:#004aac}.pgs a{display:inline-block}.pgs img{width:33px;height:30px;margin-bottom:-4px}.vp-g .pgs{display:inline}.pron-g{white-space:nowrap}.cf{font-weight:bold}.sn-gs li{display:block}.sn-gs .shcut{display:block;margin-top:8px;font-size:110%;font-weight:bold;color:#C76E06;border-bottom:1px solid #e8c49a}.sn-gs .sn-g{display:block}.sn-gs .sn-g .num{font-weight:bold;padding-right:5px}.sn-gs .sn-g .xr-gs{display:block}.sn-gs .sn-g .xr-gs:before{content:"➔";color:#C76E06;margin-right:4px;position:relative;top:2px}.sn-gs .sn-g .xr-gs .prefix{text-transform:uppercase;font-size:80%;margin-right:3px}.sn-gs .x-gs{display:block;padding-left:10px}.sn-gs .x-gs .x-g{display:block;font-family:Georgia,serif;color:#666}.sn-gs .x-gs .x-g:before{content:"•";color:#C76E06}.sn-gs .un{display:block;background-color:#F3E2CD;margin:10px;padding:5px}.sn-gs .un .x-gs,.sn-gs .un .x-gs .x-g{display:inline;margin:0;padding:0}.sn-gs .un .x-gs .x-g:before{content:"▶"}.idm-gs,.pv-gs{display:block;margin-top:10px;padding:5px 10px;border:1px solid #e8c49a;border-radius:5px}.idm-gs .idm-g{display:block;margin-top:5px}.idm-gs .heading,.pv-gs .heading{display:block;margin:5px;font-size:110%;font-weight:bold;color:#C76E06}.idm-gs .idm{display:inline-block;font-weight:bold}.idm-gs ol{padding:0}.idm-gs ol .sn-gs{display:block;padding-left:10px}.pv-gs .pv-g{display:block;margin:0;padding:0}.pv-gs .xr-gs a{display:block}.pv-gs .pv-g h4{display:inline;margin:0}.pv-gs .pv-g a{display:inline}.pvarr:before{ content:"↔"}.eb{color:#333;font-weight:bold}.sn-gs .sn-g .clps{margin-left:10px}.clps{margin:5px 0;padding:0;display:block;border-left:3px solid #C76E06;background-color:#F9F0E5}.clps .heading{display:block;margin:0;padding:2px 5px;font-size:100%;font-weight:bold;color:#333}.clps .heading:hover{color:#C76E06;cursor:pointer;background-color:#EED5B7}.topc .clps .heading:hover{color:#4577bf;cursor:pointer;background-color:#bed3ed}.topc .clps .opbox .heading{color:#4577bf;background-color:#bed3ed}.clps .opbox .heading{color:#C76E06;background-color:#EED5B7}.clps .unbox .heading:before{content:"＋";font-weight:900}.clps .unbox .body,.clps .unbox .def,.clps .unbox .h1,.clps .unbox .p{display:none}.clps .opbox .body,.clps .unbox .h1,.clps .unbox .p{display:block}.clps .opbox .def{display:inline}.clps .opbox .heading:before{content:"－";font-weight:900}.clps .body{padding-left:10px}.clps .body .vp-g{display:block}.clps .body .vp{font-weight:bold}.clps .body .vp .prefix{font-weight:normal}.clps .body .x-gs .x-g{display:block;font-family:Georgia,serif}.clps .body .x-gs .x-g:before{content:"•";color:#C76E06}.clps .body .h1{margin-top:5px;display:block;color:#C76E06;font-size:120%;font-weight:bold}.clps .body .inline{display:block;font-weight:bold;width:100%;overflow:}.clps .body .inline .sep{display:none}.clps .body .inline .li{display:inline-block}.clps .inline .li:not(:last-of-type):after,.clps ul.inline .li:not(:last-of-type):after{ content:"•";color:#C76E06;margin-left:4px;width:6px}.clps .body .deflist{display:block}.clps .body .deflist .li{display:block}.clps .body .deflist .li .eb{color:#C76E06}.clps .body .li .un{display:block;background-color:#F3E2CD;margin:10px;padding:5px}.clps .body .li .x-gs{display:inline;margin:0;padding:0}.clps .body .li .x-gs .x-g{display:inline}.clps .body .li .x-gs .x-g:before{content:"▶";margin-left:2px}.clps .body .h2{display:block;margin-top:5px;color:#333;font-size:105%;font-weight:bold;border-bottom:1px solid #e8c49a}.clps .body .p{display:block;margin:0}.clps .body .p .xr-gs{display:inline;margin:0}.clps .body .p .xr-gs:before{content:"";margin:0}.clps .body .h3{margin:8px 0;display:block;font-size:110%;font-weight:bold;border-bottom:1px solid #e8c49a}.clps .body .bullet .li{display:block;padding-left:10px}.clps .body .bullet .li:before{content:"■";color:#C76E06;margin-left:-10px}.topc{background-color:#ecf5ff;clear:both}.wtg{background-color:#4577bf;margin:0;padding:0}.wtg h2{font-size:20px;font-weight:bold;font-family:Arial,sans-serif;margin:8px 0;padding-left:10px;color:white;line-height:120%;display:inline-block}.wtg .pos{margin-left:6px;color:#ffffff}.idm-gs .un,.pv-gs .un{margin-left:18px;margin-right:18px;padding:12px 18px 12px 18px}.un,.clps{background-color:#faf1e6;display:block;margin:12px 0 18px 0}.sn-gs,.res-g{display:block}.topc .un,.topc .clps{background-color:#dce9f9;border-left:3px solid #4577bf}.un{padding:12px 18px 12px 18px;text-indent:0}</style>
<div class="entry"><div class="h-g"><div class="topc"><div class="top-g"><div class="wtg"><h2 class="h">seedling</h2><span class="pos">noun</span></div><div class="pgs"><span class="pron-g"><span class="prefix" style="color:#07255e">BrE</span> <span class="phon">/ˈsiːdlɪŋ/</span><span class="sound-uk"><a href="sound://sound/seedling__gb_1.spx"></a></span></span><span class="sep">;</span> <span class="pron-g"><span class="prefix" style="color:#8f0610">NAmE</span> <span class="phon">/ˈsiːdlɪŋ/</span><span class="sound-us"><a href="sound://sound/seedling__us_1.spx"></a></span></span></div></div></div><span class="sn-gs"><span class="sn-g"><div class="pics"></div> <span class="def">a young plant that has grown from a seed</span><span class="x-gs"><span class="x-g"> <span class="x">tomato seedlings</span></span></span></span></span></div> </div>
and my card styling looks now like this:
.mobile .card {
font-family: arial;
font-size: 22px;
text-align: center
}
.win .card{
font-family: arial;
font-size: 12px;
text-align: center;
}
html:not(.android) .nightMode [style*="color:"], html:not(.android) .nightMode [style*="background:"] {
filter: invert(100%);
}
hkr
February 3, 2021, 2:27pm
8
The solution for that particular html would be something like the following:
.win .nightMode .def {
color: #fff;
}
Or, if you’re looking for a universal way to change the color of text from a dark one to a light one only when text is so dark that it is hard to see when night mode is enabled, you could try adding the following script to the card template:
<script>
// https://stackoverflow.com/questions/12043187/how-to-check-if-hex-color-is-too-black
function getLuminance(rgbString) {
var rgb = rgbString.match(/\d+/g);
return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
}
function brightenText() {
// from 0 (darkest) to 255 (brightest)
const foregroundLuminanceThreshold = 100;
const backgroundLuminanceThreshold = 100;
// See https://developer.mozilla.org/en-US/docs/Web/CSS/filter
const filterValue = 'invert(1) hue-rotate(180deg)';
const nodeIterator = document.createNodeIterator(
document.querySelectorAll('#qa')[0],
NodeFilter.SHOW_ELEMENT
);
let currentNode;
while ((currentNode = nodeIterator.nextNode()) !== null) {
const style = getComputedStyle(currentNode);
if (getLuminance(style['color']) < foregroundLuminanceThreshold &&
getLuminance(style['background-color']) < backgroundLuminanceThreshold) {
currentNode.style.filter = filterValue;
}
}
}
// Do processing only when night mode is enabled on Anki desktop
if (typeof pycmd !== 'undefined' && document.body.classList.contains('nightMode')) {
setTimeout(brightenText, 0);
}
</script>
You can change the values of foregroundLuminanceThreshold, backgroundLuminanceThreshold, and filterValue if necessary.
EDIT: Changed the root node of NodeIterator
5 Likes
shahram
February 3, 2021, 10:59pm
9
Thank you hkr, your first solution has helped me.
I get still unreadable texts in desktop.
