Change font-color, font-size, and space between the lines in reader

[vet8t6z79pc4]

Before

Due to the automatic image compression. It doesn’t show the real brightness of the font! (but you already know if you use dark mode).

After

I have recently become keen on customizing LingQ using Userscripts. To reduce damage to my eyes from the sparkling white text in dark mode, I changed the font color a little dimly. Also, I adjusted font size and space between lines according to my preference.

For your eye health, I share this Userscript. You can change the values according to your preference.

// ==UserScript==
// @name         LingQ Custom Font
// @match        https://www.lingq.com/*/learn/*/web/reader/*
// @description  Set font-related settings
// ==/UserScript==

(function () {
  "use strict";

  var style = document.createElement("style");
  style.textContent = `
  body.theme-luminosity-dark .reader-container .sentence-item.known-word:not(.is-selected),body.theme-luminosity-dark .reader-container .sentence-item.is-learned,body.theme-luminosity-dark .reader-container .sentence-item.lingq-status-3 {
    color: #e0e0e0 !important; // (default is #fff. Use RGB hex)
  }

  .reader-component .line-height-1 .reader-container {
    line-height: 1.8 !important; // space between lines. default is 2.1
  }
  
  .reader-component .font-size-1 {
    font-size: 1.05rem !important; // font-size (1.0rem is minimum, and 1.125rem is next.)
  }
  `;
  document.querySelector("head").appendChild(style);
})();

If you study with lessons imported from YouTube, check it also. You can merge those two by adjusting a little part of the code:

Change the default youtube size/location in lesson with Userscript

I just added another modification. The embedded YouTube video will be automatically played with subtitles on. // ==UserScript== // @name LingQ Addon // @match https://www.lingq.com/*/learn/*/web/reader/* // @match https://www.lingq.com/*/learn/*/web/library // @description Custom embedded player, and sort course automatically. // ==/UserScript== (function () { "use strict"; // Restyle embedded player var height = 370; var width = 540; var right = 0.1; var b…

[vet8t6z79pc4]

// ==UserScript==
// @name         LingQ Custom Font
// @match        https://www.lingq.com/*/learn/*/web/reader/*
// @description  Set font-related settings
// ==/UserScript==

(function () {
  "use strict";

  var style = document.createElement("style");
  style.textContent = `
  body .reader-container .sentence-item {
    color: #e0e0e0 !important; // default is #fff. Use RGB hex
  }

  .reader-component .reader-container {
    line-height: 1.6 !important; // space between lines. default is 2.1
  }
  
  .reader-component article{
    font-size: 1.05rem !important; // font-size (In a default setting, 1.0rem is the minimum, and 1.125rem is the next.)
  }
  
  .reader-container p+p {
    margin-top: 0.5rem; top-padding of sentences
  }
  `;
  document.querySelector("head").appendChild(style);
})();

I made some modifications for general usage.

Exmaples

Content with line breaking

Content without line breaking