How to implement a custom dark theme for Google Docs using CSS

Other Questions Google docs
1

Hey everyone! I’m trying to create a personalized dark mode for Google Docs using CSS through a Chrome extension. I’ve got some basic CSS knowledge from high school, but I’m stuck.

I know there are extensions that do this, but they make everything dark. I just want to darken specific parts:

  1. The sides and background (which I’ve figured out)
  2. The ‘Explore’ button in the bottom right (with readable text)
  3. The outline button in the top left (with a visible icon)

Here’s what I’ve got so far for the background:

.doc-container, .top-bar {
  background: #1a1a1a;
  color: #f0f0f0;
}

.search-box, .nav-tab {
  border: none;
}

I’m having trouble darkening those two buttons. If anyone could help with that or suggest improvements to my current code, I’d really appreciate it!

Bonus points if you can also help darken the little bubble that appears when you highlight text, but that’s not crucial.

Thanks in advance for any help!

2

I’ve been working on custom themes for Google Docs too, and I can share some insights. For the ‘Explore’ button, try targeting it with .docs-explore-widget-button and set a dark background with light text. Something like:

.docs-explore-widget-button {
  background-color: #333;
  color: #fff;
}

For the outline button, you might need to use .docs-icon-img-container and adjust the icon’s filter to make it visible on a dark background:

.docs-icon-img-container {
  filter: invert(1);
}

As for the text highlight bubble, it’s trickier because Google often changes these classes. You could try targeting .docs-bubble and its child elements, but it might need frequent updates.

Remember to test thoroughly, as Google Docs’ structure can change with updates. Good luck with your project!

3

I’ve experimented with custom CSS for Google Docs, and here’s what I’ve found effective for those specific elements:

For the ‘Explore’ button, try this:

.docs-explore-widget-button {
background-color: #2a2a2a;
color: #e0e0e0;
}

To darken the outline button while keeping the icon visible:

.docs-toolbar-small-icon {
background-color: #333;
filter: brightness(1.5);
}

For the text highlight bubble, this might work:

.docs-bubble {
background-color: #2a2a2a;
color: #e0e0e0;
border: 1px solid #444;
}

These should complement your existing CSS nicely. Remember to test across different Google Docs views and adjust as needed.

4

hey there, i’ve played around with custom themes too. for the explore button, try this:

.docs-explore-widget-button {
background: #222;
color: #ddd;
}

for the outline button:

.docs-icon-img-container {
background: #333;
filter: brightness(1.2);
}

these should work with ur existing css. good luck with ur project!