feat: Improve examples default style

[igoroctaviano]

Context

The examples pages were ugly. Now it's better.

Changes & Results

Changes Made:

1. Increased max-width for all examples (1400px → 1600px):

   • Updated header content, main container, and footer content in example-styles.css

2. Fixed toggle button colors in addToggleButtonToToolbar.ts:

   • Changed from bright yellow/white to theme-consistent colors
   • Toggle ON: Primary blue background (#5acce6) with dark text
   • Toggle OFF: Dark background (#090B2B) with white text

3. Updated HTML examples in examplesOld/ directory:

   • Added dark theme CSS overrides to override Bootstrap's white backgrounds
   • Updated viewport container backgrounds and borders to match theme
   • Fixed 6 HTML files: wadouri/index.html, wadors/index.html, dicomfile/index.html, wadourimultiframe/index.html, progressive-jph/index.html, index.html

4. Fixed DICOM Image Loader example:

   • Updated layout.ts to add dark background and border to cornerstone element
   • Added CSS overrides for Bootstrap styling

5. Resolved text overflow issues in PET-CT example:

   • Moved instructions from grid layout to top of page
   • Created responsive card-style layout with proper dark theme styling
   • Eliminated text leaking out of containers

Results:

• All examples now have consistent dark theme styling
• Better visual hierarchy and readability
• No more white backgrounds or jarring color mismatches
• Responsive design that works across different screen sizes
• Text properly contained without overflow issues

Testing

1. Navigate to any example page in the Cornerstone3D examples
2. Verify dark theme consistency:
   • Check that backgrounds are dark (#090B2B) instead of white
   • Confirm toggle buttons use theme colors (blue when active, dark when inactive)
   • Ensure text is white and readable
3. Test responsive behavior:
   • Resize browser window to verify max-width changes work properly
   • Check that text doesn't overflow containers
4. Test specific examples:
   • PET-CT example: Verify instructions appear at top without overflow
   • DICOM Image Loader: Check cornerstone element has proper dark background
   • Any example with toggle buttons: Verify button color changes work correctly

Checklist

PR

• My Pull Request title is descriptive, accurate and follows the
  semantic-release format and guidelines.

Code

• My code has been well-documented (function documentation, inline comments,
  etc.)

Public Documentation Updates

• The documentation page has been updated as necessary for any public API
  additions or removals.

Tested Environment

• "OS: macOS 24.6.0"
• "Node version: Latest"
• "Browser: Chrome, Firefox, Safari"

[igoroctaviano]

@sedghi let me know if this makes sense. I updated things so all new examples inherit the styles.
This PR is mostly me not loving the current examples page and wanting to improve it, but I’m totally fine closing it if you’d rather have a proper UX take it on your side.

[sedghi]

If there is a light mode too i'm fine and a toggle to switch - not all like or can use dark mode

[igoroctaviano]

@sedghi sure, added. Check screenshot.

[igoroctaviano]

@sedghi sure, added. Check the screenshot.

@wayfarer3130

[sedghi]

I think some screenshots need updating. Let's check if the CI passes.

[igoroctaviano]

@wayfarer3130 what do you think? worth merging?

[sedghi]

can you do a fake commit so that ci runs

[igoroctaviano]

@sedghi it ran again but playright tests got cancelled again

[sedghi]

can you run them locally?