Goldendict: GoldenDict Dark Theme

[babygau]

Hi guys,

I've been a GoldenDict long time user and I'm a big fan of Dark Color scheme. So I decided to make a Dark Theme for Golden Dict. It tooks me quite long time to figure out how to do it. I think I should share it here with anyone of interest:

You can download it here

If you have better idea, feel free to give me feedback.

Note: I'm not a Web Designer so my knowledge of CSS is quite limited

Here is the screenshot:

[nevdelap]

Excellent! Thank you for doing this, and sharing it.

[suhaaksoz]

Some colors dazzling on dark backgroud (like bright red). Can you use more pastel?

[babygau]

hi there, sorry for late reply. the color scheme depends on the dictionary you are using. let me know the name of the dict and i will see

[saostad]

How can I use it in windows?

[itkind]

saostad
First you download the zip file by babygau, which is here

Open Goldendict, than >help, than >configuration folder
A new folder will open with a path like this : C:UserssaostadApplication DataGoldenDict

Drag the file qt-style.css into this folder.
Than go to the folder >styles
Create here a new folder and name it darkmode, or whatever you like.
Put the article-style.css into this newly created folder.

Open Goldendict, go to >preferences
in the left corner you will see Add-on style.
Choose the darkmode style.

babygau
Thank you!

[MB-Gesse]

Thanks a lot!

[iwillneverstop]

@babygau: I'm using v1.0.1 portable on Windows. I cannot follow your instructions :( There is no Help->Configuration.

I like the dark mode very much.

[simcap71]

Really useful, well done!
Thank you a lot.

[Aporue76]

Thank you for your CSS style sheets, I've been using them for some time now. I just have one request for you.. In the later Goldendict version, there is a new section or pane called Favorites. Can you please tell us how to make that new pane dark as well, using the qt-style.css file? I just can't figure it out so I would appreciate your help very much.

[sikmir]

Thank you a lot! That's what I was looking for.

[sikmir]

@Aporue76 Just add MainWindow #favoritesPane #favoritesTree.

[Aporue76]

@sikmir That's it! Thank you so much. May I ask you how you found out? Was that just a trial-and-error method or you knew where to look?

[sikmir]

@Aporue76 Find-and-grep method :)

$ find goldendict -name '*.css' -exec grep -i "Favorite" {} \; -print
MainWindow #historyPane #historyList, MainWindow #favoritesPane #favoritesTree
./qt-style-st-lingvo.css
MainWindow #historyPane #historyList, MainWindow #favoritesPane #favoritesTree
./qt-style-st-babylon.css
MainWindow #historyPane #historyList, MainWindow #favoritesPane #favoritesTree {
./qt-style-st-lingoes-blue.css
MainWindow #historyPane #historyList, MainWindow #favoritesPane #favoritesTree
./qt-style-st-modern.css
MainWindow #translateLine, ScanPopup #translateLine, MainWindow #wordList, MainWindow #dictsPane #dictsList, MainWindow #historyPane #historyList, MainWindow #favoritesPane #favoritesTree
./qt-style.css

[Aporue76]

That's brilliant. I spent at least two hours looking for some clues and nothing. I have a lot to learn.. Thanks.

[intika]

