How To Use Brave Browser with a Dark Theme

Hi Kids,
It’s been a while, but I’ve got something cool for you today. If you like Brave, the privacy-centric browser that’s shares an ancestor with Chrome, then you are probably aware that there isn’t a dark theme available for it yet… or really an extensions platform as of now. It’s still rough out here, but as it turns out Brave is pretty easy to modify. From what I can tell, the Brave team is already working on bundled, switchable Dark/Light themes for the browser but it isn’t available publicly yet. I took a quick stab at a dark menu bar (basically a partial theme) and am making it available until they release the official dark theme.

You can see my public GitHub repository here.

Please note: I have customized this on a Mac, have only tested it on a Mac, and only built a quick app launcher for macOS. Your results may vary, but feel free to customize it as you see fit!

Quickstart

For those of you on a time crunch that just want to try my little 30 minute hack out, do the following in a fresh directory: (you’ll need node, git, and npm installed to do this)

git clone https://github.com/Mic-B/brave-browser-dark-theme.git ./

Once that completes, run npm install in that directory and wait some more. Who’s excited so far?

After everything is cloned and installed, you’ll need to start two terminals: one to run the background process and one to run the UI. In your first terminal, navigate to the project directory and run npm run watch. Do the same in the second terminal, but run npm start instead.

Wait about 30 seconds or so, and voila! Dark themed Brave. (It needs more theming work, frankly — feel free to submit a pull request if you want to improve it.)

Custom Mac Launcher

At this point, you’re probably saying to yourself “I really don’t want to start two terminals every time I want to use Brave,” which is totally fair. Enter macOS Automator, stage left. If you take a look in the project directory, you should see ‘Brave Dark.app’. This is a quick launcher I made using Automator. Currently it will try to start Brave from ~/Sites/brave (which is where it lives on my computer). You can customize this for your needs as you can see here:

To do this for your computer, ensure you know what path your brave source is in. Open Automator (Applications > Automator) and then select the .app file from our project with it. You should see it open two separate Apple Script buckets, both containing our project path. Replace those project paths, save it, close Automator, and drag that app to the dock. Boom! You now have a clickable icon on your Mac dock that you can use to launch a Dark Themed Brave.

So how does it work?

Brave is written in React native, so it’s built with web technologies. I threw some custom css into the less files and rebuilt it! Easy enough. If you look at the repository on github here you can see all of my modifications.

For a more detailed explanation, I’ve consolidated the changes needed in window.less (…/project-directory/less/window.less) at the top of the file. You can change or modify those as you see fit. If the app is currently running, then npm’s watch routine should pick it up and the app will update on the fly! (You will lose your currently open tabs, however).

So what do you think? Is this the worst hack you’ve ever seen? Did you make a launcher application for windows? Do you think my color scheme is butt? Let me know in the comments below.

Thanks for reading!
Mic-B

Leave a Reply

Your email address will not be published. Required fields are marked *