- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎Jan 21, 2025 08:08 PM - edited ‎Jan 27, 2025 07:49 PM
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();
 
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎Jan 28, 2025 06:10 AM
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎Jan 28, 2025 07:11 AM - edited ‎Jan 31, 2025 04:28 AM
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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎Jan 28, 2025 08:30 AM
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎Jan 31, 2025 04:29 AM - edited ‎Jan 31, 2025 04:30 AM
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!
![](/skins/images/75AB00B4920FD2D67A8CABF77C9DECC4/responsive_peak/images/icon_anonymous_message.png)