amazing, thanks ! (changed the orange to blue... color: #6bc0ff;)

[linuxergr]

Hi,

I have downloaded, and extracted qt-style.css in ~.goldendict and article-style.css in ~.goldendict/styles/Darkmode/ on Linux...

I cannot still "see" the theme on my goldendict options....

Am I missing something?

The left and right column are dark but not the main (center) one...

[linuxergr]

I have fogotten the "AddOn" part....

Ok fixed...

[SunicYosen]

Well done! Thanks for your sharing!

[Symbian9]

Is there a method for change colors of input and drop-down fields? (look on «Type a word or ...» field)

[SunicYosen]

@Symbian9 Of course! The picture above without using "Add-on" part.

[Symbian9]

The picture above without using "Add-on" part.

Is there final version of "GoldenDict Dark Theme" with "Add-on" part for downloading?

[SunicYosen]

https://github.com/goldendict/goldendict/issues/719#issuecomment-281310279
You can follow 'itkind' in this issue.

[Symbian9]

You can follow 'itkind' in this issue.

Well, this instruction is not complete yet. So, here is more detailed instruction:

1. Download GoldenDict Dark Theme edited by @ilius:
   
   
   
   • https://gist.github.com/ilius/5a2f35c79775267fbdb249493c041453/
   
   
2. Open GoldenDict menu "Help → Configuration folder". A new folder will open with a path like this:
   
   
   
   • for Windows — C:\Users\<account_name>\Application Data\GoldenDict\
   
   
   • for Linux — /home/<account_name>/.goldendict/
   
   
3. Drag file qt-style.css into this folder.
4. Then go to the sub-folder styles:
   
   
   
   • for Windows — C:\Users\<account_name>\Application Data\GoldenDict\styles\
   
   
   • for Linux — /home/<account_name>/.goldendict/styles/
   
   
5. Create here a new folder and name it dark-theme (or whatever you like):
   
   
   
   • for Windows — C:\Users\<account_name>\Application Data\GoldenDict\styles\dark-theme\
   
   
   • for Linux — /home/<account_name>/.goldendict/styles/dark-theme/
   
   
6. Put the article-style.css into this newly created folder.
7. Open GoldenDict menu "Preferences... → Interface":
   
   
   
   • Set "Add-on style" to dark-theme;
   
   
   • Set "Display style" to Default.
   
   
8. If you use Linux, you also should enable some dark style for desktop via "Settings → Appearance" (depend on each Linux distributive). For example, I enable Blackbird style under MX Linux (Debian 9.x):
   
   
   
   • https://github.com/shimmerproject/Blackbird
   
   
9. Relaunch GoldenDict to take effect! 🎉

[Symbian9]

Now instruction available as wiki-page:

• https://github.com/goldendict/goldendict/wiki/GoldenDict-Dark-Theme

[zheyuanWang]

amazing! Dude, this is why we want to learn coding!

[gajewsk2]

Is there a way to inject JS the same way we did with css?
Like some sort of article.js

[zT2Dz]

I have a dictionary which its text color is still black so it's really difficult to read
Could you please help me?

[washere]

Actually the theme by babygao does not make the favorites panel (in Early Access Developer Build) dark. But the modification by ilius does, so I use this, download both CSS files in his zip:

https://gist.github.com/ilius/5a2f35c79775267fbdb249493c041453/

[washere]

in the file by ilius:

article-style.css

line 9, I changed the font to below:

font-family: Segoe UI, Tahoma, Verdana, Arial Unicode MS;

MUCH BETTER and can also make smaller while clear & taking less space

[Symbian9]

But the modification by ilius does

@washere , this already described in wiki

• https://github.com/goldendict/goldendict/wiki/GoldenDict-Dark-Theme

Fell free to improve and/or extend this wiki-page.

[washere]

But the modification by ilius does

@washere , this already described in wiki

• https://github.com/goldendict/goldendict/wiki/GoldenDict-Dark-Theme

Fell free to improve and/or extend this wiki-page.

@Symbian9
I think most people would not read it there, so I mentioned it here.
However the favorites panel, not being dark in babygao but dark in ilius, is not mentioned in your link.
In fact favorite is not found there at all.

[washere]

I asked for a new style:

Lingoes Black

in an issue I opened to make Goldendict truly Dark for Windows.

"Lingoes Black" Style for Windows (Feature Request) #1142

[itkind]

How to change the color when you select dictionaries? For example if you are doing a full text search you get the result in different dictionaries. How do you know which dictionary is displayed know? GD marks in the dictionary panel the dictionary you are reading now. But with the dark mode the selection is as dark as the background. Is there any possibility to change the color of the selection ?

[Symbian9]

Hi, does anyone have an idea how to change the colour of hyperlinks in .slob files (dictionaries for Aard 2)? The CSS selector a:link has no effect on the .slob file for some reason.

@Abs62, could you explain how links from .slob colored in GoldenDict via themes? OR colors in .slob are built-in?

@itkach, is there minimal sample file of .slob dictionary with all format/markup features included for testing purpose?

[Aporue76]

Hi, does anyone have an idea how to change the colour of hyperlinks in .slob files (dictionaries for Aard 2)? The CSS selector a:link has no effect on the .slob file for some reason.

@Abs62, could you explain how links from .slob colored in _GoldenDict_ via themes? OR colors in .slob are built-in?

@itkach, is there minimal sample file of .slob dictionary with all format/markup features included for testing purpose?

Hi, sorry, I deleted the question as I figured it out and didn't think the answer would be useful to anyone. The only thing I had to do is to add !important right after the CSS value:
a:link
{
color: orange !important;
}

[Symbian9]

I figured it out and didn't think the answer would be useful to anyone. The only thing I had to do is to add !important right after the CSS value:

a:link
{
color: orange !important;
}

Thanks, I don't know about this tag. Does it override links rendering rules in all formats?

[Aporue76]

I figured it out and didn't think the answer would be useful to anyone. The only thing I had to do is to add !important right after the CSS value:

a:link
{
color: orange !important;
}

Thanks, I don't know about this tag. Does it override links rendering rules in all formats?

I use all kinds of formats and it works for all of them.
This is my dark theme:

body, .slobdict, div.thumb
{
  margin-top: 1px;
  margin-right: 3px;
  margin-left:  2px;
  margin-bottom: 3px;
  background: #091007 !important;
  border-color: #091007 !important;
  color: #F5F4ED !important;
  font-family: 'Calibri' !important;
  font-size: 15px;
}

tbody, td, th
{
  background: #17270F !important;
  color: #F5F4ED !important;
}

a:link
{
  color: #A0DC7F !important;
}

ul
{
  color: #e0e0e0;
}

.gdarticle
{
  background: #091007;
  color: #e0e0e0 !important;
  margin-top: 0.1em;
  margin-bottom: 0.4em;
  padding: 5px;
  border: 1px solid white;
}

.gdactivearticle
{
  border: 1px solid #3399FF;
}

.gdarticleseparator + script + .gdactivearticle .gddictname
{
  border-top: 1px solid #3399FF;
}

.gdarticleseparator
{
  display: none;
}

.gddictname
{
  font-size: 14px;
  font-weight: normal;
  float: right;
  border: 0px;
  margin: -6px;
  margin-bottom: 5px;
  margin-left: 2px;
  padding-right: 0.4em;

  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

.gdactivearticle .gddictname
{
  font-size: 14px;
  font-weight: normal;
  margin: -6px;
  margin-bottom: 5px;
  margin-left: 2px;

  float: right;
  border: 1px solid white;
}

.gddicticon
{
  display: inline;
  vertical-align: text-bottom;
  float: right;
  padding-right: 0em;
  padding-left: 0.3em;
}

font[color="#0000D0"]
{
    color: #b2d3f4 !important;
}

font[color="#004080"]
{
    color: #b2d3f4 !important;
}

font[color="#000099"]
{
    color: #b2d3f4 !important;
}

font[color="#008000"]
{
    color: #b2d3f4 !important;
}

font[color="#0000c0"]
{
    color: #d2f427 !important;
}

/**
 * Old Dictionaries using DSL format
 */
.gdarticlebody > span:first-child .dsl_headwords,
.gdarticlebody > h3:first-child
{
  margin-top: -3px;
  display: inline-block;
}

.gdspellsuggestion
{
  /* Add some vertical space before the article */
  margin-top: 1.5em;
}

.dsl_article, .dsl_definition, .dsl_ex, .dsl_opt, .dsl_lang, .dsl_m0, .dsl_m1, .dsl_m2, .dsl_m3, .dsl_m4, .dsl_u, .dsl_b, .dsl_i
{
  color: #e0e0e0 !important;
}

.dsl_p {
  color: #FF7400 !important;
}

.dsl_b font {
  color: #FFD300 !important;
}

.dsl_m2 font {
  color: #71FF35 !important;
}

.dsl_i font {
  color: #e0e0e0 !important;
}

.dsl_article .dsl_definition {
  color: #FFEA13 !important;
}

.dsl_article .dsl_definition font[color="darkcyan"]
{
  color: #FFEA13 !important;
}

.dsl_article .dsl_definition font[color="teal"]
{
  color: #FFEA13 !important;
}

.dsl_article .dsl_definition font[color="darkslategray"]
{
  color: #E7003E !important;
}

.dsl_article .dsl_definition font[color="darkslateblue"]
{
  color: #E7003E !important;
}

.dsl_article .dsl_definition font[color="darkmagenta"]
{
  color: #E7003E !important;
}

.dsl_article .dsl_definition font[color="sienna"]
{
  color: #E7003E !important;
}

.dsl_article .dsl_definition font[color="rosybrown"]
{
  color: #E7003E !important;
}

.dsl_article .dsl_definition font[color="dimgray"]
{
  color: #e0e0e0 !important;
}

.dsl_article .dsl_definition font[color="green"]
{
  color: #E7003E !important;
}

.dsl_article .dsl_definition font[color="darkgreen"]
{
  color: #E7003E !important;
}

::selection
{
  background: #A0DC7F;
    color: white;
}

code::selection
{
    background: white;
}

.dsl_s_wav img, .lsa_play img, .forvo_play img[alt="Play"]
{
  /**
  display: none;
  **/
}

.dsl_s_wav a, .lsa_play td:nth-of-type(1) a, .forvo_play td:nth-of-type(1) a
{
  color: white;
  width: 18px;
  height: 14px;
  /**
  display: inline-block;
  background: url('file:///control_play_lingvo.png') no-repeat center;
  vertical-align: text-bottom;
  -webkit-user-select: none;
  user-select: none;
  **/
}

div
{
      background: #091007!important;
    color: #F5F4ED!important
}

H2, H3, font
{
    color: #F5F4ED!important
}

[Symbian9]

This is my dark theme:

Thanks.

@Aporue76, Suggest this is only your article-style.css, so add also your qt-style.css into comment above.

[vctrctrm]

Open GoldenDict menu "Preferences... → Interface":

Set "Add-on style" to dark-theme;

There's no "Add-on style" option for me on windows 10 =/

[michaeljywang]

Open GoldenDict menu "Preferences... → Interface":

Set "Add-on style" to dark-theme;

There's no "Add-on style" option for me on windows 10 =/

vctrctrm: do not use the stable version 1.0.1. In the goldendict.org page, go to the "Bleeding-edge versions" and grab the latet build (what I just downloaded is 1.5.0-RC2-372). After installing the new version, the solition above should work. I have the latest Windows 10 on my laptop and the dark theme works well.

[Symbian9]

In the goldendict.org page, go to the "Bleeding-edge versions"

Here they are:

• Windows - https://github.com/goldendict/goldendict/wiki/Early-Access-Builds-for-Windows
• Linux - https://github.com/goldendict/goldendict/wiki/Early-Access-Builds-for-Linux-Portable
• macOS - https://github.com/goldendict/goldendict/wiki/Early-Access-Builds-for-Mac-OS-X