Skip to main content

I wrote a Tampermonkey script to allow us to customize the colors of the field headers!

(Tampermonkey lets you install scripts in your browser to customize and add functionality to a site, in this case, Airtable! https://www.tampermonkey.net/)

To use it, you'll need to set up the exact field IDs and colors that you want those fields to be in this bit:

 

const colorMap = {
"fldI5EIoOG25a85F7": { r: 255, g: 224, b: 204 },
"fldxj4ka7M2FwkJAP": { r: 207, g: 245, b: 209 },
"fldAPHkUW98PsaZV3": { r: 255, g: 234, b: 182 }
};

 

 

For the colors, just google 'Color Picker' and a bunch of options will show up (when I did this Google actually popped up its own Color Picker actually)

For the field IDs, right click the field header and click 'Copy URL' and then paste it somewhere, and it'll look something like this: https://airtable.com/appbvEVTtJoARHXPM/tblkT2pj3Ouz1wQRQ/viwKoIZQGVZEAfOap/fldI5EIoOG25a85F7

That last bit is what we're looking for 'fldI5EIoOG25a85F7'

---
Let me know if you have any issues installing it or could use some additonal functionality and I'll see what I can do!

I've also got a script that lets you set the entire column's colors in this other forum post

 

// ==UserScript==
// @name Airtable Header Colors
// @namespace http://thetimesaving.company
// @version 22-Jan-25
// @description Changes the header color in Airtable views.
// @author adam@thetimesaving.company
// @match https://airtable.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=airtable.com
// @grant GM_addStyle
// ==/UserScript==

//Set the field headers and colors you want them to be here

//For the colors, just google 'Color Picker' and a bunch of options will show up

//For the field IDs, right click the field header and click 'Copy URL' and then paste it somewhere
//It'll look something like this: https://airtable.com/appbvEVTtJoARHXPM/tblkT2pj3Ouz1wQRQ/viwKoIZQGVZEAfOap/fldI5EIoOG25a85F7
//That last bit is what we're looking for 'fldI5EIoOG25a85F7'

//Customization start
const colorMap = {
"fldI5EIoOG25a85F7": { r: 255, g: 224, b: 204 },
"fldxj4ka7M2FwkJAP": { r: 207, g: 245, b: 209 },
"fldAPHkUW98PsaZV3": { r: 255, g: 234, b: 182 }
};
//Customization end


function applyColumnStyles() {
let styles = '';

Object.keys(colorMap).forEach(id => {
const baseColor = colorMap[id];
styles += `.cell.header[data-columnid="${id}"] { background-color: rgb(${baseColor.r}, ${baseColor.g}, ${baseColor.b}) !important; }\n`;
});

GM_addStyle(styles);
}

applyColumnStyles();

 

 

Hey @TheTimeSavingCo! I'm giving this a shot, and I'm loving it already!!!! Nice contribution!



I wonder what other stuff we can do with Tampermonkey... super interested to explore.

Mike, Consultant @ Automatic Nation

Hey ​@TheTimeSavingCo - this looks great, and is exactly what I’ve been looking for. If I install this will it only be visible to me? 

The reason I’m asking is because I am setting up Airtable base for my whole team, so I am wondering if I can implement this for the whole team, not just my own browser. 

Thank you! 

Yeap, it’s only going to appear in browsers where the script is installed I’m afraid

 

I also just noticed that formatting got lost when the forum got upgraded, so here’s the properly formatted script:

// ==UserScript==
// @name         Airtable Header Colors
// @namespace    http://thetimesaving.company
// @version      22-Jan-25
// @description  Changes the header color in Airtable views.
// @author       adam@thetimesaving.company
// @match        https://airtable.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=airtable.com
// @grant        GM_addStyle
// ==/UserScript==

//Set the field headers and colors you want them to be here

//For the colors, just google 'Color Picker' and a bunch of options will show up

//For the field IDs, right click the field header and click 'Copy URL' and then paste it somewhere
//It'll look something like this: https://airtable.com/appbvEVTtJoARHXPM/tblkT2pj3Ouz1wQRQ/viwKoIZQGVZEAfOap/fldI5EIoOG25a85F7
//That last bit is what we're looking for 'fldI5EIoOG25a85F7'

//Customization start
const colorMap = {
    "fldI5EIoOG25a85F7": { r: 255, g: 224, b: 204 },
    "fldxj4ka7M2FwkJAP": { r: 207, g: 245, b: 209 },
    "fldAPHkUW98PsaZV3": { r: 255, g: 234, b: 182 }
};
//Customization end


function applyColumnStyles() {
  let styles = '';

  Object.keys(colorMap).forEach(id => {
    const baseColor = colorMapoid];
    styles += `.cell.header.data-columnid="${id}"] { background-color: rgb(${baseColor.r}, ${baseColor.g}, ${baseColor.b}) !important; }\n`;
  });

  GM_addStyle(styles);
}

applyColumnStyles();

 

Thanks a lot Adam, I appreciate your quick reply! 

Hey ​@TheTimeSavingCo and ​@bm-amsterdam.

Thought it would be nice to share this video here, in which I go through some fun TamperMonkey use cases for Airtable Interfaces. 

 



Mike, Consultant @ Automatic Nation

Reply


Terms & Conditions