doki-theme / doki-theme-web

Cute anime character themes for your Chrome, Edge, & Brave browser.
MIT License
158 stars 14 forks source link
anime chrome chrome-extension chrome-theme microsoft-edge-extension theme themes

Doki Theme Web

Google Chrome Microsoft Edge Brave
Yotsuba Chrome Azuki Edge Hatsune Miku Brave

Table of Contents

Note: Doki Theme for Firefox has been moved to another repository.

Feature Set

Because Chrome & Edge are jerks, I need to provide 2 extensions:

Theme Extension

This makes your browser look and feel like it is part of the Doki Theme.

New Tab Extension

This extension overrides your New Tab, and replaces it with a tab whose background has the official Doki Theme asset. It also can inject styles into ever tab to theme the: Scroll Bar & Selection text, to match your selected theme.

Configuration

You can configure the extension by opening the popup menu & clicking:

Installation

Google Chrome

https://user-images.githubusercontent.com/15972415/157995434-30b5bdfc-b005-416f-a3fa-4bfdf72bc1be.mp4

Steps

  1. Clone this repository
  2. Open Chrome
  3. Open the Extension Management page by navigating to chrome://extensions.
    • The Extension Management page can also be opened by clicking on the Chrome menu, hovering over More Tools then selecting Extensions.
  4. Enable Developer Mode by clicking the toggle switch next to Developer mode.
  5. Click the LOAD UNPACKED button and select the extension directory.
  6. Navigate to the cloned repository
    1. To install a theme, go to chromeThemes and just select the theme directory you want.
    2. Then choose the newTab directory and open or confirm. Repeat this process for the theme extension.
  7. Enjoy!

Microsoft Edge

https://user-images.githubusercontent.com/15972415/157995436-98b957e0-1274-4f65-934d-27b857792ec7.mp4

Steps

  1. Clone this repository
  2. Open Edge
  3. Open the Extension Management page by navigating to edge://extensions.
    • The Extension Management page can also be opened by clicking on the Edge menu, hovering over More Tools then selecting Extensions.
  4. Enable Developer Mode by clicking the toggle switch next to Developer mode.
  5. Click the LOAD UNPACKED button and select the extension directory.
  6. Navigate to the cloned repository
    1. To install a theme, go to edgeThemes and just select the theme directory you want.
    2. Then choose the newTab directory and open or confirm. Repeat this process for the theme extension.
  7. Enjoy!

Brave

https://user-images.githubusercontent.com/15972415/163989146-c755797c-8686-43ff-9281-407074255e70.mp4

Steps

  1. Clone this repository
  2. Open Brave
  3. Open the Extension Management page by navigating to brave://extensions.
    • The Extension Management page can also be opened by clicking on the Brave menu, then selecting Extensions.
  4. Enable Developer Mode by clicking the toggle switch next to Developer mode.
  5. Click the LOAD UNPACKED button and select the extension directory.
  6. Navigate to the cloned repository
  7. To install a theme, go to braveThemes and just select the theme directory you want.
  8. Then choose the newTab directory and open or confirm. Repeat this process for the theme extension.
  9. Enjoy!

Contributions and Issues

Got Contributions, fun ideas, or issues? Keep in mind, the Chromium platform has a fairly limited feature set, however, I'll do my best to accommodate. Submit an issue.

Not your thing or something bothering you? Feel free to submit your feedback.

Help make these extensions better!

Dev Setup

Please see the contributing file for development concepts and setup.

Enjoying the plugin?

Great! I am glad you like it!

Be sure to share it with others who also may enjoy it as well!