Custom colors for the entire field/column!

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

---

// ==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();

Page 1 / 1

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.

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

Please advise.

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

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

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

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

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.

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!

Hi Adam @TheTimeSavingCo !

I was looking for a way to color a field and came across this great suggestion. I’ve just downloaded Tampermonkey to start testing it. Do you know if this also works in Interfaces?

What I’m trying to achieve is having more than one color on the same record — for example, showing both task status and task type (Milestone). With Airtable’s native coloring options, even with conditional coloring, only one color is applied to the record line. My idea is to use Tampermonkey to color the Task Name field (to highlight Milestones), while still keeping the conditional/field coloring based on task status.

Hi @AlineW ! Hm, yeah I think it’d work fine for Grids in Interfaces after some tweaking, but not for Lists I’m afraid

If you could show me a screenshot of how you’d want the output to be I’ll see what I can do!

Hey Adam, I’m sharing with you the Gantt chart screenshot I’m trying to reproduce in Airtable.

Right now we have one page that could be switched from List to Timeline/Gantt, but since this coloring field only works in Grid view, I’m thinking of adding a Grid view option so the team can see things the way they’re used to. I’ll run some tests to see how close I can get to that spreadsheet Gantt anyway. If you have any other ideas, they’re always welcome hehe.

Ooh, I was thinking that it was coloring the entire field instead of a cell based on its content, hmm…

I’m trying to think of how I’d make the spreadsheet Gantt and I couldn’t think of a clean way to do it I’m afraid
---

Did you manage to get a Timeline/Gantt view that’s kind of close to what you want? If it’s just about coloring a single cell in that view I think it could be possible? (Theoretically, anyway)

Oh that would be great! I’ll set up this Timeline view by tomorrow and share it with you. Thank you so much =]

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded