Tab Color per Workspace

MasterLeo29

Greetings,

This is a quick, simple css mod for a simple idea : Change tab color for a specific workspace

Here's the css code:

div#browser:has(div.tabbar-workspace-button button[title="Workspace Name Here"]) {
    --colorTabBar: magenta !important;
}

Just switch the color and the button title to fit your needs.

Edit:
Also had the idea to make a JS mod to swap themes according to the workspace, but that idea is still "cooking"

RadekPilich

I would like to do a different text / background color for workspaces in the workspace chooser drop down list,, it's hard to navigate visually having more than 10 workspaces. Do you by any chance know how?

barbudo2005

@RadekPilich

Use this code:

button.workspace-item-wrapper.draggable[title*="VARIOS"] .avatar.picker  svg

{filter: brightness(50%) sepia(100) saturate(60) hue-rotate(200deg) !important;}

button.workspace-item-wrapper.draggable[title*="VARIOS"]  .title p

{color: #0a57a7 !important;}



button.workspace-item-wrapper.draggable[title*="HISTORICA"] .avatar.picker  svg

{filter: brightness(50%) sepia(100) saturate(60) hue-rotate(100deg) !important;}

button.workspace-item-wrapper.draggable[title*="HISTORICA"] .title p

{color: #008b00 !important;}


button.workspace-item-wrapper.draggable[title*="SERIES, IMDB & YT"] .avatar.picker  svg

{filter: brightness(50%) sepia(100) saturate(60) hue-rotate(360deg) !important;}

button.workspace-item-wrapper.draggable[title*="SERIES, IMDB & YT"]  .title p

{color: #e72f04 !important;}

barbudo2005

@RadekPilich

Better code for you:

button.workspace-item-wrapper.draggable[title="VARIOS"] .avatar.picker  svg

{filter: brightness(50%) sepia(100) saturate(60) hue-rotate(200deg) !important;}

button.workspace-item-wrapper.draggable[title="VARIOS"]  .title p

{color: blue !important; 
font-weight: 700 !important;}

button.workspace-item-wrapper.draggable[title="VARIOS"]

{background: white !important;}

To get a specific color for the svg assume that the red instead of being 360° is 0° (is the same) and follows this pattern:

RadekPilich

@barbudo2005 awesome, appreciated, thanks a lot!

barbudo2005

@RadekPilich

You will have to ask your children or grandchildren to lend you this tool.

oudstand

@MasterLeo29 said in Tab Color per Workspace:

Also had the idea to make a JS mod to swap themes according to the workspace, but that idea is still "cooking"

Do you know how to detect if a workspace is changed in JS code?

MasterLeo29

@oudstand I've come back to this idea a few days ago and im still figuring that piece. I checked the modders api (from lomn if I'm not mistaken) and haven't found a simple "on workspace change".
My current idea is to just use the regular "on tab updated" + a query selector to check the current selected workspace + some local variable to keep track of changes and go from there (but I haven't put that many hours into this mod in particular lately)

nomadic

@oudstand @MasterLeo29 You could always use a mutation observer to monitor the workspace button's title.

Here is an example that prints the current workspace's title to the devTools console:

(function () {
  function workspaceChangeDetector() {
    const workspaceButton = document.querySelector(".button-toolbar.workspace-popup > button");

    // mutation Observer for workspace Changes
    const workspaceButtonObserver = new MutationObserver(function (mutations) {
      mutations.forEach(function (mutation) {
        const workspaceTitle = mutation.target.title;
        console.log(workspaceTitle);
      });
    });

    workspaceButtonObserver.observe(workspaceButton, { attributes: true, attributeFilter: ["title"] });
  }

  // Loop waiting for the browser to load the UI
  const intervalID = setInterval(function () {
    const browser = document.getElementById("browser");
    if (browser) {
      clearInterval(intervalID);
      workspaceChangeDetector();
    }
  }, 300);
})();

MasterLeo29

@nomadic oh, I like your approach. Been a while since I used mutation observers (and, since I only code JS every now and then, I forgot xD).

Thanks for the idea

Edit : small note on the code above, it only "works" if you have the workspace names showing. so, if anyone else uses it as a base, take that in consideration

oudstand

@nomadic Good idea. My problem is, that I don't show the default workspace switcher, because I've created separate buttons.

@MasterLeo29

"on tab updated" + a query selector to check the current selected workspace

What query selector do you use to get the current workspace? Currently I fail to get the selected workspace

MasterLeo29

@oudstand The selector I was thinking about would also "require" having the switcher (either full version or icon only) visible.
I still haven't found a good way to do it without any kind of 'visual anchor', so to say

MasterLeo29

@oudstand I was thinking ... Since you've created separate buttons, you could get away with chain commands for your scenario, I think.
I've done a similar thing (in fact, I'm sure I read the idead on a vivaldi blog post about this) where you map every scenario on chain commands

oudstand

@MasterLeo29 Yeah I also read about it in a Vivaldi blog post XD
Sad that there isn't a possibility at the moment to check this without having a HTML element to reference (or we just didn't found it). Of course it would be possible to show the workspace switcher but hide it with CSS then we could query it.

RadekPilich

Is it possible in CSS to somehow substitute for example title="ABC 001" with something similar to SQL title like '%ABC%', so that I don't have to do explicit definition for each workspace, but instead use some grouping code in the workspace naming scheme, to colorize workspaces according to the group they belong to?

nomadic

@RadekPilich Yep, by including different symbols in front of the the equals sign, you can set different matching rules.

https://www.w3schools.com/css/css_attribute_selectors.asp

^= for "starts with" or $= for "ends with" might be the best to avoid accidental matches, but if you aren't worried about that, then *= for "contained anywhere within" would work. You could also use ~= for an exact word match.

thelinuxtube

@barbudo2005 where is this added to.. ive tried googling it, but find nothing on this.. could you please explain.. im stupid-ish to coding... thank you so much in advanced