samihaddad / vertical-tabs-chrome-extension

MIT License
24 stars 4 forks source link

Better highlighting of selected tab and mouse hover-over tab #38

Open chaoscreater opened 10 months ago

chaoscreater commented 10 months ago

Hi there,

Could I please make a feature request for better highlighting of the tab that is currently active/selected, as well as the highlighting of the tab that your mouse is hovered on top of? It would be great if we can customize the colour of the highlight. At the moment, it's kinda hard to see sometimes, especially if you have 300+ tabs and multiple tab groups and you have to scroll quite a bit to find your active selected tab. Below is a screenshot showing both selected tab and hover-over tab colour:

image

chaoscreater commented 9 months ago

Got it working myself. For anyone interested, here's what I've set it to, green colour for selected tab and cyan colour for the tab your mouse cursor is hovering on top of. If you have 300+ tabs like I do and many tab groups, having a dark background will make it difficult to see where your selected tab is. But this makes it much more clearer to see:

image

The file to change is the index-f51bce70.css file and this is what I changed:

@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #E8EAED;
        --secondary-color: #9AA0A6;
        --background-color: #202124;
        --hover-background-color: #027b83;   <-------------
        --active-background-color: #178038; <-------------
        --surface-color: #2d2e31;
        --menu-background-focus-color: #202124;
        --icon-color: #dadce0;
        --icon-background-color: #ffffff1a;
        --chrome-group-text-color: #202124;
        --chrome-group-color-grey: #dadce0;
        --chrome-group-color-blue: #8ab4f7;
        --chrome-group-color-red: #f28b82;
        --chrome-group-color-yellow: #fdd663;
        --chrome-group-color-green: #81c995;
        --chrome-group-color-pink: #ff8bcb;
        --chrome-group-color-purple: #c589f9;
        --chrome-group-color-cyan: #78d9ec;
        --chrome-group-color-orange: #fcad70
    }
    hr {
        background-color: #fff3 !important
    }
}

Just sideload it into your Chromium based browser. This will work on Chrome, UnGoogled Chromium, Thorium, Brave, etc. Vertical Tabs.zip