` - Appends a `` element after each fragment - Sets button `title` attribute - Populates button with `copyIcon` **Usage**: ```javascript ``` Must be called AFTER customizing properties for changes to take effect. **Source**: `doxygen-awesome-fragment-copy-button.js:20–40` ``` -------------------------------- ### Minimal Doxyfile Configuration Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/INDEX.md Use this minimal configuration to enable Doxygen Awesome CSS with a light color style and tree view. ```ini HTML_EXTRA_STYLESHEET = doxygen-awesome.css HTML_COLORSTYLE = LIGHT GENERATE_TREEVIEW = YES ``` -------------------------------- ### Usage Example: Border Radius Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/configuration.md Modify border radius variables to change the corner rounding of elements, affecting their visual appearance. ```css html { --border-radius-small: 2px; --border-radius-medium: 4px; --border-radius-large: 8px; } ``` -------------------------------- ### Initialize Subset of Extensions Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/extension-architecture.md Allows for independent initialization of extensions, enabling users to load only the necessary ones. This is achieved by calling the init() method on specific extension objects. ```html ``` -------------------------------- ### Usage Example: Page Colors Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/configuration.md Adjust the page colors to modify the main content area's background and text colors. ```css html { --page-background-color: #fafafa; --page-foreground-color: #333333; } ``` -------------------------------- ### Extension Lifecycle Stages Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/extension-architecture.md Outlines the typical lifecycle of an extension, from script loading and static initialization to user customization, initialization calls, and DOM interaction. ```text Load Script ↓ Static initialization block (if present) ↓ User customizes properties ↓ init() called ↓ Wait for DOM ready ↓ DOM queries executed ↓ New elements created/wrapped ↓ Event listeners attached ↓ Running (responsive to events) ``` -------------------------------- ### Override Dark Mode CSS Variables (with Toggle) Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/docs/customization.md If the dark-mode toggle JavaScript is installed, define your dark-mode variable overrides within the `html.dark-mode` selector. ```css html.dark-mode { /* define dark-mode variable overrides here if you DO use doxygen-awesome-darkmode-toggle.js */ } ``` -------------------------------- ### Modify Sidebar Navigation Colors Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/configuration.md Adjust the background and text colors for the sidebar navigation. This example also sets a custom opacity for expand/collapse arrows. ```css html { --side-nav-background: #f0f0f0; --side-nav-arrow-opacity: 0.5; /* Always partially visible */ } ``` -------------------------------- ### systemPreference (getter) Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/api-reference/darkmode-toggle.md Retrieves the system's color scheme preference using the `prefers-color-scheme: dark` media query. ```APIDOC ## systemPreference (getter) ### Description Returns the system color scheme preference via `prefers-color-scheme: dark` media query. ### Method `static get systemPreference(): boolean` ### Returns - `boolean`: `true` for dark mode, `false` for light mode. ### Example ```javascript if (DoxygenAwesomeDarkModeToggle.systemPreference) { console.log("System prefers dark mode") } ``` ``` -------------------------------- ### Content Filtering Example Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/api-reference/fragment-copy-button.md Demonstrates how line numbers and title cells are filtered out during the copy operation, ensuring only the actual code content is copied to the clipboard. ```html 42int x = 5; int x = 5; ``` -------------------------------- ### Fetch Doxygen Awesome CSS with CMake FetchContent Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/integration-guide.md Use CMake's FetchContent module to download and make Doxygen Awesome CSS available in your CMake-based project. Specify the version using a tag. ```cmake include(FetchContent) FetchContent_Declare( doxygen-awesome-css URL https://github.com/jothepro/doxygen-awesome-css/archive/refs/tags/v2.4.2.zip ) FetchContent_MakeAvailable(doxygen-awesome-css) FetchContent_GetProperties(doxygen-awesome-css SOURCE_DIR AWESOME_CSS_DIR) ``` -------------------------------- ### Get User Dark Mode Preference Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/api-reference/darkmode-toggle.md Returns the user's stored preference from local storage, falling back to the system preference if not set. ```javascript static get userPreference(): boolean ``` -------------------------------- ### Usage Example: Primary Color Scheme Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/configuration.md Customize the primary color scheme variables to alter the main theme color, including links, buttons, and accents. ```css html { --primary-color: #ff6b6b; --primary-dark-color: #cc5555; --primary-light-color: #ff8888; } ``` -------------------------------- ### jQuery Initialization Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/api-reference/paragraph-link.md Demonstrates the typical jQuery initialization pattern used by the extension. This ensures the code runs after the DOM is fully loaded. ```javascript $(function() { $(document).ready(function() { // initialization }) }) ``` -------------------------------- ### Dark Mode Toggle API Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/INDEX.md Initialize the Dark Mode Toggle component and configure its icons and title. You can also get or set the user's preference. ```APIDOC ## Dark Mode Toggle API ### Initialize ```javascript DoxygenAwesomeDarkModeToggle.init() ``` ### Configuration ```javascript DoxygenAwesomeDarkModeToggle.lightModeIcon = '☀️' DoxygenAwesomeDarkModeToggle.darkModeIcon = '🌙' DoxygenAwesomeDarkModeToggle.title = "Toggle Dark/Light Mode" ``` ### User Preference ```javascript // Get user preference const userPref = DoxygenAwesomeDarkModeToggle.userPreference // Set user preference DoxygenAwesomeDarkModeToggle.userPreference = true // or false ``` ``` -------------------------------- ### init() Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/api-reference/interactive-toc.md Initializes the interactive TOC extension. This method must be called after the page has loaded. It sets up the necessary DOM elements, event listeners, and initial state for the interactive TOC to function correctly. ```APIDOC ## init() ### Description Initializes the interactive TOC extension. Must be called after the page loads. ### Method `static init(): void` ### Parameters None ### Returns `void` ### DOM Requirement - Container with class `.contents` - TOC element with class `.toc` - TOC links in structure `.contents > .toc > ul a` - Document content in element with ID `doc-content` ### Usage ```javascript DoxygenAwesomeInteractiveToc.init() ``` ### Customization before init ```javascript DoxygenAwesomeInteractiveToc.topOffset = 50 DoxygenAwesomeInteractiveToc.hideMobileMenu = false DoxygenAwesomeInteractiveToc.init() ``` ``` -------------------------------- ### Configure Doxyfile for CMake FetchContent CSS Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/integration-guide.md In your Doxyfile.in, reference the Doxygen Awesome CSS file using the variable provided by FetchContent. ```text HTML_EXTRA_STYLESHEET = @AWESOME_CSS_DIR@/doxygen-awesome.css ``` -------------------------------- ### Initialize DoxygenAwesomeTabs Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/api-reference/tabs.md Call this method to transform all `.tabbed` containers into interactive tabs. It waits for the window load event. ```javascript static init(): void ``` -------------------------------- ### Initialize Paragraph Links Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/INDEX.md Initialize paragraph links to provide permanent links to sections. Customize the icon and tooltip text. ```javascript DoxygenAwesomeParagraphLink.init() DoxygenAwesomeParagraphLink.icon = '¶' DoxygenAwesomeParagraphLink.title = "Permanent Link" ``` -------------------------------- ### Event Listener Isolation for Interactive TOC Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/extension-architecture.md Attaches event listeners to specific elements to avoid global conflicts. This example shows iterating over TOC links and creating header arrays. ```javascript // Interactive TOC toc.querySelectorAll("a").forEach(link => { // Create headers array for this link }) ``` -------------------------------- ### Initialize Tabs Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/INDEX.md Initialize the tabs component. This component has no additional configuration properties. ```javascript DoxygenAwesomeTabs.init() // No configuration properties ``` -------------------------------- ### Initialize DoxygenAwesomeParagraphLink Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/docs/extensions.md Include and initialize the DoxygenAwesomeParagraphLink script in your header.html template. Ensure the script is added to HTML_EXTRA_FILES in your Doxyfile. ```html ``` -------------------------------- ### Override Dark Mode CSS Variables (without Toggle) Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/docs/customization.md If the dark-mode toggle JavaScript is NOT installed, use a media query to define dark-mode variable overrides for systems preferring dark mode. ```css @media (prefers-color-scheme: dark) { html:not(.light-mode) { /* define dark-mode variable overrides here if you DON'T use doxygen-awesome-darkmode-toggle.js */ } } ``` -------------------------------- ### Event Listener Isolation for Fragment Copy Button Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/extension-architecture.md Attaches event listeners to specific elements to avoid global conflicts. This example shows setting an onclick handler for a fragment copy button. ```javascript // Fragment Copy Button button.onclick = this.copyContent ``` -------------------------------- ### Basic Usage of DoxygenAwesomeTabs Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/api-reference/tabs.md Include the script and call `DoxygenAwesomeTabs.init()` to enable tab functionality on your page. ```javascript ``` -------------------------------- ### Troubleshoot Copy Button Issues Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/integration-guide.md Ensure the `navigator.clipboard` API is available (use HTTPS), the Fragment Copy Button is initialized, and code blocks have the `.fragment` class. ```html .fragment ``` -------------------------------- ### Basic Tabbed Content in Markdown Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/api-reference/tabs.md Use a div with the class 'tabbed' to wrap your tabbed content. Each tab item should start with a title element having the class 'tab-title', followed by the tab's content. ```markdown

