metarmask / dom-distiller-reading-mode

https://chrome.google.com/webstore/detail/dom-distiller-reading-mod/oiembdaoobijmdmeobkalaehgifealpl
MIT License
51 stars 6 forks source link

Add theme editing #1

Open toolatetotheparty opened 7 years ago

toolatetotheparty commented 7 years ago

The dark theme is too hard on the eyes. Thanks.

toolatetotheparty commented 6 years ago

I'm bumping the request. Your app is the fastest when switching to reading mode, but the contrast of the dark theme is too jarring for me. Only two color settings are required: text and background. Please.

toolatetotheparty commented 6 years ago

Please?

metarmask commented 6 years ago

I tried implementing this a while back but never managed to do it in a good way. I'll add an emergency CSS box tomorrow that'll allow you to do whatever you want.

toolatetotheparty commented 6 years ago

Thanks!

metarmask commented 6 years ago

I have now added a box at the bottom of the options page.

To change the colors, input something like this:

body[class] {
    background: #ffffff;
    color: #000000;
}
toolatetotheparty commented 6 years ago

Css settings won't save.

metarmask commented 6 years ago

What did you put in the box? Properties like background will be overriden by the theme so you'll need to increase specificity like in my example above. Also, make sure you press the check button next to the box.

toolatetotheparty commented 6 years ago

Ah yes, sorry. The moment I added the wildcard to body *, it worked. Thanks.

marnovo commented 5 years ago

My take on the custom CSS to be a bit more "refined" on macOS and akin to Safari Reader/Books (IMO the best implementation of all browsers):

.sans-serif {
    font-family: "Source Sans Pro", sans-serif;
}

.serif {
    font-family: "Iowan Old Style", serif;
}

.monospace {
    font-family: "Source Code Pro", monospaced;
}

.light {
    color: #424242;
    background-color: #f0f0f0;
}

.dark {
    color: #dfdfdf;
    background-color: #5c5c60;
}

.sepia {
    color: #603e22;
    background-color: #faf4e8;
}

Additional question:

Is there somewhere you can access the current custom CSS you have active?

metarmask commented 5 years ago

I assume your first question was if I can add this style. I might if I ever get to maintaining this extension again.

Here's how you can see (and change in real time) the default style:

  1. Right-click on the text
  2. Click "Inspect"
  3. Click "distilledpage.css" under "Styles" near the top left (or sometimes somewhat close to the bottom left)

Alternatively go to the Chromium source for a possibly updated version since I built the extension last.