Changing the color of all links in a Google Slides presentation with a Google Apps Script

We often use Google Slides at karriere.at for our presentations. To comply with our corporate identity we usually change all colors to our brand color, which is a saturated green (#8bc72a). There is one problem, though: The default hyperlink color in Google Slides is a light blue (#01afd1) and can not be changed for all slides, except if you do a lot of clicking and manually format the color of each hyperlink. Luckily, there is Google Apps Script, which allows you to automate Google Slides and other services:

Google Apps Script is a scripting language based on JavaScript that lets you do new and cool things with G Suite products like Docs, Sheets, Slides, and Forms. There’s nothing to install—we give you a code editor right in your browser, and your scripts run on Google’s servers.

– Overview of Google Apps Script

To access the script editor open up any of your presentations and head to Tools > Script editor in the menu. This will open up a project which can contain multiple scripts and has familiar Save, Run and Debug icons:

Using the Slides Service is just a matter of using a JavaScript-like scripting language and getting to know the various classes and elements a presentation consists of. We’ll start with retrieving all slides of the current presentation:

function changeLinkColorToBrandColor() {
    var deck = SlidesApp.getActivePresentation();
    var slides = deck.getSlides();
}

You can then iterate over all slides and collect their page elements:

function changeLinkColorToBrandColor() {
    var deck = SlidesApp.getActivePresentation();
    var slides = deck.getSlides();

+    var pageElements = slides.reduce(function (list, slide) {
+        return list.concat(slide.getPageElements());
+    }, []);
}

A page element is everything from shapes to tables or groups. I only care about hyperlinks in shapes, but you can extend your code to e.g. tables, if you want. This is where it starts to get a bit complicated: A page element can be converted to a different object, allowing access to new methods like getText(). getText() returns a text range, which is the content of a shape or table cell.

    var pageElements = slides.reduce(function (list, slide) {
        return list.concat(slide.getPageElements());
    }, []);

+    var textRanges = pageElements.reduce(function (list, pageElement) {
+        if (pageElement.getPageElementType() == "SHAPE") {
+            return list.concat(pageElement.asShape().getText());
+        }
+        return list;
+    }, []);
}

A text range finally gives you access to its style via getTextStyle():

    var textRanges = pageElements.reduce(function (list, pageElement) {
        if (pageElement.getPageElementType() == "SHAPE") {
            return list.concat(pageElement.asShape().getText());
        }
        return list;
    }, []);
    
+    textRanges.forEach(function (textRange) {
+        var textStyle = textRange.getTextStyle();
+        if (textStyle.hasLink()) {
+            textStyle.setForegroundColor('#8bc72a');
+        }
+    });
}

This seems to be all there is to it, but if we run this script we’ll quickly discover a problem: If a shape has normal text and hyperlinks, or if there are multiple hyperlinks, hasLink() returns null. To solve this, use the getRuns() method. A text run is a segment of text where all the characters have the same text style.

    var textRanges = pageElements.reduce(function (list, pageElement) {
        if (pageElement.getPageElementType() == "SHAPE") {
-            return list.concat(pageElement.asShape().getText());
+            return list.concat(pageElement.asShape().getText().getRuns());
        }
        return list;
    }, []);

The final script now looks as follows:

function changeLinkColorToBrandColor() {
    var deck = SlidesApp.getActivePresentation();
    var slides = deck.getSlides();

    var pageElements = slides.reduce(function (list, slide) {
        return list.concat(slide.getPageElements());
    }, []);

    var textRanges = pageElements.reduce(function (list, pageElement) {
        if (pageElement.getPageElementType() == "SHAPE") {
            return list.concat(pageElement.asShape().getText().getRuns());
        }
        return list;
    }, []);

    textRanges.forEach(function (textRange) {
        var textStyle = textRange.getTextStyle();
        if (textStyle.hasLink()) {
            textStyle.setForegroundColor('#8bc72a');
        }
    });
}

You can run the script by pressing the play icon, but only after allowing it to view and manage the presentation that’s currently opened:

Feel free to copy and modify the script from this blog post. If you have any questions please don’t hesitate to ask me on Twitter.