Make the active tab in Atom stand out

styles.less

/*
*   Have only your active Atom tab have a different style
*
*       In Atom sometimes I open four panes...
*       Top LR might correspond to an HTML template for a component, 
*       Bottom LR would correspond to similar style sheet for those components... 
*       and each pane might have multiple components.
*
*       It can be helpful if Atom styles your active tab differently. 
*       Here's one way to do that:
*/

// Step 1: Open your Atom stylesheet. 
//  Open your command palette (shift + cmd + p on a MAC) and search for 'style'
//  Select the option 'Application: Open Your Stylesheet'

// Step 2: Add these styles and save your changes:

.pane.active {
    .tab-bar {
        .active {
            background-color: #00BCD4;
        }
    }
}

/*
*   You're done! Choose a color that you like, do way different styling.
*   Open devtools in Atom (option + command + i on a MAC) and check out the DOM scaffolding, classes, attributes etc
*   Use what you find to target what you want and write some styles.
*   Here's another one that is helpful:
*/

.tab-bar {
    .tab {
        max-width: initial;
    }
}

// ^ The above style will make the active tab you are on grow to fill as much space as it can, 
//   making it easier to read the title and tell which tab you are on.