dgarijo / Widoco

Wizard for documenting ontologies. WIDOCO is a step by step generator of HTML templates with the documentation of your ontology. It uses the LODE environment to create part of the template.
Apache License 2.0
275 stars 85 forks source link

Added darkmode #672

Closed vChavezB closed 6 months ago

vChavezB commented 6 months ago

Added an option to have a darkmode in the documentation. The option is based on the implementation from GoogleChromeLabs https://github.com/GoogleChromeLabs/dark-mode-toggle.

At the moment this option is only available if using the W3CStyle.

Motivation

I am more of a night owl and as I am building my ontology at night the white background bothers me. I tried to give a quick shot and it looks good at first glance.

Details

What I changed is

I tried to make at as less invasive as possible and ended up with a slider that is at the left bottom part of the html:

And this is how it looks in action

To test the changes, the documentation has to be loaded over a server as the dark mode java script from google gives the error

Access to script at 'file:///DOC_SOURCE_PATH/dark-mode-toggle.mjs' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

dgarijo commented 6 months ago

Very cool! Thanks. Will have a look this week. I like to space out the releases a bit, but you are adding so many things that it's getting hard not to create a new one ;)

vChavezB commented 6 months ago

No problem, whenever I am adding features I am glad to make contributions back 😉Here is another update on how it looks with the latest commits

grafik