The problem i am facing is that i have a custom darkmode on my html website. Android has a darkmode function on their phones (same for IOS). Those functions apply a filter on my website, but i want them to use my custom code for it. How to i force them to use my colorcodes instead of a filter?
For darkmode i am using a root color overlay. See picture: 
I have tried researching it but i can't find anything about it online. My experience isn't big enough to tackle this problem by myself.
DarkMode will use exactly declared Dark-version of colors and doesn't apply any other filter or overlay by its own.
In your code I can see that many colors are theme-specify but few of them (like "oranje") remains the same in both Themes because them are present only on root and light version, so even in Dark mode same colors are used. Please consider to use ":root{}" as a standalone keyset. Light or Dark mode are used to overwrite ":root" values, so declaring ":root" as "light" is unuseful.