Skip to content

Commit

Permalink
Merge pull request #97 from doki-theme/v74.2-2.0.0-switch
Browse files Browse the repository at this point in the history 
v74.2-2.0.0 [Synapse break. Vanishment, this world!]
  • Loading branch information
@Unthrottled
Unthrottled authored Mar 12, 2022
2 parents 1d88150 + def60ef commit 70fa803
Show file tree
Hide file tree
Showing 3,867 changed files with 60,626 additions and 62,052 deletions.
The diff you're trying to view is too large. We only load the first 3000 changed files.
18 changes: 17 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,23 @@
Changelog
---

# Unreleased
# v74.2-2.0.0 [Synapse break. Vanishment, this world!]

**4 New Dark Themes!**

- Decimate errors in the code alongside the Wicked Lord Shingan. Let your inner fantasies go rampant with Rikka Takanashi from: "Love, Chuunibyou, and Other Delusions".
- It is comfy time! Don't let feature requests stress you out, because you can now code with Nadeshiko from Yuru Camp.
- A Certain Scientific RailGun go: bzzzzzzt. Zap bugs out of existence with the electromaster Mikoto Misaka.
- Raccoon + Tanuki = one really cute cinnamon bun. Enjoy your time coding with Raphtalia from: "Rising of the Shield Hero."

