mottie/darker-medium

Read Medium stories with happy eyes!

ALERT!

Medium has completely changed their CSS framework, so this extension and the userstyle won't work any more.

The previous framework used desriptive class names like "u-backgroundBlueGrey"; but now everything is one to two letters long, e.g. "a b c"

I don't have the time, nor the patience to decrypt that mess. 😿

---

Darker Medium

Read Medium stories with happy eyes!

Contents

• Features
• Security Concerns
• Branding
• Installation
  • Extension
  • Usercss
• Usage
  • Toggle the style (temporarily)
  • Customize accent colors
• Contributing
• Reporting problems
  • Style issues
  • Other issues

Features

• Applies a customizable dark theme to all medium formatted stories.
• Customize:
  • Header background.
  • Main Accent color.
  • Highlighting color.
  • Link color, hover and underline.
  • Hiding the "get updates" footer.
• Adds syntax highlighting to code and styles embedded gists.
• Medium story sites are automatically detected and styled.
• The advantage of using this extension over Stylus or Stylish is that you install it, customize it and forget about it.
• Please see this wiki page for a list of sites that were tested for this extension.
• A user.css file is available, and once Stylus has implemented support for user.css files, it will be immediately usable and installable from this repository.

Security Concerns

This browser extension does not collect any personal data.

The only data stored is the user style preferences (the state of the extension, five colors & an underline setting). Absolutely nothing else is shared or tracked; not even Google Analytics.

Branding

Apologizes to the sites that use specific colors in their branding, this extension overrides all of your colors; and it definitely doesn't touch your logo!

For example, I love hackernoon.com, but your bright green header and banners make my eyes scream when I try to read your site at night. This web extension applies an overall dark theme to all sites including those bright headers.

Installation

Extension

Install it for:

