Help

Re: Custom colors for the entire field/column!

222 3
cancel
Showing results for 
Search instead for 
Did you mean: 
TheTimeSavingCo
18 - Pluto
18 - Pluto

Screenshot 2025-01-28 at 11.47.17 AM.png

Here's a Tampermonkey script that'll let you set the colors of the columns!

(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, as well as the opacity when hovering over the row / having a cell selected:

 

const opacity = 0.4

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

 

I've placed instructions on how to get the field IDs and RGB color codes in the code itself.  Let me know if there are any bugs and I'll get them sorted!

I've also got another script that lets you customize the headers itself in this other forum post

TheTimeSavingCo_0-1737516008661.png

---

 

// ==UserScript==
// @name         Airtable Column Colors
// @namespace    http://thetimesaving.company
// @version      22-Jan-25
// @description  Changes the column 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==

//Customization start
//Opacity when hovering / selecting row / cell
const opacity = 0.4

//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'

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() {
  Object.entries(colorMap).forEach(([id, {r, g, b}]) => {
    const hoverColor = `rgba(${r}, ${g}, ${b}, ${opacity})`;
    const baseColor = `rgb(${r}, ${g}, ${b})`;
    const style = `
      .dataRightPaneInnerContent [data-columnid="${id}"] { background-color: ${baseColor} !important; }
      .dataRightPaneInnerContent .hover [data-columnid="${id}"] { background-color: ${hoverColor} !important; }
      .dataRightPaneInnerContent .cell.cursor.selected[data-columnid="${id}"] { background-color: ${hoverColor} !important; }
    `;

    GM_addStyle(style);
  });
}

applyColumnStyles();

 

 

4 Replies 4
Jason_Knighten1
8 - Airtable Astronomer
8 - Airtable Astronomer

This is great but not sure it will work for us (Hope I'm wrong).

In our process, we are using a Base as a template, then Save As to create client/project specific bases. I am assuming if I updated the template base and followed the same process, the IDs would change with the Save As action and thus, the solution would have to be manually deployed every time we follow that process. 

Please advise. 

Edit: Original message isn't relevant anymore and so is hidden under the spoiler below

 

Spoiler

Yeap, that's right I'm afraid.  When you duplicate the base the field IDs would all change and the Tampermonkey script would have to be updated 

You could write a script to help with this?   For example here's a script that'll output the IDs of the fields you specify in the 'fieldsToHighlight' array which will allow you to easily copy and paste stuff:

 

let table = base.getTable("Participant")
let fields = table.fields

let fieldsToHighlight=["Age", "Hobbies"]

for(let field of fields){
    if (fieldsToHighlight.includes(field.name)) {
        console.log(`${field.name}: ${field.id}`)
    }
}

 

 You could even write a script that'll output the exact Tampermokey script you need for the new base too

 

You lost me at "You could write a script". 🙄

I work with no code tools for a reason. ðŸ˜‹

Great stuff though. Seems like it would be relatively easy for Airtable to add this functionality. 

Ah I just saw this thread and tried duplicating a base and the field ID stayed the same, and so you wouldn't need to set it up for each new base!