search

Cimbali / markdown-viewer

Markdown (.md) file viewer WebExtension for your browser.
Other
165 stars 28 forks source link

How to Change the Theme to Use Light Colors While Having the prefers-color-scheme on Firefox set to dark #113

Closed Tervicke closed 5 months ago

Tervicke commented 5 months ago

Hi, thanks for the awesome addon. I would like to know how to use light colors even when I have set prefers-color-scheme on Firefox set to dark. Since for 99% of the websites I visit, I like to have a dark theme, but I would like to use a white theme for viewing Markdown

Cimbali commented 5 months ago

If you look at the stylesheets, you can see how the colors are defined. Then override that in the custom css box. So if you’re using the default style for example, this works:

:root {
--back: white !important;
--text: #333333 !important;
--link: #0088CC !important;
--alt-link: #005588 !important;
--alt-back: #EEEEEE !important;
}

For the github stylesheet:

:root {
--color-prettylights-syntax-comment: #6e7781 !important;
--color-prettylights-syntax-constant: #0550ae !important;
--color-prettylights-syntax-entity: #8250df !important;
--color-prettylights-syntax-storage-modifier-import: #24292f !important;
--color-prettylights-syntax-entity-tag: #116329 !important;
--color-prettylights-syntax-keyword: #cf222e !important;
--color-prettylights-syntax-string: #0a3069 !important;
--color-prettylights-syntax-variable: #953800 !important;
--color-prettylights-syntax-brackethighlighter-unmatched: #82071e !important;
--color-prettylights-syntax-invalid-illegal-text: #f6f8fa !important;
--color-prettylights-syntax-invalid-illegal-bg: #82071e !important;
--color-prettylights-syntax-carriage-return-text: #f6f8fa !important;
--color-prettylights-syntax-carriage-return-bg: #cf222e !important;
--color-prettylights-syntax-string-regexp: #116329 !important;
--color-prettylights-syntax-markup-list: #3b2300 !important;
--color-prettylights-syntax-markup-heading: #0550ae !important;
--color-prettylights-syntax-markup-italic: #24292f !important;
--color-prettylights-syntax-markup-bold: #24292f !important;
--color-prettylights-syntax-markup-deleted-text: #82071e !important;
--color-prettylights-syntax-markup-deleted-bg: #FFEBE9 !important;
--color-prettylights-syntax-markup-inserted-text: #116329 !important;
--color-prettylights-syntax-markup-inserted-bg: #dafbe1 !important;
--color-prettylights-syntax-markup-changed-text: #953800 !important;
--color-prettylights-syntax-markup-changed-bg: #ffd8b5 !important;
--color-prettylights-syntax-markup-ignored-text: #eaeef2 !important;
--color-prettylights-syntax-markup-ignored-bg: #0550ae !important;
--color-prettylights-syntax-meta-diff-range: #8250df !important;
--color-prettylights-syntax-brackethighlighter-angle: #57606a !important;
--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f !important;
--color-prettylights-syntax-constant-other-reference-link: #0a3069 !important;
--color-fg-default: #24292f !important;
--color-fg-muted: #57606a !important;
--color-fg-subtle: #6e7781 !important;
--color-canvas-default: #ffffff !important;
--color-canvas-subtle: #f6f8fa !important;
--color-border-default: #d0d7de !important;
--color-border-muted: hsla(210,18%,87%,1) !important;
--color-neutral-muted: rgba(175,184,193,0.2) !important;
--color-accent-fg: #0969da !important;
--color-accent-emphasis: #0969da !important;
--color-danger-fg: #cf222e !important;
}