• Chrome
• Firefox
• Opera
• Safari (Help wanted; See issue #1)

Usercss

Stylus supports user.css file formats. When a "raw" version of darker-medium.user.css from this repository (link below) is opened in the browser, Stylus will prompt you to install the style. For more details, see the usercss documentation.

(Medium.com profile & topic page styling)

The advantages of using a usercss are as follows:

• No intermediary domain is needed to host the usercss file.
• Updates will be immediately available.
• Style customization is built-in. The same customizations for the extension are also available.

The disadvantage of this specific usercss is:

• Syntax highlighting is not applied to code snippets, because it requires JavaScript processing.
• Medium stories on unlisted domains will not be styled. If you want to report an unstyled Medium domain, please look in the other issues section for more details. A list of currently supported sites can be found in the medium-sites.js file.

NOTE: The version number of the available web extension may lag behind the usercss because the usercss style needs updating to add more sites, while the web extension will detect them automatically.

Usage

Toggle the style (temporarily)

Click on the Darker Medium icon to toggle the dark style on and off temporarily for the visible page. This state is not stored; this may be added in a future update.

Customize accent colors

Open the Extension options (all settings are stored):

• Enabled - This is a global toggle of the Darker Medium extension.
• Header - Customize the background color of the page header.
• Main - Customize the main accent color. This is overrides the branded color of the site.
• Highlight - Customize the highlighted text background color. The text color is automatically adjusted as needed.
• Link Color - Customize all link colors. This may include icons as well as links within the article.
• Link Hover - Customize the link hover color.
• Include link underline - Include or hide link underlines.
• Hide Footer - Show or Hide the signup/get updates footer.
• Reset - Restore the default settings.

Contributing

If you would like to contribute to this repository, please refer to the contribution guidelines.

And don't worry if you've never contributed to an open-source project before, you can start by reading this friendly guide.

This project is bound by a Code of Conduct.

Reporting problems

Style issues

• The profile & topic pages of Medium.com do not use the same css framework as the main stories pages. To make these pages dark, install the darker-medium-extras.user.css usercss style linked above (Stylus is needed).
• If it's a public page, you'll only need to report the URL and any steps needed to show the problematic area.
• If you need a membership to access the page, then please include the HTML and related CSS:
  • First, you'll need to right click on top of the element, and select "Inspect" or "Inspect Element".
  • The Developer Tools panel will open.
  • Make sure the highlighted element and the element above it are visible in the panel.
  • Look to the right side of that panel and you should find the "Styles" (or "Rules") tab.
  • Now look for the problematic style (usually a background-color or color).
  • Share the HTML/CSS by either:
    • Copy/pasting the HTML and associated CSS into a new issue, OR
    • Take a screenshot of the development panel (if you need an app, try http://getgreenshot.org/downloads/).
• If these instructions aren't clear enough, or you want to contact a person, use Gitter (click the button above) for this repository.

Other issues

• Please report:
  • If public, and pertinent, please share the URL of the page with the problem.
  • Report any javascript error as seen in the development tools console (Press F12 to open it).
  • Any extra information as described in the issue template when a new issue is opened.
• Do you know how to solve it? It'd be awesome if you contributed a fix!

darker-medium's Issues

Fix text-color of the sub label

• Google Chrome v.65.0.3325.181:
• Mac OS High Sierra v.10.13.4:
• https://medium.com/:

The extension works perfectly except for the article's sub label.
Check the image:

The label color should be white i think.

Transparent image issue

• Browser: Firefox x64
• Operating System: Windows 8.1
• URL of the problem page:
  • https://medium.com/square-corner-blog/open-sourcing-subzero-ee9e3e071827#cbe9
  • https://medium.com/square-corner-blog/open-sourcing-subzero-ee9e3e071827#d95c

Bug caught: On some subpages of medium addon doesn't work

• Browser: Checked on Webkit (Chrome + Brave)
• Operating System: OSX & Windows 10
• URL of the problem page:

• https://medium.com/topic/self
• https://medium.com/topic/health
• https://medium.com/topic/politics
• https://medium.com/topic/design

No screenshot needed.

How to fix:
From my observation those sites have gr__medium_com class in a <html> tag so we can simply add in js/content.js:11:

...
HTML_MEDIUM_CLASS = /gr__medium_com/
...

and then
js/content.js:63;64

if (IS_MEDIUM.test(document.head.getAttribute("prefix"))
    || HTML_MEDIUM_CLASS.test(document.getElementsByTagName('html')[0].className)) {

and we're done but then there is another issue. Styles are not applied, because those sites has got way different class names than "normal" ones.

Stylus Extension & Security Concerns

For those who are concerned about security, you should offer a Stylus extension as well.

Highlighting makes non-bold text invisible

• Browser: Chrome 69.0.3497.100
• Operating System: Windows 10
• URL of the problem page:
  All

N/A
When I highlight text with this activated, the text vanishes unless its bold. If it IS bold, then it highlights with the selected color (as seen in screenshots)

Error on text color

• Google Chrome v.65.0.3325.181:
• Mac OS High Sierra v.10.13.4:
• https://medium.com/me/email-settings/:

Hi,
I've found another little error on label text-color on the email-settings pages:

I think the green button should have a white text-color

Stopped Working?

• Extension Version: 1.4.0 (May 21, 2019)
• Browser: Firefox 67.0.4 and Chrome 75.0.3770.100
• Operating System: Windows 10 (Version 1903)
• URL of the problem page: https://medium.com/flutter-community/a-deep-dive-into-stack-in-flutter-3264619b3a77

Error on the devtools (not sure if it coming from this extension)

Feature request: Support for Safari

Are there plans to make an Safari Extension?

Following button background color extends its button container

• Browser: Firefox 62.0.3
• Operating System: Windows 10 64bit
• URL of the problem page: https://medium.freecodecamp.org/how-to-become-more-productive-while-working-less-9b9be71e9141

'Following' button background color extends its button container. Not sure if it was padding or something.

user profile pages not styled

• Browser: chrome 70 stable
• Operating System: linux
• URL of the problem page: user profile pages