#QuickTip: Auto Sync PhotoSwipe colors to Block Theme colors

News: As of PhotoSwipe v5 the colors which compose the overall look of PhotoSwipe are defined as CSS variables. ?? This has great potential!

1. ?? Little editing: A single central override is enough!
2. ?? Allows syncing of PhotoSwipe colors to your WordPress Block Theme Colors easily!

• Instead of setting a PhotoSwipe color variable( naming scheme --pswp-*-color ) to a static color value we instead set it to a meaningful corresponding Block Theme Color variable (naming scheme --wp--preset--color--* )
• Henceforth you only change your theme colors and PhotoSwipe will follow suite! No more manual corrections necessary after each theme change!
• Compatible even with user-configurable themes/preferences such as Light/Dark Themes!

Custom CSS

• Using !important to get precedence
• Default values outcommented on the line end

.pswp {

  /*
    MOST IMPORTANT VARIABLES
  */
  --pswp-bg: var(--wp--preset--color--base) !important; /* #000 */
  --pswp-icon-color: var(--wp--preset--color--contrast) !important ;/* #fff */
  --pswp-icon-color-secondary: var(--wp--preset--color--base) !important ; /* #4f4f4f */

  /*
    FURTHER NOTICE-ABLE VARIABLES
  */
  --pswp-icon-stroke-color: var(--wp--preset--color--base) !important ; /* #4f4f4f */
  --pswp-icon-stroke-width: 1px !important ; /* 2px */

  /*
    FINE DETAILS
  */
  /*
  --pswp-placeholder-bg: #222;
  --pswp-root-z-index: 100000;
  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
  --pswp-error-text-color: var(--pswp-icon-color);
  */
}