Tip: Inject custom HTML/JavaScript into notes for a dynamic browser homepage with dark mode switching

General
1

Hi! I’ve discovered a neat trick that lets you create a dynamic HTML homepage with automatic dark mode switching using Bear and Shortcuts.

I started using Bear as my browser bookmarks manager, and whenever I update the file, I export the note as an HTML file to my computer using a Shortcuts shortcut. Then, in my browser, I’ve set that HTML file as my homepage. The downside is that, natively, it doesn’t support dark mode. However, I discovered today that you can inject HTML/JavaScript code into a note, and when exported as an HTML file, this code embeds itself into that export. Now my bookmarks homepage automatically switches between light and dark mode based on my system settings. :slight_smile:

I’m not sure what other use cases there might be, but I thought it was worth sharing nonetheless.

For reference, here is my Shortcuts shortcut that handles the export process:

Screenshot 2025-05-05 at 07.41.59
Screenshot 2025-05-05 at 07.41.592624×1780 257 KB

And here is the HTML/JavaScript code. Insert it at the end of your note. It will appear in Bear itself, but won’t be visible when viewing the exported HTML file in your browser - it will only function behind the scenes to enable the dark mode switching.

<!-- Auto dark mode script -->

<script>
// Check for dark mode preference
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');

// Create dark mode styles
const darkModeStyles = document.createElement('style');
darkModeStyles.textContent = `
  body.dark-mode {
    background-color: #1E222A;
    color: #e0e0e0;
  }
  body.dark-mode a {
    color: #80b3ff;
  }
  body.dark-mode .document-wrapper {
    background-color: #1E222A;
    color: #e0e0e0;
  }
  body.dark-mode h1, 
  body.dark-mode h2, 
  body.dark-mode h3, 
  body.dark-mode h4, 
  body.dark-mode h5, 
  body.dark-mode h6 {
    color: #ffffff;
  }
  body.dark-mode li {
    color: #e0e0e0;
  }
  body.dark-mode blockquote {
    color: #e0e0e0;
  }
`;
document.head.appendChild(darkModeStyles);

// Set dark mode based on system preference
function setDarkMode(isDark) {
  if (isDark) {
    document.body.classList.add('dark-mode');
  } else {
    document.body.classList.remove('dark-mode');
  }
}

// Handle system preference changes
function handleSystemPreferenceChange(e) {
  setDarkMode(e.matches);
}

// Set initial mode
setDarkMode(prefersDarkScheme.matches);

// Add event listener for preference changes
if (prefersDarkScheme.addEventListener) {
  prefersDarkScheme.addEventListener('change', handleSystemPreferenceChange);
} else if (prefersDarkScheme.addListener) {
  prefersDarkScheme.addListener(handleSystemPreferenceChange);
}

// Apply dark mode to elements if needed
if (document.body.classList.contains('dark-mode')) {
  const textElements = document.querySelectorAll('li, blockquote, p');
  textElements.forEach(el => {
    if (getComputedStyle(el).color === 'rgb(0, 0, 0)' || 
        getComputedStyle(el).color === '#000000' || 
        getComputedStyle(el).color === 'black' ||
        (getComputedStyle(el).color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/) && 
        getComputedStyle(el).color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/)[1] < 50)) {
      el.style.color = '#e0e0e0';
    }
  });
}
</script>
1 Like