No Description

editor-dark-mode-support.js 1.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. /* global twentytwentyoneIsDarkMode, setTimeout */
  2. // Check the color scheme preference and inject the classes if necessary.
  3. if ( document.body.classList.contains( 'twentytwentyone-supports-dark-theme' ) ) {
  4. twentytwentyoneDarkModeEditorInit();
  5. }
  6. /**
  7. * Once the editor loads, add the dark mode class.
  8. *
  9. * Wait for the editor to load by periodically checking for an element, then we add the classes.
  10. *
  11. * @since Twenty Twenty-One 1.0
  12. *
  13. * @param {number} attempt Track the number of tries
  14. * @return {void}
  15. */
  16. function twentytwentyoneDarkModeEditorInit( attempt ) {
  17. var container = document.querySelector( '.block-editor__typewriter' ),
  18. maxAttempts = 8;
  19. // Set the initial attempt if it's undefined.
  20. attempt = attempt || 0;
  21. if ( twentytwentyoneIsDarkMode() ) {
  22. if ( null === container ) {
  23. // Try again.
  24. if ( attempt < maxAttempts ) {
  25. setTimeout(
  26. function() {
  27. twentytwentyoneDarkModeEditorInit( attempt + 1 );
  28. },
  29. // Double the delay, give the server some time to breathe.
  30. 25 * Math.pow( 2, attempt )
  31. );
  32. }
  33. return;
  34. }
  35. document.body.classList.add( 'is-dark-theme' );
  36. document.documentElement.classList.add( 'is-dark-theme' );
  37. container.classList.add( 'is-dark-theme' );
  38. }
  39. }