Requesting feature for "Dark Mode" , pop up: "Do you Know" , BookMark and Others

[Aniruddha120]

What is the expected behavior?

QISKIT Tutorial has become very popular for its contents. For the reader's comfort, I am suggesting some features :

1. Dark Mode: for readers comfort
2. Pop-ups/ button for knowledge and updates. Example: pop up like- "Do You Know?" . This feature can help a learner to know updates of the Quantum Computing field, unknown info .
3. Adding the "Book Mark" feature. Readers can add a content to bookmark through his/her IBMQ account which can be effective for continuing the study in the future without wasting much time.
4. Adding "Text highlighter" and "Notes" features. These two features can help a learner to add necessary infos for his own concern. A user can store his/her details through the IBMQ account.

For adding more degrees of freedom for learning, these features can play a good role.

[wagnersj]

For Dark Mode, you can install the jupyterthemes package. Also, jupyter lab has a dark mode. One caveat is that plots have transparency turned on in the boarder areas where the axis tick marks and labels are, rendering them barely readable. This looks like a problem with either matplotlib or Jupyter itself. I sometimes use Visual Studio Code for looking at/editing notebooks, and it's in dark mode by default, and somehow it renders the plots without the transparency problem!

[Aniruddha120]

For Dark Mode, you can install the jupyterthemes package. Also, jupyter lab has a dark mode. One caveat is that plots have transparency turned on in the boarder areas where the axis tick marks and labels are, rendering them barely readable. This looks like a problem with either matplotlib or Jupyter itself. I sometimes use Visual Studio Code for looking at/editing notebooks, and it's in dark mode by default, and somehow it renders the plots without the transparency problem!

It is fine when we use jupyterthemes when we have a repository. But , while studying from the website (as not everyone is used to git , though it is not that hard) . Not everyone will go for the development of the tutorials(as some are newcomers), so yes vscode could do so , but something else should be thought for them. I have never tried qiskit tutorials on jupyter lab as the textbook dont work in the lab(in the description of the, it is said so) , if it works then that will be great. I hope, I have tried a little to show the facts and asking your kind comments for it. Do you think , my other mentioned features will be good if they can be stored for individual users through IBMQ account?

[nonhermitian]

So all of what you suggested is a bit of work. All the documentation is in Sphinx, so we are confined by its capabilities. There is also no way to connect the action of the docs to an IBMQ account. That is, without a major amount of effort.

[IshanArya]

You could just add a button to apply this script to the webpage:

var odmcss = `
:root {
    filter: invert(90%) hue-rotate(180deg) brightness(100%) contrast(100%);
    background: #fff;
} 

iframe, img, image, video, [style*="background-image"] { 
    filter: invert() hue-rotate(180deg) brightness(105%) contrast(105%);
} 
`;
  
id="orion-browser-dark-theme";
ee = document.getElementById(id);
if (null != ee) ee.parentNode.removeChild(ee);
else {
  style = document.createElement('style');
  style.type = "text/css";
  style.id = id;
  if (style.styleSheet) style.styleSheet.cssText = odmcss;
  else style.appendChild(document.createTextNode(odmcss));
  document.head.appendChild(style);
}

source: https://github.com/OrionBrowser/DarkMode/blob/main/oriondark.js

[Eric-Arellano]

Hi, thanks for this feedback! To add dark mode to our Sphinx-generated docs would mean that we need to add it to the entire qiskit.org website with a consistent mechanism. It was decided in https://github.com/Qiskit/qiskit.org/issues/2310#issuecomment-1641917561 to not prioritize adding dark mode for now, but that we may revisit it after landing some bigger priorities to improve the Qiskit experience.

I'm closing this issue because we're very soon archiving this repository and moving the tutorials to qiskit-terra.