darkreader / darkreader/darkreader

[Broken Website] Codecademy Invisible Histograms

Open
#8,901 7 comments 0 reactions 0 assignees View on GitHub
Broken Website
Dominant language
TypeScript
Stars
22.4k
Forks
2.7k
Avg merge
21h 11m
Merged PRs (30d)
78

Description

# Broken Website Report

## Website Address

https://www.codecademy.com/paths/data-science/tracks/dscp-summary-statistics/modules/dscp-distributions/lessons/intro-to-histograms/exercises/finding-your-best-bin-size

## Steps To Reproduce

Any coding where a histogram is created on Codecademy and I assume any other user generated charts and the bars and text are not visible because they are the same color as the background.

## Problematic Observation

The Histograms from the codecademy site are unreadable because of this code that is applied which makes the stroke color the same as the charts background color:
[data-darkreader-inline-stroke] {
stroke: var(--darkreader-inline-stroke) !important;
}
The iframe is from cc-propeller.cloud. I tried excluding it from the site list but it only works when I open the iframe in a separate tab as the dark theme is still applied when viewing the site normally. As a temporary workaround I add the following to the dev tool theme editor:
================================

*.cc-propeller.cloud

CSS
[data-darkreader-inline-stroke] {
stroke: inherit !important;
}

================================
That at least allows me to view the bars and text even though it's not a dark theme but then the issue is if there are any median, mean vertical lines then they become invisible as well as the legend.

## Screenshots

## System Information

- OS: MacOS
- Browser: Firefox
- Dark Reader Version: 4.9.50

## Additional Context

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.