Tried for like 2 hours to change color using anki css /editing the color codes in tamper monkey but Can't change the colors to work for night mode? How would I go about this? Plz help

[Brainiac12345]

Btw I was using wordreference if that matters?

[OoDeLally]

Hi, there is no concept of light/dark theme. You can identify the used css classes with your browser's console, then edit them in the js script. The styles are injected with the styleInject() function.

[Brainiac12345]

ty but I dont even see matching colors here like #0645ad i can't find it in the script but i can in the card

`

wordreference.com

en

propina nf

Él dejó una propina de un 15%.

` ---------------------------- script: `// ==UserScript== // @namespace https://github.com/OoDeLally/anki-add-hooks-userscripts // @grant GM.xmlHttpRequest // @grant GM.setValue // @grant GM.getValue // @connect localhost // @name Anki Add Hooks for WordReference.com // @version 2.7 // @description Generate a hook for AnkiConnect on WordReference.com // @author Pascal Heitz // @include /https?:\/\/www\.wordreference\.com\/(([a-z]{4}\/.+)|([a-z]{2}(\/[a-z]{2})?\/translation.asp\b.*))/ // ==/UserScript== (function () { 'use strict'; function __$styleInject ( css ) { if(!css) return ; if(typeof(window) == 'undefined') return ; let style = document.createElement('style'); style.innerHTML = css; document.head.appendChild(style); return css; } __$styleInject(".-anki-add-hook {\n -moz-user-select: none;\n -ms-user-select: none;\n -o-user-select: none;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n background-color: #aaaaaa;\n border-radius: 5px;\n border: 2px solid #222222;\n box-sizing: content-box;\n color: white;\n cursor: pointer;\n display: inline-block;\n font-family: 'Roboto', sans-serif;\n font-size: 12px;\n font-weight: bold;\n height: 15px;\n line-height: 17px;\n opacity: 0.8;\n overflow-wrap: normal;\n overflow: hidden;\n padding-left: 30px;\n padding-right: 5px;\n position: relative;\n right: 0px;\n text-align: left;\n text-indent: 0;\n top: 0px;\n user-select: none;\n vertical-align: middle;\n width: 35px;\n z-index: 1000;\n}\n.-anki-add-hook-added {\n border: 2px solid green;\n opacity: 1;\n cursor: auto;\n color: green;\n background-color: #cccccc;\n}\n.-anki-add-hook:hover {\n opacity: 1;\n}\n\n.-anki-add-hook-star {\n display: block;\n transform: rotate(-15deg);\n position: absolute;\n}\n.-anki-add-hook-added .-anki-add-hook-star-small {\n color: green;\n}\n.-anki-add-hook-star-big {\n font-size: 40px;\n color: white;\n z-index: 1005;\n left: -7px;\n top: -1px;\n}\n.-anki-add-hook-star-small {\n font-size: 25px;\n color: #0099ff;\n color: grdsdsdqwdfedwdsdwesdddsdwdn;\n z-index: 1010;\n left: 0px;\n top: -1px;\n}\n\n.-anki-add-hook-text {\n text-decoration: none !important;\n font-size: 12px !important;\n}\n\n\n.-anki-add-hook-loading .-anki-add-hook-star {\n animation-name: spin;\n animation-duration: 2000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n}\n\n@keyframes spin {\n from {\n transform:rotate(0deg);\n }\n to {\n transform:rotate(360deg);\n }\n}\n\n.-anki-add-hook-error {\n border: 2px solid red;\n opacity: 1;\n color: red;\n background-color: #cccccc;\n}\n.-anki-add-hook-error .-anki-add-hook-star-small {\n color: red;\n}\n"); __$styleInject(".banner {\n height: 20px;\n font-size: 14px;\n color: deepskyblue;\n text-align: left;\n}\n\n.banner-language {\n\n}\n\n\n.banner-hook-name {\n float: right;\n}\n"); // Tells if a node is a TextNode var isTextNode = (node) => { if (!node || node.nodeType === undefined) { throw Error(`Provided 'node' is not a DOM node; instead found '${node}'`); } return node.nodeType === 3; }; const ankiDefaultStyles = { bottom: ['auto', '0px'], boxShadow: 'none', boxSizing: 'border-box', clear: 'none', color: 'rgb(0, 0, 0)', direction: ['', 'ltr'], flex: '0 1 auto', float: 'none', fontSize: '20px', fontStyle: 'normal', fontWeight: '400', left: ['auto', '0px'], lineHeight: '18px', listStyle: 'disc outside none', margin: '0px', opacity: '1', order: '0', overflow: 'visible', overflowAnchor: 'auto', overflowWrap: 'normal', overflowX: 'visible', overflowY: 'visible', padding: '0px', position: 'static', right: ['auto', '0px'], stroke: 'none', tableLayout: 'auto', textAlign: 'start', textDecorationLine: 'none', textIndent: '0px', textOrientation: 'mixed', textOverflow: 'clip', textSizeAdjust: '100%', top: ['auto', '0px'], verticalAlign: 'baseline', wordBreak: 'normal', wordSpacing: '0px', wordWrap: 'normal', zIndex: 'auto', zoom: '1', };

[OoDeLally]

Where did you find that #0645ad color? I dont use it anywhere in the script. The blue star is #0099ff and you can easily find it in the script.

[Brainiac12345]

I am talking about the color of text on anki. Here you can see #0645a

[Brainiac12345]

btw my card has no css itself in styling tab nor can i change anythig but font

[OoDeLally]

Then I believe that would be the deepskyblue color you need to search and replace in the hook.

[Brainiac12345]

That only changes the color of 2 things i changed to orange:

[OoDeLally]

So? what do you need exactly?

Just find the CSS selectors that identify the elements you want to change, and assign them the style you want.

[Brainiac12345]

Thats the problem can't find them in the script.