Update docs

2 files changed, 50 insertions, 6 deletions

diff --git a/docs/custom.md b/docs/custom.md
index d957cad..4704380 100644
--- a/docs/custom.md
+++ b/docs/custom.md
@@ -8,12 +8,14 @@ Before customization, you need to add the related fields to your configuration,
 [params]
   [params.advanced]
     customCSS = ["css/custom.css"] # files in the list will be loaded in order
+    customJSBefore = ["js/custom-before.js"]
     customJS = ["js/custom.js"]
 ```
 
 ## CSS
 
-It’s very easy to change the theme through CSS. Dream theme base on [Semantic UI](https://semantic-ui.com/), and nearly all the custom classes start with the `dream-` prefix. So in most cases, you only need to customize in these two ways:
+It’s very easy to change the theme through CSS. Dream theme base on [Semantic UI](https://semantic-ui.com/), and nearly
+all the custom classes start with the `dream-` prefix. So in most cases, you only need to customize in these two ways:
 
 - **Override Semantic UI classes**
 - **Override Dream specified classes** (Can be found in [site.scss](https://github.com/g1eny0ung/hugo-theme-dream/blob/master/src/sass/site.scss))
@@ -64,3 +66,42 @@ Due to the Dream theme use Semantic UI `.ui.inverted` as the color of dark mode,
 ```
 
 ## JS
+
+By customizing JS, you can manipulate the whole theme more freely. For example, some params will output to the global
+so you can achieve custom behaviors through them.
+
+Here are the current output params (Can be found in [footer.html](https://github.com/g1eny0ung/hugo-theme-dream/blob/master/layouts/partials/footer.html)):
+
+```js
+window.background = {{ .Site.Params.background }}
+window.defaultDark = {{ .Site.Params.defaultDark }}
+window.backgroundDark = {{ .Site.Params.backgroundDark }}
+window.backgroundImageDark = {{ .Site.Params.backgroundImageDark }}
+window.darkNav = {{ .Site.Params.darkNav }}
+window.maxTags = {{ .Site.Params.maxTags }}
+window.hasTwitterEmbed = {{ .Site.Params.hasTwitterEmbed }}
+window.fixedNav = {{ .Site.Params.fixedNav }}
+```
+
+But mostly, you only need to insert the function into the reserved interface.
+
+Here are some examples:
+
+### inject functions into theme switching
+
+You can add custom functions into `window.darkFunctions` to call them when switching the theme:
+
+```toml
+[params]
+  [params.advanced]
+    customJSBefore = ["js/custom-before.js"]
+```
+
+```js
+// js/custom-before.js
+function darkFunc() {
+  console.log(`Now in ${window.isDark === 'y' ? 'dark' : 'light'} mode`)
+}
+
+window.darkFunctions = [darkFunc]
+```
diff --git a/docs/params-configurations.md b/docs/params-configurations.md
index c3c9651..0704995 100644
--- a/docs/params-configurations.md
+++ b/docs/params-configurations.md
@@ -69,7 +69,8 @@
 
   [params.advanced]
     customCSS = ["css/custom.css"]
-    customJS = []
+    # customJSBefore = []
+    # customJS = []
 
   [params.experimental]
     jsDate = true
@@ -270,13 +271,15 @@ Make navbar fixed when scrolling.
 
 Add your custom CSS files after the theme CSS files.
 
-For example, create a folder named `css` under `static`, then add `custom.css` in it.
+For example, create a folder named `css` under `static`, then add `custom.css` into it.
 
-### customJS = []
+### customJSBefore = []
+
+Like `customCSS`, add your custom JS files **before** the theme JS files.
 
-Add your custom JS files.
+### customJS = []
 
-Same as `customCSS`, except all custom JS files will be placed after the theme JS files.
+Like `customJSBefore`, add your custom JS files **after** the theme JS files.
 
 ## Experimental