DocsAfterDark

A free and open-source browser extension for customizing the appearance of Google Docs.

Features

• Modern, sleek dark mode
• Colorful light mode
• Customizable accent color
• Quick toggle button
• Accessible settings popup

Customization

• Choose between Normal and Midnight dark mode variants
• Change the highlight accent color hue for both dark and light mode
• Set the document background (may be unstable on Chromium-based browsers)
  • Default - white
  • Shade - tinted in light mode
  • Blend - transparent
  • Black - #000000
  • Custom - specify your own CSS value
• Display document content in dark mode with invert options (may invert images)
• Remove the document border for a seamless workspace
• Disable or move the toggle button

Quick toggle button

If enabled, click the button in the bottom-left corner of the screen to instantly enable/disable the extension for the current document.

If it blocks other elements (like the word count widget), enable "Raise Button" in settings or hide it completely. Pressing this button only temporarily enables/disables the extension; to properly turn the extension off, use the settings popup.

Installation

Install from the Chrome Web Store or Firefox Add-ons.

Development

Prerequisites

• Node.js
• npm
• Firefox (optional, for hot-reload testing)

Setup

Install dependencies

npm install

Running

Build and watch

npm run dev

Changes to src/ will automatically rebuild to build/. Changes to webpack.config.cjs require restarting the dev script.

Firefox with hot-reload

npm run firefox

Launches a temporary Firefox instance with the extension installed. The extension automatically reloads when files in build/ change.

Note: The Firefox profile is temporary and will not persist logins (on docs.google.com, for example) between sessions.

Testing

Check formatting and lint

npm run check

This is also performed as a GitHub Action workflow. Pull requests must pass these checks before being merged.

Building

Build and package

npm run build

This creates optimized bundles in build/ and packages the extension as a .zip file in release/. The packaging process is handled by package.ts and reads the version from src/manifest.json.

Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

License

This project is open-source and available under the GNU GPLv3 License.