Getting Rid of the Red Theme on Hooda Math
If you've spent any time on hoodamath.com, you've probably noticed the entire site is wrapped in this bright red color scheme. Some teachers block it, some kids get distracted by it, and sometimes you just want to play a game without the assault on your eyes. A Hooda Math Games Red Remover is basically a user stylesheet or browser extension that strips out the red CSS and replaces it with something neutral. It's not an official tool, so nothing fancy here. At its core, it's a small piece of code that overrides the default stylesheets the site loads. Most versions I've seen target the primary color variable and swap the red hex codes for white, gray, or whatever you set. The simple ones hardcode the replacements. The better ones use CSS variables or custom properties so you can tweak them without digging through the whole file. I spent a few evenings messing with the DOM on this site back when I was doing accessibility work for a school district. We had kids with sensory processing issues who genuinely couldn't focus while the site pumped out red everywhere. A basic red remover did the trick, but the off-the-shelf versions had problems.
How to Install One Yourself
The most reliable method doesn't require installing anything suspicious. You can use a userscript manager like Tampermonkey or Violentmonkey in your browser, then paste in a custom script that targets the site's stylesheets and rewrites the colors. Here's the approach I ended up using with my own setup: Install Tampermonkey from your browser's extension store. Create a new userscript. Set the match URL to https://www.hoodamath.com/*. Then add a CSS injection block that uses @media or a straight style override. The key is running it after the page loads, so you hook into the DOMContentLoaded event or use a MutationObserver to catch dynamically loaded game frames.
One detail most people miss: Hooda Math loads a lot of its content inside iframes. A stylesheet that only targets the parent page won't touch the game content itself. I ran into this exact issue when I thought my remover was working perfectly, then realized the actual games still had red headers, buttons, and progress bars. The fix was to also inject a stylesheet into every iframe that matched the site's origin. A quick loop over document.querySelectorAll('iframe') and apply the same style rules to each one did the job.
Get the Full Details
Simple Version vs Custom Version
There are a few public versions floating around forums and GitHub. The simple ones just replace #E53935 and similar red tones with white backgrounds and dark text. They work okay for the main pages but break on newer games that use randomized color palettes or JavaScript-driven styling. The custom version is more work upfront but gives you control over exactly which elements get remapped. I ended up writing my own because the public ones kept missing certain UI components. My version targets about 40 different selectors across the main domain and its subpages, and it falls back to a base color variable if a specific override isn't needed. It takes maybe five minutes to set up if you already have Tampermonkey.
Pitfalls and What Breaks
This isn't a perfect solution. There are real limitations you should know before you bother. First, the site updates regularly. When Hooda Math pushes a new game or changes their CSS class names, your remover will start missing things. I've had cases where a brand new math game appeared with all its elements still fully red while the old games stayed neutral. You just have to inspect the new elements and add the overrides manually. Second, some games use inline styles or canvas-based rendering where CSS overrides don't apply at all. If a game draws its UI directly onto a canvas element, there's nothing you can do with a stylesheet. You'd need a completely different approach, like intercepting the rendering commands, which is way more involved.
Third, using userscripts on educational sites sometimes violates the terms of service. I'm not saying anyone will get in trouble, but it's worth noting. Teachers who deploy this across a classroom should check with their IT department first.
When It Completely Fails
If you're trying to remove red from a game that was recently added and uses WebGL or a game engine like Phaser, CSS injection won't touch it. In those cases the only real workaround is an ad-blocker-style network filter that blocks the original stylesheet from loading and serves a blank or overridden one instead. That requires more advanced tooling like a local proxy or a browser extension with deep content blocking permissions. For most people, that's overkill. A basic Tampermonkey script with iframe support covers the vast majority of cases on the site. If you run into a game it doesn't handle, inspect the element, find the new class or ID, and add it to your override list. It usually takes less than two minutes per missing selector.
Where to Find Scripts
There are userscripts on Greasy Fork and a few GitHub repos. Search for Hooda Math custom theme or Hooda Math dark mode and you'll find several options. Most of them include a red remover as part of a broader theme package. Read through the code before installing anything. It's usually short enough to verify there's nothing sketchy, and it'll save you from getting a script that breaks the site's layout entirely. My own script isn't public, but the logic is straightforward enough that anyone who's comfortable reading a few lines of JavaScript can write their own. The whole thing is under 80 lines. If you want to try it yourself, start with a single CSS override and expand from there instead of grabbing a pre-built solution that might do more than you need. That's about it. Install a userscript manager, target the right selectors, handle the iframes, and update when the site changes. Anything beyond that is just polishing.