- Python ```python print("Hello, World!") ``` - JavaScript ```javascript console.log("Hello, World!"); ``` - C++ ```cpp std::cout << "Hello, World!" << std::endl; ```

``` -------------------------------- ### Delayed Initialization with Window Load Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/extension-architecture.md Presents an alternative method for delayed initialization using the window load event. This ensures that all resources, including images and stylesheets, have finished loading. ```javascript static init() { window.addEventListener("load", () => { // Actual initialization }) } ``` -------------------------------- ### Copy Extension Files Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/integration-guide.md Commands to copy the Doxygen Awesome extension JavaScript files to your documentation output directory. Adjust the path as necessary. ```sh cp doxygen-awesome-darkmode-toggle.js /path/to/docs/ cp doxygen-awesome-tabs.js /path/to/docs/ cp doxygen-awesome-interactive-toc.js /path/to/docs/ cp doxygen-awesome-fragment-copy-button.js /path/to/docs/ cp doxygen-awesome-paragraph-link.js /path/to/docs/ ``` -------------------------------- ### Customize and Initialize Interactive TOC Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/api-reference/interactive-toc.md Include the interactive TOC script and customize its behavior before initialization. Set properties like `topOffset` and `hideMobileMenu` as needed. ```javascript ``` -------------------------------- ### Extended Doxyfile Configuration Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/INDEX.md Configure Doxygen Awesome CSS with additional stylesheets, JavaScript files for extensions, and specific display options. ```ini HTML_EXTRA_STYLESHEET = doxygen-awesome.css custom.css HTML_EXTRA_FILES = doxygen-awesome-darkmode-toggle.js \ doxygen-awesome-tabs.js \ doxygen-awesome-interactive-toc.js \ doxygen-awesome-paragraph-link.js \ doxygen-awesome-fragment-copy-button.js HTML_HEADER = header.html HTML_COLORSTYLE = LIGHT GENERATE_TREEVIEW = YES HTML_COPY_CLIPBOARD = NO PAGE_OUTLINE_PANEL = NO ``` -------------------------------- ### Troubleshoot Dark Mode Toggle Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/integration-guide.md Ensure jQuery is loaded, the search box is enabled in Doxyfile (`ENABLE_SEARCH = YES`), and browser localStorage is not disabled. ```config ENABLE_SEARCH = YES ``` -------------------------------- ### Graceful Degradation with API Fallbacks Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/extension-architecture.md Illustrates how to implement graceful degradation by checking for API availability and providing fallback mechanisms when features are not supported by the browser. ```javascript // If clipboard API unavailable, skip entirely if (navigator.clipboard) { // Initialize fragment copy button } // If ResizeObserver unavailable, use static height if (ResizeObserver) { observer = new ResizeObserver(resize) } else { // Calculate height once } ``` -------------------------------- ### Initialize Fragment Copy Button Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/docs/extensions.md Include the JavaScript file and initialize the fragment copy button functionality in your custom header.html. Ensure this is done after other script includes and before the dark mode toggle initialization if both are used. ```html ``` -------------------------------- ### Configure Fragment Copy Button Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/integration-guide.md Customize the copy and success icons, tooltip, and success duration for the Fragment Copy Button extension. This script should be in header.html. ```javascript // Use custom SVG icons DoxygenAwesomeFragmentCopyButton.copyIcon = `` DoxygenAwesomeFragmentCopyButton.successIcon = `` DoxygenAwesomeFragmentCopyButton.title = "Copy code to clipboard" DoxygenAwesomeFragmentCopyButton.successDuration = 1500 // Initialize DoxygenAwesomeFragmentCopyButton.init() ``` -------------------------------- ### Initialize Fragment Copy Button Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/INDEX.md Initialize the fragment copy button. Customize button text, icons for copy and success states, and success message duration. ```javascript DoxygenAwesomeFragmentCopyButton.init() DoxygenAwesomeFragmentCopyButton.title = "Copy" DoxygenAwesomeFragmentCopyButton.copyIcon = '' DoxygenAwesomeFragmentCopyButton.successIcon = '' DoxygenAwesomeFragmentCopyButton.successDuration = 980 // ms ``` -------------------------------- ### Constructor Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/api-reference/darkmode-toggle.md Creates a new toggle button element and sets the `onclick` handler to `toggleDarkMode`. ```APIDOC ## constructor ### Description Creates a new toggle button element. Sets `onclick` handler to `toggleDarkMode`. ### Method constructor() ### Source `doxygen-awesome-darkmode-toggle.js:65–68` ``` -------------------------------- ### DoxygenAwesomeParagraphLink.init() Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/api-reference/paragraph-link.md Initializes the paragraph link extension by scanning all headers and section titles and adding clickable link icons next to them. This method should be called after the DOM is ready. ```APIDOC ## DoxygenAwesomeParagraphLink.init() ### Description Initializes the paragraph link extension. Scans all headers and section titles, and adds clickable link icons next to them. ### Method `static init(): void` ### Parameters None ### Returns `void` ### Execution Timing Waits for `$(document).ready()` before executing. ### Side Effects Adds clickable anchor links to elements matching the selectors `.contents a.anchor[id]` and `.contents .groupheader > a[id]`. ### Usage ```javascript DoxygenAwesomeParagraphLink.init() ``` ### Customization Properties like `icon` and `title` can be customized before calling `init()`: ```javascript DoxygenAwesomeParagraphLink.icon = '¶' DoxygenAwesomeParagraphLink.title = "Link to this section" DoxygenAwesomeParagraphLink.init() ``` ``` -------------------------------- ### Resize Method Placeholder Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/api-reference/tabs.md This static method is defined but currently unused. It is intended to handle resizing of tabbed containers. ```javascript static resize(tabbed): void ``` -------------------------------- ### Initialize DoxygenAwesomeInteractiveToc Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/docs/extensions.md Include and initialize the DoxygenAwesomeInteractiveToc script in your header.html template. Ensure the script is added to HTML_EXTRA_FILES in your Doxyfile and PAGE_OUTLINE_PANEL is set to NO in Doxyfile. ```html ``` -------------------------------- ### Instance Lifecycle for Custom Elements Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/extension-architecture.md Describes the lifecycle events for custom elements, including creation, connection to the DOM, rendering, event handling, and disconnection. ```text new CustomElement() created (via createElement or HTML) ↓ constructor() called ↓ connectedCallback() (if defined) ↓ Rendered in DOM ↓ Event listeners fire ↓ disconnectedCallback() (if element is removed) ``` -------------------------------- ### Doxyfile Configuration for Base Theme Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/integration-guide.md Minimal Doxyfile settings for the base Doxygen Awesome CSS theme. Ensure HTML_EXTRA_STYLESHEET and HTML_COLORSTYLE are set correctly. ```config # Project info PROJECT_NAME = "My Project" PROJECT_VERSION = "1.0" PROJECT_LOGO = logo.png # optional # HTML generation GENERATE_HTML = YES HTML_OUTPUT = html # Doxygen Awesome CSS HTML_EXTRA_STYLESHEET = doxygen-awesome.css HTML_COLORSTYLE = LIGHT # required for Doxygen >= 1.9.5 # Optional: Enable treeview sidebar GENERATE_TREEVIEW = YES DISABLE_INDEX = NO FULL_SIDEBAR = NO # Color style options (adjust to match your primary color) HTML_COLORSTYLE_HUE = 209 HTML_COLORSTYLE_SAT = 255 HTML_COLORSTYLE_GAMMA = 113 ``` -------------------------------- ### Initialize Paragraph Link Extension Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/api-reference/paragraph-link.md Call this method after the document is ready to initialize the paragraph link extension. It scans for headers and adds clickable link icons. ```javascript DoxygenAwesomeParagraphLink.init() ``` -------------------------------- ### Lazy Initialization of Extensions Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/extension-architecture.md Defers DOM queries until the init() method is called, ensuring script load time is negligible. DOM queries are performed only when the page is ready. ```javascript // No DOM queries on script load static init() { // DOM queries only here, after page ready } ``` -------------------------------- ### Delayed Initialization with jQuery Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/extension-architecture.md Shows how extensions defer DOM manipulation until the page is fully loaded using jQuery's ready event. This ensures that all necessary DOM elements are available. ```javascript // Synchronous execution static init() { $(function() { // jQuery ready $(document).ready(function() { // Doxygen docs ready // Actual initialization }) }) } ``` -------------------------------- ### Configure CMake FetchContent for Doxygen Awesome CSS Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/README.md Integrate Doxygen Awesome CSS into your CMake project using FetchContent. This snippet declares the content, makes it available, and saves its source directory for later use in generating the Doxyfile. ```cmake include(FetchContent) FetchContent_Declare( doxygen-awesome-css URL https://github.com/jothepro/doxygen-awesome-css/archive/refs/heads/main.zip ) FetchContent_MakeAvailable(doxygen-awesome-css) # Save the location the files were cloned into # This allows us to get the path to doxygen-awesome.css FetchContent_GetProperties(doxygen-awesome-css SOURCE_DIR AWESOME_CSS_DIR) # Generate the Doxyfile set(DOXYFILE_IN ${CMAKE_CURRENT_SOURCE_DIR}/doc/Doxyfile.in) set(DOXYFILE_OUT ${CMAKE_CURRENT_BINARY_DIR}/Doxyfile) configure_file(${DOXYFILE_IN} ${DOXYFILE_OUT} @ONLY) ``` -------------------------------- ### DoxygenAwesomeTabs.init() Source: https://github.com/jothepro/doxygen-awesome-css/blob/main/_autodocs/api-reference/tabs.md Initializes the tabs extension by transforming all elements with the class 'tabbed' into interactive tab interfaces. This method should be called after the DOM is loaded. ```APIDOC ## DoxygenAwesomeTabs.init() ### Description Initializes the tabs extension. Transforms all `.tabbed` containers into interactive tab interfaces. ### Method `static init(): void` ### Parameters None ### Returns `void` ### Execution Timing Waits for `window.load` event before executing. ### Side Effects For each `.tabbed:not(:empty)` container: 1. Enumerates tab items (`

` elements) and assigns unique IDs. 2. Creates tab buttons (`

Section Name

Section Name

Member List