15

Edit: user3840170's stylesheet does what I was planning to do, and is a cleaner solution than anything I would have come up with.

I'm working on a userscript to reverse the upcoming vote button changes.

The color of unselected vote button colors seems to be rgb(186, 191, 196) on all SE sites, but the color of selected buttons seems to vary by site. It is the CSS value --theme-primary-color, but I'm not 100% sure that isn't going away with the change, so I want to save the colors from as many sites as possible.

Here's a bookmarklet that gets the value:

javascript:alert(getComputedStyle(document.body).getPropertyValue('--theme-primary-color'))

It works on any page of the site.

Collected so far

  • Meta: hsl(195.91836735, 80.99173554%, 47.45098039%)
  • Aviation: hsl(205.7591623, 84.14096916%, 44.50980392%)
  • SO: hsl(27, 90%, 55%)
  • Unix: hsl(204.24242424, 70.21276596%, 27.64705882%)
  • Ask Ubuntu: hsl(12.87958115, 76.70682731%, 48.82352941%)
  • Server Fault: hsl(358, 62%, 47%)
  • Law, PLDI, probably all beta/beta-design sites: hsl(205, 47%, 42%)
  • Aviation Meta, PLDI Meta, Law Meta, Meta SO, probably all per-site Metas: hsl(210, 8%, 5%)

(If it can be confirmed that --theme-primary-color isn't going away in the foreseeable future, collecting these will not be necessary.)

Improve this question
4
  • 4
    OK, so what is the question here? Also, for help writing userscripts, you have StackApps, not this site.
    – Shadow Wizard
    Commented May 22, 2023 at 16:56
  • 1
    @ShadowTheSpringWizard the question is asking for people to get the colors for their favorite sites and share them here. Should I delete this and repost on Stack Apps?
    – Someone
    Commented May 22, 2023 at 16:58
  • Isn't this information publically available at Stacks?: github.com/StackExchange/Stacks
    – Rob
    Commented May 22, 2023 at 21:41
  • There is already a Stack App (by me) that does this -- stackapps.com/questions/9443/… (although it sets the color to the same value regardless of theme).
    – TylerH
    Commented May 30, 2023 at 18:41

1 Answer 1

Reset to default
15

You don't want a complete list here, because of code simplicity and because sites may get new / updated themes. Instead, I would indeed just call

getComputedStyle(document.body).getPropertyValue('--theme-primary-color');

to get the theme's primary color, which is (as far as I checked) the color of the vote buttons when selected.

I'm not an employee, but I'll bet a truckload of money that a site gets a new theme before that variable disappears. If it does, your script could just fallback to the stock/beta theme color ...

Improve this answer
5
  • So --theme-primary-color isn't going away?
    – Someone
    Commented May 22, 2023 at 16:59
  • It is the vote button color, and my bookmerklet works with almost exactly that code you wrote.
    – Someone
    Commented May 22, 2023 at 17:00
  • Actually it doesn't look like even this is necessary; just pasting <button class="js-vote-up-btn flex--item s-btn s-btn__unset c-pointer fc-theme-primary" data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="true" aria-label="Up vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby="--stacks-s-tooltip-oxqjjofg"> <svg aria-hidden="true" class="svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 25h32L18 9 2 25Z"></path></svg> </button> into any site shows in that site's color.
    – Someone
    Commented May 22, 2023 at 17:05
  • (although a script might be needed if any classes are removed from the CSS)
    – Someone
    Commented May 22, 2023 at 17:06
  • 6
    @Someone --theme-primary-color is coming from Stacks: stackoverflow.design/product/guidelines/theming see github.com/StackExchange/Stacks/blob/develop/lib/exports/… and all sites use stacks now.
    – rene Mod
    Commented May 22, 2023 at 17:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .