{"id":14008285,"url":"https://github.com/DmitriK/darkContrast","last_synced_at":"2025-07-24T03:32:27.707Z","repository":{"id":28177892,"uuid":"31679339","full_name":"DmitriK/darkContrast","owner":"DmitriK","description":"Firefox addon that fixes low contrast text when using dark desktop theme","archived":false,"fork":false,"pushed_at":"2021-11-10T04:53:16.000Z","size":497,"stargazers_count":63,"open_issues_count":11,"forks_count":3,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-11-30T19:38:13.135Z","etag":null,"topics":["dark-desktop-theme","javascript","webextension"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DmitriK.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"COPYING","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-04T20:53:43.000Z","updated_at":"2024-03-13T09:18:09.000Z","dependencies_parsed_at":"2022-09-04T10:30:57.234Z","dependency_job_id":null,"html_url":"https://github.com/DmitriK/darkContrast","commit_stats":null,"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"purl":"pkg:github/DmitriK/darkContrast","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DmitriK%2FdarkContrast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DmitriK%2FdarkContrast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DmitriK%2FdarkContrast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DmitriK%2FdarkContrast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DmitriK","download_url":"https://codeload.github.com/DmitriK/darkContrast/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DmitriK%2FdarkContrast/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266789222,"owners_count":23984252,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dark-desktop-theme","javascript","webextension"],"created_at":"2024-08-10T11:01:32.974Z","updated_at":"2025-07-24T03:32:27.333Z","avatar_url":"https://github.com/DmitriK.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# Text Contrast for Dark Themes\n\nFirefox extension that fixes low contrast text when using a dark desktop theme.\n\nAvaible on AMO here: https://addons.mozilla.org/firefox/addon/text-contrast-for-dark-themes/\n\nFor users who don't want *any* native theming in web content, Firefox has a\nbuilt-in solution. In `about:config`, verify that\n`widget.content.allow-gtk-dark-theme` is `false`. If you use a theme that does\nnot have a light variant (e.g, Arc Dark; the light version, Arc, is a separate\ntheme), then create a new string entry in `about:config` called\n`widget.content.gtk-theme-override` and set it to a light theme, e.g. `Arc` or\n`Adwaita:light`.\n\nOtherwise, for users who wish to retain dark theming of un-styled input elements\nor entire pages, this extension tries to fix broken author css to ensure text\nremains read-able. Note that per the above paragraph, such users will likely\nwant to set `widget.content.allow-gtk-dark-theme` to `true`.\n\n## Permission Requirements Explanations ##\n\n### \u003call_urls\u003e ###\nThe extension inserts CSS and JavaScript into page content in order to fix\ncolors, and requires URL permissions for all sites in order to do so.\n\n### storage ###\nExtension settings use local storage.\n\n### tabs ###\nExtension requires access to tab data to get active URL. In order for frames to\nsee top-level tab URL, permissions for all tabs is needed, not just active tab.\n\n### webNavigation ###\nExtension is triggered on web navigation events.\n\n## Input Elements\n\nThe primary purpose of this extension is to fix input elements, which are drawn\nwith native widgets in the user's dark style. Many website authors assume that\nsuch elements are a dark-on-light style by default, and will only set one color\nin their styles. This results in poor contrast when drawn with the dark native\nwidgets.\n\nThis extension checks if only one of the colors has been defined (foreground\ncolor, or background color/image), and defines the unset property as needed.\nElements with both colors defined or both colors undefined remain unchanged.\nElements which already have good contrast (e.g. author is running their own dark\nstyling) are also unchanged.\n\nIn comparison to userContent.css/userChrome.css or similar fixes, this extension tries to\nminimize changes that fix the contrast issue. Thus native styles are retained if\npossible.\n\n## Use with \"Use System Colors\" or custom colors\n\nSome users with a dark desktop theme may use the \"Use System Colors\" preference\nto set the page default foreground/background to be light-on-dark. Alternately,\nusers may manually set a light-on-dark style with their own colors. Similar to\nthe situation with input elements, this can cause problems with author CSS.\n\nThis extension will detect the inverted default style and check for good\ncontrast on the page itself. The check is performed recursively starting at the\ndocument root. Since colors are inherited by element children, the check bails\nearly once it has found a explicitly styled element (whether due to author\ncorrectly setting both FG and BG, or extension making a fix). This keeps the\nperformance impact of the page scan negligible.\n\n## Dynamic Elements\n\nThe extension performs required contrast checks (as above) for newly added or\nre-styled elements. Elements that have already been checked are not\ninspected, resulting in no slowdown with JavaScript heavy sites.\n\n## IFrames and SVG images\n\nThe sub-documents of IFrames and SVG images included via `\u003cembed\u003e` are traversed\nby the extension. The extension will try to correctly set the style of the inner\nsub-document based on the styling of the parent.\n\nFor users with light-on-dark default colors, any SVG images included inline\nwithin a document are also checked by the extension.\n\nNote that SVG data included in an `\u003cimg\u003e` tag cannot be accessed via JavaScript,\nand this extension is unable to fix such cases.\n\n## UI\n\nThe extension provides a toolbar button that allows users to either:\n- Toggle the effects of the extension\n- For users with light-on-dark default colors, force a custom stylesheet that\n  emulates the black text / white background default.\nBoth toggles apply to the current tab only, and are temporary. A page refresh\nundoes the effects.\n\nLastly, the extension options can also be accessed via the toolbar button menu.\n\n## Options\n\nThe extension provides some options for users to fine tune the operation.\n\n### Contrast Threshold\n\nThe extension does not modify element colors if it determines that they already\nhave good contrast. The definition of good contrast is determined by this\nthreshold. The extension uses the WCAG 2.0 definition of contrast\n(see 1.4.3: https://www.w3.org/TR/WCAG20/#visual-audio-contrast). Higher numbers\nmake it more likely for the extension to change colors.\n\n### Delay\n\nThe extension can conflict with other extensions that modify page CSS. To allow\nthe extension to run after any other custom CSS changes, a delay can be\nconfigured before the extension does any checking.\n\n### Override Lists\n\nSome websites do not look good with this extension active. Two override lists\nare provided to avoid unwanted effects.\n\n#### Disable List\n\nThe extension is disabled for sites in this list. If the site works well without\nthe extension, but looks worse with it active, add the site to this list.\n\n#### Force Standard List\n\nThe extension tries to force a default black text / white background style for\nany sites in this list. If sites don't looks good or end up too busy with the\nextension, this list can be used to revert to the stock browser style.\n\n## Known Issues\n\nThe following list of issues are known and cannot be fixed at this time.\n\n## AMO (addons.mozilla.org)\n\nThe extension does not function on addons.mozilla.org. This is a restriction\nenforced by Mozilla for any extension, presumably as a security feature.\nUnfortunately, the stylesheets on those pages are poorly written, and will\nresult in black-on dark styling for many of the input elements.\n\n## Internal Pages\n\nThe extension cannot operate on internal pages, such as `about:` links,\noption pages for other extensions, and so on. As above, this is a built-in\nrestriction of all web extensions.\n\n## Intentionally Hidden Text\n\nSome site authors deliberately set a foreground or a background color with the\nintention of hiding text. When this extension encounters such an element, it has\nno way of knowing the poor contrast is intentional, and thus will fix the\nelement. The extension should either be disabled for that specific site, or\ncustom CSS fixing the offending element should be applied via userContent.css or\nsimilar.\n\n## SVG\n\nSVG elements included as `\u003cimg\u003e` cannot be traversed via JavaScript. If the SVG\nuses the 'currentColor' string for colors, these are pulled from the browser\ndefault colors, independent of the styling of the enclosing page. With no access\nto the SVG DOM, this extension cannot fix such cases. This is currently a major\nissue with with Wikipedia formulas, which will render in the user's selected\nforeground color, on a white background as set by the Wikipedia CSS. The only\nfix is to use custom CSS to force colors background on the parent page to ensure\ncorrect contrast (in the case of Wikipedia, force the background to be dark).\n\n## Element positioning\n\nSome sites explicitly place elements outside of the normal layout flow. This\nextension relies on the fact that children inherit parent styles to keep fixes\nsmall and performant. The extension is unable to know that an element may have\nbeen moved above another element resulting in poor contrast. Forcing standard\ncolors may alleviate the issue on such sites.\n\n## Cross-origin iFrames\n\nWhen trying to fix all elements, and iframes are involved, the extensions must\ndecide how to style an iframe based on what the parent does (if parent styles\nhave been fixed, then iframe should be forced into standard colors, otherwise\nprocessed normally). This communication channel between the iframe and the\nparent is restricted when the frames are cross-origin, which blocks access to\nproperties that the parent needs to determine if a fix is needed. This will\nresult in the extensions failing to work in iframes on certain sites, which may\nrequire adding the site to one of the override lists.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDmitriK%2FdarkContrast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDmitriK%2FdarkContrast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDmitriK%2FdarkContrast/lists"}