goldendict-ng/website/docs/topic_userstyle.md
xiaoyifang c8b6a6b6c5
Some checks failed
SonarCloud / Build and analyze (push) Waiting to run
deploy_website / deploy (push) Has been cancelled
Update topic_userstyle.md (#1899)
* Update topic_userstyle.md

* Update topic_userstyle.md

---------

Co-authored-by: shenleban tongying <shenlebantongying@gmail.com>
2024-11-04 21:11:01 +08:00

1.8 KiB

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.

.    <- GD's configuration folder
├── config
├── article-style.css
├── article-script.js
└── qt-style.css

The article-style.css is just standard HTML Style Sheets. 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

You can adjust dark reader mode's parameter by add those lines to article-script.js

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 loaded during startup.

Samples of article-style.css and qt-style.css files can found in GoldenDict's source code at /src/stylesheets

"Addon" Styles

Under GoldenDict's configuration folder, you can create a "styles" folder for "Addon" styles, so that you can switch between multiple article-style.css and qt-style.css.

Folder structure like below will create two “addon” styles to switch in settings -> appearances.

.    <- GD's configuration folder
├── config
└── styles
    ├── dark
    │   ├── article-style.css
    │   └── qt-style.css
    └── light
        ├── article-style.css
        └── qt-style.css