icon in darkmode not available

[Marco-Israel]

In Darkmode the left icon is missing to toggle the mode. In light mode a sun is visible.

Here is the setup:

Include the required Javascript

HTML_EXTRA_FILES = doxygen-awesome-css/doxygen-awesome-darkmode-toggle.js

Add the additional CSS. This is ONLY required for the sidebar-only theme variant!

HTML_EXTRA_STYLESHEET = doxygen-awesome-css/doxygen-awesome.css \ doxygen-awesome-css/doxygen-awesome-sidebar-only.css \ doxygen-awesome-css/doxygen-awesome-sidebar-only-darkmode-toggle.css

set custom header & footer files generated in previous step

HTML_HEADER = header.html HTML_FOOTER = footer.html

[jothepro]

What browser and operating system are you using? Can you provide a screenshot?

The icon in the button by default is just using the emojis '☀️' and '🌛'. This means that the appearance can differ across different systems. My guess is that your system or browser does not (fully) support emojis? 🤔

My suggestions on how to fix the problem for you:

• You could overwrite the --darkmode-toggle-button-icon CSS property here and here with a symbol that works for you.
• The toggle button is an empty html node that is styled using CSS here. If emojis/symbols don't work for you, you could probably also set a background-image or use an icon font. But that will require you to get your hands dirty and overwrite some CSS.

[ghost]

I had the same problem as OP and the error is in this line in the instructions for the footer.html changes:

document.getElementById("MSearchBox").parentNode.appendChild(toggleButton)

The console was throwing an error that it couldn't find MSearchBox or its parent at the time of execution, but copy-pasting this code in the console after it was done loading the page adds the button and it works perfectly. Because of this I moved the location at which it appends the button and changed the CSS afterwards to make it fit directly from doxygen-awesome.css because for some reason I couldn't select the button even if I had a class attached to it. Here is my footer JS:

<script type="text/javascript">
  $(document).ready(function(){
      toggleButton = document.createElement('doxygen-awesome-dark-mode-toggle');
      toggleButton.title = "Toggle Light/Dark Mode";
      document.getElementById("main-menu").appendChild(toggleButton); // <---- changed the ID value to main-menu
  })
</script>

And my CSS:

doxygen-awesome-dark-mode-toggle {
    float: right;                                               /* <---- this */
    margin: 0 var(--spacing-small) 0 var(--spacing-small);      /* <---- that */
    padding: 0 ;
    width: var(--searchbar-height);
    height: var(--searchbar-height);
    background: none;
    border: none;
    font-size: 23px;
    border-radius: var(--border-radius-medium);
    vertical-align: middle;
    text-align: center;
    line-height: var(--searchbar-height);
}

It's just a hotfix CSS though. I hope this works for you OP until there's a fix to the repo here.

[jothepro]

Yep, the fact that the searchbox is only rendered by JS after the page has loaded is annoying and I'm aware of that. But that's why the JS for adding the toggle button is put at the very end of the body, after the searchbox has been created. Are you sure that you really put the JS call all the way to the end of the body? Does the button on the demo-page work on your system? If not, pls let me know! This would mean that my assumtion about the loading time of the searchbox is wrong... 🤔

[ghost]

Yes, it works fine on my Chrome version 92 and I'm using Windows 10. Here is my full footer.html

<!-- HTML footer for doxygen 1.9.2-->
<!-- start footer part -->
<!--BEGIN GENERATE_TREEVIEW-->
<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
  <ul>
    $navpath
    <li class="footer">$generatedby <a href="https://www.doxygen.org/index.html"><img class="footer" src="$relpath^doxygen.svg" width="104" height="31" alt="doxygen"/></a> $doxygenversion </li>
  </ul>
</div>
<!--END GENERATE_TREEVIEW-->
<!--BEGIN !GENERATE_TREEVIEW-->
<hr class="footer"/><address class="footer"><small>
$generatedby&#160;<a href="https://www.doxygen.org/index.html"><img class="footer" src="$relpath^doxygen.svg" width="104" height="31" alt="doxygen"/></a> $doxygenversion
</small></address>
<!--END !GENERATE_TREEVIEW-->
<script type="text/javascript">
  $(document).ready(function(){
      toggleButton = document.createElement('doxygen-awesome-dark-mode-toggle')
      toggleButton.title = "Toggle Light/Dark Mode"
      document.getElementById("MSearchBox").parentNode.appendChild(toggleButton)
  })
</script>
</body>
</html>

EDIT: Accidentally included wrong script code ..

[jothepro]

Thanks for the details! I discovered that this is a compatibility issue with doxygen 1.9.2 😞 . For the moment I'd recommend you use doxygen 1.9.1 for generating your docs. I've created a new issue (#44) for tracking 1.9.2 support.

[jothepro]

FYI I've fixed the problem reported by @Super-Lovers by updating the documentation. Pls check out the 1.6.0 release notes -> "Upgrading to doxygen 1.9.2".

@Marco-Israel your original issue seems to be somewhat different. Pls let me know if you still need help or close the issue otherwise! :)

[jothepro]

I'll close this issue for now. @Marco-Israel feel free to re-open it if updating to the latest version of doxygen-awesome-css doesn't resolve your problem.