Taba

Taba.md

Taba Code Injection: Immersive Post Body Color Scheme

Use one snippet. Add it in:

Ghost Admin > Settings > Code Injection > Site Footer

These snippets apply to:

• Post Image Cover
• Post Image Hero
• Post Video Cover

The cover layout stays the same. Only the article body color scheme changes.

Option 1: Change selected posts with an internal tag

Use this option when you want to change only specific posts.

Add this internal tag to those posts:

#default-color-scheme

Then add this snippet:

<script>
(function () {
  var post = document.querySelector('.c-post-main.tag-hash-default-color-scheme');
  if (!post) return;

  var isImageCover = post.classList.contains('c-post--image-cover');
  var isImageHero = post.classList.contains('c-custom-post--image-hero');
  var isVideoCover = post.classList.contains('c-post--video-cover');
  if (!isImageCover && !isImageHero && !isVideoCover) return;

  var main = post.closest('main[data-theme="dark"]');
  if (!main) return;

  main.removeAttribute('data-theme');

  if (isImageCover) {
    var imageCover = document.querySelector('.c-custom-post-image-cover');
    if (imageCover) imageCover.setAttribute('data-theme', 'dark');
    post.style.paddingTop = 'var(--content-flow)';
  }

  if (isVideoCover) {
    var videoCover = document.querySelector('.c-custom-post-video-cover');
    if (videoCover) videoCover.setAttribute('data-theme', 'dark');
    post.style.paddingTop = 'var(--content-flow)';
  }
})();
</script>

Option 2: Change all listed layouts

Use this option when you want every listed layout to use the selected Taba Color Scheme for the article body.

No internal tag is needed.

<script>
(function () {
  var post = document.querySelector('.c-post-main');
  if (!post) return;

  var isImageCover = post.classList.contains('c-post--image-cover');
  var isImageHero = post.classList.contains('c-custom-post--image-hero');
  var isVideoCover = post.classList.contains('c-post--video-cover');
  if (!isImageCover && !isImageHero && !isVideoCover) return;

  var main = post.closest('main[data-theme="dark"]');
  if (!main) return;

  main.removeAttribute('data-theme');

  if (isImageCover) {
    var imageCover = document.querySelector('.c-custom-post-image-cover');
    if (imageCover) imageCover.setAttribute('data-theme', 'dark');
    post.style.paddingTop = 'var(--content-flow)';
  }

  if (isVideoCover) {
    var videoCover = document.querySelector('.c-custom-post-video-cover');
    if (videoCover) videoCover.setAttribute('data-theme', 'dark');
    post.style.paddingTop = 'var(--content-flow)';
  }
})();
</script>

Option 3: Follow the reader’s device setting

Use this option when you want the article body to respond to the reader’s device setting:

• Dark mode keeps the dark article body.
• Light mode uses the selected Taba Color Scheme.

<script>
(function () {
  var post = document.querySelector('.c-post-main');
  if (!post) return;

  var isImageCover = post.classList.contains('c-post--image-cover');
  var isImageHero = post.classList.contains('c-custom-post--image-hero');
  var isVideoCover = post.classList.contains('c-post--video-cover');
  if (!isImageCover && !isImageHero && !isVideoCover) return;

  var main = post.closest('main');
  if (!main) return;

  var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

  function applyScheme() {
    if (mediaQuery.matches) {
      main.setAttribute('data-theme', 'dark');
      post.style.paddingTop = '';
      return;
    }

    main.removeAttribute('data-theme');

    if (isImageCover) {
      var imageCover = document.querySelector('.c-custom-post-image-cover');
      if (imageCover) imageCover.setAttribute('data-theme', 'dark');
      post.style.paddingTop = 'var(--content-flow)';
    }

    if (isVideoCover) {
      var videoCover = document.querySelector('.c-custom-post-video-cover');
      if (videoCover) videoCover.setAttribute('data-theme', 'dark');
      post.style.paddingTop = 'var(--content-flow)';
    }
  }

  applyScheme();

  if (mediaQuery.addEventListener) {
    mediaQuery.addEventListener('change', applyScheme);
  } else if (mediaQuery.addListener) {
    mediaQuery.addListener(applyScheme);
  }
})();
</script>