Skip to content

Question: Export CSS? #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
gopar opened this issue Jan 17, 2016 · 13 comments · Fixed by #3120
Closed

Question: Export CSS? #13

gopar opened this issue Jan 17, 2016 · 13 comments · Fixed by #3120
Labels
question

Comments

@gopar
Copy link

gopar commented Jan 17, 2016

Hey awesome extension. Just a question though.

Is there any way to export or view the CSS that is created when running the extension? Thanks! :)
@alexanderby
Copy link
Member

The <style> with id "dark-reader-style" is placed inside <head>.

@Gusted Gusted mentioned this issue Jul 16, 2020
Merged
@Gusted
Copy link
Contributor

Gusted commented Jul 20, 2020

Hello!

In the next update of Dark Reader 4.9.16 you can export it to CSS File 🎉
This can trough the following steps:

  • Click Dark Reader icon.
  • Click Dev tools (in the bottom-right corner).
  • Click Preview new design.
  • Click on settings in the popup
  • Click on Manage Settings
  • Click on Export Dynamic Theme

Regards,
Gusted

@Gusted Gusted mentioned this issue Jul 24, 2020
Closed
@Gusted Gusted mentioned this issue Feb 15, 2021
Closed
@TechnologyClassroom
Copy link

@Gusted This information would be a good fit for the help page.

@Gusted Gusted mentioned this issue Dec 6, 2021
Closed
@aranapatona
Copy link

Is there any "MANUAL" way of doing this? since this does not work on firefox, clicking the EXPORT button does absolutely nothing.
Also trying to edit the static css for single site, always opens the "All websites" editor (in firefox only). So even if we can somehow get the css exported (via dev tools maybe?), still we wont be able to add it to a single site, it will have to go to the all websites style.

@TechnologyClassroom
Copy link

Works with Firefox last time I tried it.

After I export CSS, I apply it custom changes with Stylus.

@montemero
Copy link

Hello!

In the next update of Dark Reader 4.9.16 you can export it to CSS File 🎉 This can trough the following steps:

* Click Dark Reader icon.

* Click Dev tools (in the bottom-right corner).

* Click Preview new design.

* Click on settings in the popup

* Click on Manage Settings

* Click on Export Dynamic Theme

Regards, Gusted

Nothing happens for me when i click on "Export Dynamic Theme"

@Mds92
Copy link

Mds92 commented Apr 7, 2024

I'm using v5.0, How to export css for a website in v5.0?

@aranapatona
Copy link

Hello!
In the next update of Dark Reader 4.9.16 you can export it to CSS File 🎉 This can trough the following steps:

* Click Dark Reader icon.

* Click Dev tools (in the bottom-right corner).

* Click Preview new design.

* Click on settings in the popup

* Click on Manage Settings

* Click on Export Dynamic Theme

Regards, Gusted

Nothing happens for me when i click on "Export Dynamic Theme"

for me neither, maybe only in windows firefox, not sure about this, I know how to do it, andit works in edge or chrome based browsers, just doesnt work in firefox, not even in a new clean install.

@Brotyx
Copy link

Brotyx commented May 19, 2024

Hello!

In the next update of Dark Reader 4.9.16 you can export it to CSS File 🎉 This can trough the following steps:

  • Click Dark Reader icon.
  • Click Dev tools (in the bottom-right corner).
  • Click Preview new design.
  • Click on settings in the popup
  • Click on Manage Settings
  • Click on Export Dynamic Theme

Regards, Gusted

I am on Dark Reader Version 4.9.85 and there is no such thing as "Manage Settings" after clicking "Settings" and the settings page opens. Every other step up until that point has worked.

I would really love to get the CSS Dark Reader generates in the "Dynamic" mode for Google Calendar, as I am developing a standalone Web App in Electron for it. This would allow me to inject that css into my app, so the Google Calendar Web App is displayed in dark mode.

How can I get to the point of exporting the dynamic theme? Or can you suggest another way of injecting a dark mode into my Google Calendar Web App?

Thank you for every input in advance and have a great rest of the day!

@Brotyx
Copy link

Brotyx commented May 19, 2024

Hello!
In the next update of Dark Reader 4.9.16 you can export it to CSS File 🎉 This can trough the following steps:

* Click Dark Reader icon.

* Click Dev tools (in the bottom-right corner).

* Click Preview new design.

* Click on settings in the popup

* Click on Manage Settings

* Click on Export Dynamic Theme

Regards, Gusted

Nothing happens for me when i click on "Export Dynamic Theme"

for me neither, maybe only in windows firefox, not sure about this, I know how to do it, andit works in edge or chrome based browsers, just doesnt work in firefox, not even in a new clean install.

how have you gotten to "Manage Settings"?

@Algie37
Copy link

Algie37 commented May 23, 2024 •
edited
Loading

Seems "Manage Settings" has disappeared in the latest update.
If you have access to your website code, implement DarkReader.js using the instructions here.
Thereafter, add the below code to automatically extract and download DarkReader CSS as a file.

const writeFile = async () => {
const CSS = await DarkReader.exportGeneratedCSS();
const link = document.createElement("a");
const file = new Blob([CSS], { type: 'text/plain' });
link.href = URL.createObjectURL(file);
link.download = "darkreader.css";
link.click();
URL.revokeObjectURL(link.href);
}
writeFile();

@Brotyx
Copy link

Brotyx commented May 26, 2024

Seems "Manage Settings" has disappeared in the latest update. If you have access to your website code, implement DarkReader.js using the instructions here. Thereafter, add the below code to automatically extract and download DarkReader CSS as a file.

const writeFile = async () => { const CSS = await DarkReader.exportGeneratedCSS(); const link = document.createElement("a"); const file = new Blob([CSS], { type: 'text/plain' }); link.href = URL.createObjectURL(file); link.download = "darkreader.css"; link.click(); URL.revokeObjectURL(link.href); } writeFile();

Is there a way to get an old .crx file of the extension, that still has the "Manage Settings" button?

Also, when one is trying to develop a web app for a specific website (Google Calendar in my case) and doesn't have access to the website's code directly, what would be the best way to inject Dark Reader into that website? For context, I am coding it in Electron. I tried to inject the Dark Reader's generated CSS for "calendar.google.com", but since there I haven't found a way to obtain that CSS for "calendar.google.com", I am stuck here.

Any input is greatly appreciated!

@aranapatona
Copy link

bump

@westurner westurner mentioned this issue Aug 13, 2024
Open
2 tasks
@protokoul protokoul mentioned this issue Feb 4, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Exporting Dynamic Theme's CSS to a file darkreader/darkreader
9 participants
@gopar @Mds92 @alexanderby @TechnologyClassroom @Algie37 @aranapatona @Gusted @Brotyx @montemero