How to customize a night theme for Google Docs with CSS

Other Questions Google docs
1

Hey everyone! I’m trying to make a custom night mode for Google Docs using CSS. I’m using a Chrome extension that lets me add custom CSS. My CSS skills are pretty basic though.

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

  1. The sides and background (I’ve figured this 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: #222;
  color: #fff;
}

.search-box, .jump-to-box, .copy-doc-button, .nav-tab {
  border: none;
}

I’m stuck on how to style those two buttons. If anyone knows how to darken the text highlight bubble too, that’d be awesome!

Any tips or improvements would be super helpful. Thanks!

2

hey, i’ve messed with google docs css before. for the explore button, try .docs-explore-widget-button { background: #333; color: #ddd; }. outline button is trickier, maybe .docs-toolbar-small-icon { filter: invert(1); } to invert the icon color. text highlight bubble could be .docs-bubble { background: #444; color: #eee; }. hope this helps!

3

As someone who’s spent countless hours tweaking Google Docs’ appearance, I can relate to your quest for the perfect night mode. For the ‘explore’ button, you might want to try something like:

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

For the outline button, this worked for me:

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

Don’t forget about the text highlight bubble. This should make it more night-mode friendly:

.docs-bubble {
background-color: #333;
color: #ddd;
border: 1px solid #555;
}

Remember, Google often updates their CSS classes, so you might need to adjust these periodically. Keep experimenting and you’ll find the perfect balance for your night mode setup!

4

I’ve been experimenting with custom CSS for Google Docs too, and I can share some insights. For the ‘explore’ button, try targeting it with ‘.docs-explore-widget-button’ and adjust its background and text color. The outline button might be trickier, but ‘.docs-icon-img-container’ could work for the icon.

As for the text highlight bubble, look for ‘.docs-bubble’ in the CSS. You might need to play around with its child elements to get the right effect.

Remember, Google’s class names can change, so you might need to inspect the elements periodically to ensure your CSS still works. Also, be cautious with custom CSS as it could potentially break functionality if not done carefully. Good luck with your night mode project!