diff --git a/src/article_maker.cc b/src/article_maker.cc
index 8c3e88de..183e29f0 100644
--- a/src/article_maker.cc
+++ b/src/article_maker.cc
@@ -201,6 +201,12 @@ body { background: #242525; }
)";
}
+
+ // load the `article-style.js` in user's config folder
+ if ( auto userJsFile = Config::getUserJsFileName(); userJsFile.has_value() ) {
+ result += fmt::format( FMT_COMPILE( R"()" ), userJsFile.value() );
+ }
+
result += "";
return result;
diff --git a/src/config.cc b/src/config.cc
index 3fa553ba..2372704e 100644
--- a/src/config.cc
+++ b/src/config.cc
@@ -2262,6 +2262,17 @@ QString getUserCssFileName()
return getHomeDir().filePath( "article-style.css" );
}
+std::optional< std::string > getUserJsFileName()
+{
+ QString userJsPath = getHomeDir().filePath( "article-script.js" );
+ if ( QFileInfo::exists( userJsPath ) ) {
+ return userJsPath.toStdString();
+ }
+ else {
+ return std::nullopt;
+ }
+}
+
QString getUserCssPrintFileName()
{
return getHomeDir().filePath( "article-style-print.css" );
diff --git a/src/config.hh b/src/config.hh
index 469d74a6..cd6de6c5 100644
--- a/src/config.hh
+++ b/src/config.hh
@@ -14,6 +14,7 @@
#include
#include "ex.hh"
#include
+#include
/// GoldenDict's configuration
namespace Config {
@@ -807,9 +808,12 @@ QString getHistoryFileName() ;
/// Returns the filename of a favorities file.
QString getFavoritiesFileName() ;
-/// Returns the user .css file name.
+/// Returns the user .css file name (article-style.css).
QString getUserCssFileName() ;
+/// Returns the user .js file name (article-script.js).
+std::optional< std::string > getUserJsFileName();
+
/// Returns the user .css file name used for printing only.
QString getUserCssPrintFileName() ;
diff --git a/website/docs/topic_userstyle.md b/website/docs/topic_userstyle.md
index c21ba4fa..8249093f 100644
--- a/website/docs/topic_userstyle.md
+++ b/website/docs/topic_userstyle.md
@@ -1,7 +1,18 @@
-# User defined stylesheets
+By creating `article-style.css` or `article-script.js` in GoldenDict's configuration folder (beside the `config` file), you can change dictionaries' presentation or inject javascript to dictionaries.
-To change of dictionary articles presentation you can create the file with styles which will be used while articles output. Such file must be named `article-style.css` and placed in GoldenDict configuration folder beside the "config" file. The `article-style.css` is just style sheet file wrote in accordance with standard html style sheet rules. To see a class names used in articles you can call inspector via article context menu.
+The `article-style.css` is just standard HTML [Style Sheets](https://developer.mozilla.org/docs/Web/CSS). To know class or id names used in article, you can open inspector by right click article's body and click `Inspect (F12)`. The inspector's documentation can be found at [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
-Also you can tune GoldenDict interface. To make it you should create the `qt-style.css` style sheet file in GoldenDict configuration folder beside the "config" file. The rules for Qt style sheets you can find here.
+You can adjust dark reader mode's parameter by add those lines to `article-script.js`
-The examples of "article-style.css" and "qt-style.css" files you can find in GoldenDict
\ No newline at end of file
+```javascript
+DarkReader.enable({
+ brightness: 100,
+ contrast: 100,
+ sepia: 0,
+ grayscale: 0,
+});
+```
+
+Also, you can tune GoldenDict's interface by creating `qt-style.css` style sheet file in GoldenDict configuration folder. It is a [Qt Style Sheet](https://doc.qt.io/qt-6/stylesheet-reference.html) loaded during startup.
+
+Samples of `article-style.css` and `qt-style.css` files can found in GoldenDict's source code at [/src/stylesheets](https://github.com/xiaoyifang/goldendict-ng/tree/staged/src/stylesheets)
diff --git a/website/mkdocs.yml b/website/mkdocs.yml
index cd36d956..1b821876 100644
--- a/website/mkdocs.yml
+++ b/website/mkdocs.yml
@@ -38,7 +38,7 @@ nav:
- Special Usages:
- Anki Integration: topic_anki.md
- Command Lines: topic_commandline.md
- - Custom Stylesheets: topic_userstyle.md
+ - Custom Stylesheet & JavaScript: topic_userstyle.md
- Portable Mode: topic_portablemode.md
- Custom transliteration: topic_transliteration.md
- Customize Dictionary Name: custom_dictionary_name.md