![v74 Girls](https://doki.assets.unthrottled.io/misc/v74_girls.png)

### Other Stuff

- Moved the Firefox extension [from doki-theme-web](https://github.com/doki-theme/doki-theme-web) to [doki-theme-firefox](https://github.com/doki-theme/doki-theme-firefox).
- Removed the `masterExtension` in favor of a `theme` and `newTab` theme specific extension for both Edge & Chrome.
- Any maintainer now has the ability successfully run a build, no private dependencies now.
- Updated extension to use centrally defined asset anchoring data.

# 18.1.0 [Opt-In FireFox Features]

Expand Down
74 changes: 62 additions & 12 deletions CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ Contributing

- [Build Process](#build-process-high-level-overview)
- [Getting Started](#getting-started)
- [Dev Notes](#dev-notes)
- [Editing Themes](#editing-themes)
- [Creating New Themes](#creating-new-themes)

Expand All @@ -29,7 +30,6 @@ more familiar with the process as a whole.

- Yarn package manager
- Node 14
- Firefox
- Chrome
- Microsoft Edge

Expand Down Expand Up @@ -63,12 +63,22 @@ on Windows, have you considered Linux? Just kidding (mostly), you'll need to run
```shell
git clone https://github.com/doki-theme/doki-master-theme.git masterThemes
```
**Get the Assets**

In the same parent folder as `doki-theme-web` you'll need to clone the `doki-theme-assets` repository, that way the
build script can copy the correct assets so they can be bundled with the plugin.

```shell
git clone https://github.com/doki-theme/doki-theme-assets.git
```


Your directory structure should have at least these directories, (there will probably be more, but these are the
important ones to know).

```
your-workspace/
├─ doki-theme-assets/
├─ doki-theme-web/
│ ├─ masterThemes/
│ ├─ buildSrc/
Expand All @@ -93,6 +103,50 @@ This will install all the required dependencies to run the theme build process.

You should be good to edit and add themes after that!

# Dev Notes

Running the `pluginSource` application is a two step process.

Make sure to have installed `web-ext` globally

```shell
npm i -g web-ext
```

Then to run the extension in a browser just run this in `pluginSource` directory:

```shell
web-ext -s .\dist run --target chromium
```

To have changes live reload, in the `pluginSource` run dis:

```shell
npm run watch
```

Note: Before running

```shell
yarn buildThemes
```

You'll need to build the extension in `pluginSource` first.

Make sure that the dependencies are installed

```shell
npm install
```

Then you can run

```shell
npm run build
```

After that, `yarn buildThemes` should work as expected :)

## Theme Editing Process

I have too many themes to maintain manually, so theme creation/maintenance is automated and shared common parts to
Expand All @@ -112,25 +166,25 @@ Inside the `buildSrc` directory, there will be 2 directories:
things.

The `buildSrc` directory houses a `buildDefinitions` script that generates the application specific files necessary for apply
the Doki Theme Suite. (**NOTE** you can't run `buildThemes` only I can, sorry!)
the Doki Theme Suite.

### Web specifics

There are two files of importance. They can be found in `buildSrc/assets/templates`. The files, `*.template`, are
the templates for common CSS that used for all themes.
the templates for common information that used for all themes.

These templates are evaluated as part of the theme building process. When you run this command in the `buildSrc`
directory:

```shell
yarn buildDefinitions
yarn buildThemes
```

This will:

- build out the `firefox` and `chrome` manifest templates
- Create the tab images for the chrome themes
- Build the `DokiThemeDefinitions.ts` for both the `masterExtension` and Firefox extension.
- build out the `chrome` manifest templates
- Create the tab images for the chrome themes, themed plugin icons, and probably more stuff since I've written this.
- Build the `DokiThemeDefinitions.ts` for both the `pluginSource` extension.

Sometimes a particular theme has something that is just a bit off. Thankfully, there is a way to fix small one-off
issues.
Expand All @@ -140,7 +194,6 @@ defaults provided by the `masterThemes`

Here is an example that overrides the following:

- The background placement
- Search bar text color

```json
Expand All @@ -150,9 +203,6 @@ Here is an example that overrides the following:
"theme": {
"colors": {
"omnibox_text": "&accentColorDarker&"
},
"properties": {
"ntp_background_alignment": "right"
}
}
},
Expand Down Expand Up @@ -215,7 +265,7 @@ yarn generateTemplates

The code defined in the `buildSrc/src` directory is part of the common Doki Theme construction suite. All other plugins
work the same way, just some details change for each plugin (especially for this plugin). This group of code exposes
a `buildDefinitions` node script (**NOTE** you can't run `buildThemes` only I can, sorry!).
a `buildThemes` node script.

This script does all the annoying tedious stuff such as:

Expand Down
178 changes: 30 additions & 148 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,44 @@
# Doki Theme Web
| Google Chrome | Microsoft Edge | Mozilla Firefox |
|----------------------------------------------------------|-----------------------------------------------------|-------------------------------------------------------------------|
| ![Megumin Chrome](./screenshots/backgrounds/megumin.png) | ![Rem Edge](./screenshots/backgrounds/rem_edge.png) | ![Aqua FireFox](./screenshots/backgrounds/firefox_background.png) |
| Google Chrome | Microsoft Edge |
|-----------------------------------------------------------------|---------------------------------------------------------|
| ![Yotsuba Chrome](./screenshots/backgrounds/yotsuba_chrome.png) | ![Azuki Edge](./screenshots/backgrounds/azuki_edge.png) |

# Table of Contents

**Note**: Doki Theme for Firefox [has been moved to another repository](https://github.com/doki-theme/doki-theme-firefox).

- [Feature Set](#feature-set)
- [Master Extension](#master-extension)
- [Firefox Features](#firefox-features)
- [General Settings](#firefox-general-settings)
- [Theme Settings](#firefox-theme-settings)
- [Match Device Option](#match-device-option)
- [Druthers Option](#druthers-option)
- [Light Only Option](#light-only-option)
- [Dark Only Option](#dark-only-option)
- [All Option](#all-option)
- [Installation](#installation)
- [Demonstration Overview](#demonstration-overview)
- [Google Chrome](#google-chrome)
- [Microsoft Edge](#microsoft-edge)
- [Mozilla Firefox](#mozilla-firefox)
- [Possible Issues](#possible-issues)
- [Light Theme Tab Text](#light-theme-tab-text)
- [Contributions and Issues](#contributions-and-issues)


# Feature Set
## Master Extension

Want to enhance your browsing experience? Then this plugin is for you! This extension will modify
the CSS of every webpage you visit to match your current theme choices.

Things that are currently changed:
- Selection foreground/background
- Scrollbars

# FireFox Features
## Firefox: General Settings

***Load Doki Theme page on startup*** allows the plugin to automatically start up the browser with
the empty Doki Theme tab, which shows your current theme's character!

_Note:_ Enabling this will overwrite the **Open previous windows and tabs** feature in your
Firefox Settings. [See GitHub issue for more info](https://github.com/doki-theme/doki-theme-web/issues/51).

![Firefox settings](./screenshots/firefox_config.png)

***Text Selection*** overrides the default text selection colors to match the current Doki Theme.

**Scrollbar** themes the current tab's scrollbars to match the Doki Theme standard scrollbar color.
Because Chrome & Edge are jerks, I need to provide 2 extensions:
- One to theme your browser
- One to modify the contents of your active tab & Theme your New tab.

## FireFox: Theme Settings
The Doki Theme for FireFox can synchronize with your device theme settings.
**Theme Extension**

Never want to see light mode ever again? No problem! The *Options page* now allows you to choose
between `light`, `dark`, `device`, `druthers`, or `all` *(all themes)*. So take your time and
browse.
This makes your browser look and feel like it is part of the Doki Theme.

### Match Device Option
`device` will load only themes based on your current device theme settings *(either light or dark)*.
In other words, your device settings determines what characters are present in the popup menu.
**New Tab Extension**

#### With Random Select *(Dark System Setting)*
https://user-images.githubusercontent.com/23222943/146148772-c7e236ed-6be6-46b6-ac2d-aa3f1b1326ca.mp4
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.

#### With Mixed Mode *(Light System Setting)*
https://user-images.githubusercontent.com/23222943/146149663-22ad428e-0cc7-45f8-9700-1fc4c6f616d2.mp4

### Druthers Option
`druthers` is similar to `device` except the character chosen for the light theme and the
character chosen for the dark theme will alternate depending on your current device settings.

For clarity, if I choose *Maple* for the **light theme** & *Jahy-sama* for the **dark theme**.
If the device setting is **currently dark**, then *Jahy-sama's* theme will show. If the device
setting is *light*, then *Maple's* theme will show.

#### Example
https://user-images.githubusercontent.com/23222943/146766085-ecb1b416-a678-4cbc-a75c-44c7fb5b32de.mp4

### Dark Only Option
`dark` will load only dark themes. The popup menu will only load dark themes. This is for all you
dark theme lovers out there!

### Light Only Option
`light` will load only light themes. The popup menu will only load light themes. This is for all
you light theme lovers out there!
### Configuration

### All Option
`all` is the default settings of Doki Theme. All themes will be present.
You can configure the extension by opening the popup menu & clicking:
- The Doki Theme logo located at the top.

# Installation
## Demonstration Overview
![Theme Usage](./screenshots/chrome_usage.gif)

> This process demonstrates local installation.
> You should be able to install these themes from the Chrome store soon!
## Demo Steps
1. Install Emilia Dark's theme.
1. Use the Master Extension popup to change how CSS is altered github.
1. See that scroll bar and selection colors are now themed.
1. Install Rem's theme.
1. Use the Master Extension options to change how CSS is altered.
1. Demonstrate that old css alteration is still present.
1. Refresh
1. Observe that updated css alterations are now present.

## Google Chrome
Ideally, this plugin should be distributed by the **Chrome web store**.
Until then, you'll have to do a local installation.

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

### Steps
1. Clone this repository
Expand All @@ -116,77 +47,28 @@ Until then, you'll have to do a local installation.
- The Extension Management page can also be opened by clicking on the Chrome menu, hovering over More Tools then selecting Extensions.
1. Enable Developer Mode by clicking the toggle switch next to Developer mode.
1. Click the LOAD UNPACKED button and select the extension directory.
![Load unpacked](https://developer.chrome.com/static/images/get_started/load_extension.png)
1. Navigate to the cloned repository
1. To install a theme, go to `chromeThemes` and just select the theme directory you want and `open` or confirm.
1. To install the master extension, go to `masterExtension` and just select the `installable_extension` directory and `open` or confirm.
1. To install a theme, go to `chromeThemes` and just select the theme directory you want.
1. Then choose the `newTab` directory and `open` or confirm. Repeat this process for the `theme` extension.
1. Enjoy!

## Microsoft Edge
Ideally, this plugin should be distributed by the **Microsoft Edge Add-on store**.
Until then, you'll have to do a local installation.

### Prerequisites
- Edge v83.0.471.0 or above [consider downloading the canary/dev version](https://www.microsoftedgeinsider.com/en-us/download)
https://user-images.githubusercontent.com/15972415/157995436-98b957e0-1274-4f65-934d-27b857792ec7.mp4

### Steps
1. Clone this repository
1. Open Edge
1. Open the Extension Management page by navigating to edge://extensions.
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.
1. Enable Developer Mode by clicking the toggle switch next to Developer mode (1).
1. Click the LOAD UNPACKED button and select the extension directory (2).
![Load unpacked](./screenshots/edge_install.png)
1. Navigate to the cloned repository
1. To install a theme, go to `edgeThemes` and just select the theme directory you want and `open` or confirm.
1. To install the master extension, go to `masterExtension` and just select the `installable_extension` directory and `open` or confirm.
1. Navigate to a new empty tab in the browser.
1. Select the settings in the upper right-hand corner.
1. Choose `Custom` layout.
1. Choose `Your own image` and upload your chosen background.
- You can find background images in the `chromeThemes` directory [here is Rem's 1920x1080.](https://github.com/doki-theme/doki-theme-web/blob/master/chromeThemes/Rem's%20Theme/images/rem.png)
![Setting Background](./screenshots/edge_background.gif)
1. Enjoy!

## Mozilla Firefox
There are *2* ways to install this extension.

### Prerequisites
- Mozilla Firefox 95 or above

### Mozilla's Add-on Store
You can install the extension from the [FireFox addon marketplace.](https://addons.mozilla.org/en-US/firefox/addon/doki-theme-for-firefox/)

### Manual Installation
If you don't feel like installing the addon from the store, then follow the below steps.

#### Steps
1. Clone this repository
2. Open Firefox
3. Type in the search bar `about:debugging`
4. Select *This Firefox* and click *Load Temporary Add-on...*
5. Choose the *manifest.json* file in the Firefox directory
6. Now, select the doki-theme icon on the toolbar & Choose a theme to load
7. And that's it!

***Warning:*** This is a temporary way of installing *Doki Theme*. Everytime the browser is closed, the extension
must be reinstalled again using these steps.

### Configuration

You can configure the extension by opening the popup menu & clicking:
- The Doki Theme logo located at the top.

**OR**
- The`Show Settings` link located at the bottom.
4. Enable Developer Mode by clicking the toggle switch next to Developer mode (1).
5. Click the LOAD UNPACKED button and select the extension directory (2).
6. Navigate to the cloned repository
1. To install a theme, go to `edgeThemes` and just select the theme directory you want.
1. Then choose the `newTab` directory and `open` or confirm. Repeat this process for the `theme` extension.
7. Enjoy!

# Possible Issues
## Light Theme Tab Text
- [How to fix](https://github.com/doki-theme/doki-theme-web/wiki/Firefox-light-themes) issue

| before | after |
|-------------------------------------------------------|-----------------------------------------------------|
| ![before fix](./screenshots/firefoxIssues/before.png) | ![after fix](./screenshots/firefoxIssues/after.png) |


# Contributions and Issues
Expand Down
Loading

0 comments on commit 70fa803

Please sign in to comment.