Here's an alternate version that makes the things not using a design token hotpink

javascript:(function() {
  const rootStyles = document.styleSheets;

  for (const stylesheet of rootStyles) {
    try {
      for (const rule of stylesheet.cssRules) {
        if (rule.selectorText === ':root' || rule.selectorText === ':root.gl-dark') {
          for (const property of rule.style) {
            if (!property.startsWith('--gl')) {  // Changed condition to target non-gl properties
              const propertyValue = rule.style.getPropertyValue(property).trim();
              const colorRegex = /^(#[0-9A-Fa-f]{3,8}|rgba?\((\d{1,3}%?,\s*){3,4}\d*\.?\d+\)|\b[a-z]+\b)$/i;
              if (colorRegex.test(propertyValue)) {
                rule.style.setProperty(property, 'hotpink');  // Changed to set hotpink instead of transparent
              }
            }
          }
        }
      }
    } catch (e) {
      console.warn(`Couldn't access stylesheet: ${stylesheet.href}`);
    }
  }
  console.log('Updated non-gl color properties to hotpink.');
})();

Want it as an Arc boost? igotchu

window.addEventListener('load', function() {
  const rootStyles = document.styleSheets;

  for (const stylesheet of rootStyles) {
    try {
      for (const rule of stylesheet.cssRules) {
        if (rule.selectorText === ':root' || rule.selectorText === ':root.gl-dark') {
          for (const property of rule.style) {
            if (!property.startsWith('--gl')) {
              const propertyValue = rule.style.getPropertyValue(property).trim();
              const colorRegex = /^(#[0-9A-Fa-f]{3,8}|rgba?\((\d{1,3}%?,\s*){3,4}\d*\.?\d+\)|\b[a-z]+\b)$/i;
              if (colorRegex.test(propertyValue)) {
                rule.style.setProperty(property, 'hotpink');
              }
            }
          }
        }
      }
    } catch (e) {
      console.warn(`Couldn't access stylesheet: ${stylesheet.href}`);
    }
  }
  console.log('Updated non-gl color properties to hotpink.');
});