How do I get a dark theme/night mode in Calibre Ebook Viewer?

Most Ebook readers come with a standard easy Night Mode switch. I'm trying to figure this out in Calibre. So far, I've been able to change the app theme to use my dark System theme by creating

$ sudo nano /etc/profile.d/calibre.sh

export CALIBRE_USE_SYSTEM_THEME=1

Then

$ sudo service gdm restart

But I still need help to get the background in the Ebook Viewer darker with lighter text.

Solution 1:

In addition to the steps in the question for making the overall app theme dark, one must apply a theme within the ebook viewer. Here's how to do that:

Save the default theme

1. Open an ebook (any ebook).
2. Click on the Settings icon (screwdriver and spanner icon depending on your version) on the bottom left.
3. Open Theming Tab and Save the theme by a your name of choice.

Create the Dark theme

4. Open the User Stylesheet Tab
5. Paste the Solarised Dark theme CSS code at the bottom of this answer. Sourced from saucemcboss' Github Repo.
6. Open Theming Tab and Save the new theme by a your name of choice.

This way it will apply to all your ebooks, together with the app's theme. You can switch between the default and Dark theme from the Theming tab's Load button.

CSS:

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden] {
  display: none;
}
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
a:focus {
  outline: thin dotted;
}
a:active,
a:hover {
  outline: 0;
}
h1 {
  font-size: 2em;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
mark {
  background: #ff0;
  color: #000;
}
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 0;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}
button,
input {
  line-height: normal;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
input[disabled] {
  cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
  vertical-align: top;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html {
  font-family: 'PT Sans', sans-serif;
}
pre,
code {
  font-family: 'Inconsolata', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'PT Sans Narrow', sans-serif;
  font-weight: 700;
}
html {
  background-color: #073642;
  color: #839496;
}
body {
  background-color: #002b36;
  margin: 0 auto;
  max-width: 23cm;
  border: 1pt solid #586e75;
  padding: 1em;
}
code {
  background-color: #073642;
  padding: 2px;
}
a {
  color: #b58900;
}
a:visited {
  color: #cb4b16;
}
a:hover {
  color: #cb4b16;
}
h1 {
  color: #d33682;
}
h2,
h3,
h4,
h5,
h6 {
  color: #859900;
}
pre {
  background-color: #002b36;
  color: #839496;
  border: 1pt solid #586e75;
  padding: 1em;
  box-shadow: 5pt 5pt 8pt #073642;
}
pre code {
  background-color: #002b36;
}
h1 {
  font-size: 2.8em;
}
h2 {
  font-size: 2.4em;
}
h3 {
  font-size: 1.8em;
}
h4 {
  font-size: 1.4em;
}
h5 {
  font-size: 1.3em;
}
h6 {
  font-size: 1.15em;
}
.tag {
  background-color: #073642;
  color: #d33682;
  padding: 0 0.2em;
}
.todo,
.next,
.done {
  color: #002b36;
  background-color: #dc322f;
  padding: 0 0.2em;
}
.tag {
  -webkit-border-radius: 0.35em;
  -moz-border-radius: 0.35em;
  border-radius: 0.35em;
}
.TODO {
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
  background-color: #2aa198;
}
.NEXT {
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
  background-color: #268bd2;
}
.ACTIVE {
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
  background-color: #268bd2;
}
.DONE {
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
  background-color: #859900;
}
.WAITING {
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
  background-color: #cb4b16;
}
.HOLD {
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
  background-color: #d33682;
}
.NOTE {
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
  background-color: #d33682;
}
.CANCELLED {
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
  background-color: #859900;
}

Solution 2:

I don't think a new CSS file is needed. Also, the instructions in the main answer are outdated (relating to an older version of Calibre with a different Ebook Viewer GUI), and so is the command (in the question) for the dark palette of Calibre main GUI; testing in version 4.6, it's export CALIBRE_USE_DARK_PALETTE=1 to achieve that result — as said in comment by @meskobalazs.)

In order to get dark background and light font in the Ebook viewer, just open an ebook with it (with the viewer, not with Calibre itself; or, from Calibre main, select the book and press "View" (Read books) button); then, right-click, then Preferences. Or alternatively open the book and right-click anywhere in it and click Preferences.

Then Colors

Then New scheme

Then set the colors for background and foreground (text).

Select Apply and OK.

With certain ebook documents I have seen an odd problem where the font color stayed black no matter the above settings, in which case making the background dark is not an option. In such cases some other ebook readers had the same problem (Foliate), while some could fix it (Bookworm).

As said here in relation to the font type, the CSS file inside the ebook may override the software settings, including font color. Testing that, I have extracted the epub file (it's a zip in fact; some archive managers need the zip extension, some can extract directly) and found an /EXTRACTED_LOCATION/OEBPS/Content/Content.css where the line color:Black appeared multiple times. Replacing that with "Gray" gives a rather dark (but readable) gray, while "#DBDBDB" gives a lighter gray. (After that change, compress the extracted files and folders back into a zip file and change that extension to epub.)

But here I have found that the change can be done from inside Calibre: Convert books > Look and feel > Styling, select to convert to the same format and check "Colors" (instead of/beside "Fonts").

Solution 3:

With release 4.6 of Calibre you can now use the CALIBRE_USE_DARK_PALETTE=1 environment variable.

Solution 4:

The newer version of calibre 4.16 has an option in Preferences -> Colors called "override book colors" which could be used to enforce consistent colors in dark mode: Here is a snapshot. Click OK and you are all set.