How do I reference this Vivaldi Highlight color in CSS?

[allanmohr]

NOTE: I know how to reference it like this already:
#2979FF;

I don't want to hardcode the color in my CSS so that if I change it in Vivaldi's theme settings, it'll auto update.
Something like:
var(--colorAccentFg);

modedit: fix image embed, please use direct image link

[nomadic]

@allanmohr It is var(--colorHighlightBg).

You can find these values by inspecting Vivaldi's UI and looking at the #browser DIV.

https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools

[allanmohr]

Hmm, didn't work.
Original:
--active-tab-border-bottom-color: #2979FF;

Your recommendation:
--active-tab-border-bottom-color: var(--colorHighlightBg);

It didn't keep the color as #2979FF (specified in my Vivaldi theme's Highlight field.

[allanmohr]

I appreciate the response - I'm deciding to go another route, now - so I won't need this.

[nomadic]

@allanmohr The element where your CSS is defined could be outside the scope of where --colorHighlightBg is defined, so your assignment of --active-tab-border-bottom-color could just result in undefined.

Know you said you are going a different direction, but if you post the complete CSS, we can help you find out what is going wrong.

Here is a working example based off your variable name:

.tabbar-wrapper {
  --active-tab-border-bottom-color: var(--colorHighlightBg);
}

#browser .tab-position .tab.active {
  border-bottom: var(--active-tab-border-bottom-color) 2px solid;
}

[allanmohr]

Thanks!
Sure, I don't mind sharing my full CSS. Bear in mind, I have some sections commented-out on purpose to disable that functionality from time to time.

Here's the current:

/* =============================================================================== */
/* centered tab titles */
/* =============================================================================== */
/*
.tab .title {
  justify-content: center !important;
  font-size: x-small;
}
*/

/* =============================================================================== */
/* centered addressfield URL */
/* =============================================================================== */
.UrlField:not(.UrlField--HasEditText) .UrlBar-UrlField {
  text-align: center;
}

.UrlFragment-Wrapper {
  width: fit-content;
  left: 0;
  right: 0;
  margin: auto;
}

/* =============================================================================== */
/* hide https:// display */
/* =============================================================================== */
.UrlBar-AddressField>.SiteInfoButton:is(.secure, .certified)+.UrlBar-UrlFieldWrapper .UrlFragment-Wrapper>.UrlFragment--Lowlight:first-of-type {
  opacity: 0;
}

/* =============================================================================== */
/* secure domain green highlighter  */
/* =============================================================================== */
.UrlFragment-HostFragment-Subdomain,
.UrlFragment-HostFragment-Basedomain,
.UrlFragment-HostFragment-TLD {
  -webkit-text-stroke-width: 0.6px;
}

.UrlBar-AddressField>.SiteInfoButton:is(.secure, .certified)+.UrlBar-UrlFieldWrapper :is(.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD) {
  color: var(--colorSuccessBg);
}

/* =============================================================================== */
/* WARNING PINK DOMAIN HIGHLIGHTER */
/* =============================================================================== */
.UrlBar-AddressField>.SiteInfoButton.warning+.UrlBar-UrlFieldWrapper :is(.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD) {
  color: deeppink;
}

/* =============================================================================== */
/* HIDE LINE BETWEEN TAB BAR AND ADDRESS BAR */
/* =============================================================================== */
#browser:not(.theme-dark) #tabs-tabbar-container.top {
  box-shadow: none !important;
}

/* =============================================================================== */
/* HIGHLIGHT ACTIVE TAB ONLY */
/* =============================================================================== */
#tabs-container .tab-position .tab.active {
  /* border: 1px groove var(--colorHighlightBgDark); */
  background-color: var(--colorHighlightBgDark);
  color: var(--colorAccentFg);
  /* color: rgb(255, 255, 255) !important; */
  border-radius: 5px;
  font-size: small;
}

/* =============================================================================== */
/* Rounded tabs */
/* =============================================================================== */
/*
#header {
  padding-top: 2px;
  padding-bottom: 0px;
}

#tabs-container .tab:not(.tab-group) {
  border-radius: var(--radiusHalf);
  margin-left: 0px;
  margin-right: 0px;
}
*/

/*
.tabs-top .tab.active:not(.marked):not(.tab-mini):not(.tab-in-accordion):after,
.tabs-top .tab.active:not(.marked):not(.tab-mini):not(.tab-in-accordion):before {
  bottom: 0;
  -webkit-mask-image: radial-gradient(circle at 0 0, transparent, transparent 73%);
}

#panels-container {
  
}

.vivaldi {
  top: 5px;
}

#header #titlebar .window-buttongroup {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 1px;;
}

.toolbar-tabbar.sync-and-trash-container {
  margin-right: 8px;
}

.speeddial .dial {
  border-radius: var(--radius);
  backdrop-filter: var(--backgroundBlur);
}

.NotesManager {
  backdrop-filter: var(--backgroundBlur);
}

.NotesManager-Note {
  background-color: var(--colorBgAlpha);
  backdrop-filter: var(--backgroundBlur);
}
*/

/* =============================================================================== */
/* Change sizing of pinned tabs */
/* =============================================================================== */
/*
.tab-position[style*="--Width:31px"] {
  width: 33px !important;
  margin-right: 0;
}
*/

/* =============================================================================== */
/* Hide side panel */
/*
#panels-container.overlay, #panels-container.icons {width:0 !important;}
#panels {overflow:visible; padding:0 !important;}
:not(.resizing)#panels-container.overlay .panel-group {transition: width .1s linear !important;}
#panels-container.right.overlay > .SlideBar--FullHeight.alternate {margin-left:-35px;}
#panels-container.overlay #switch, #panels-container:not(.overlay).icons #switch {background-color: var(--colorBgAlphaBlur);}
#panels-container #switch {height: 100%; flex-basis:35px; visibility:visible !important; z-index:3;}
#panels-container.icons:not(:hover) #switch, #panels-container.switcher:not(:hover) #switch {height:50px; flex-basis: 4px; opacity:0; margin: 0 2.5px; transition: .1s .9s, background-color 0s 0s, opacity 0s 1s !important;}
*/

/* =============================================================================== */
/* Color ONLY the TAB, not the toolbars as well! */
/* =============================================================================== */
/* Tab background color */
#browser .tab-position .tab.active {
  /* background-color: #353b4a; */
  background-color: var(--colorHighlightBg);
  /* color: rgb(255, 255, 255) !important; */
  color: var(--colorAccentFg)
}
  
/* =============================================================================== */
/* EXPERIMENTAL */
/* =============================================================================== */

/* Omnibox drop-down translucency */
.OmniDropdown
{
    background: var(--colorBgAlpha);
    backdrop-filter: blur(10px);
}

/* Quick command menu translucency */
#modal-bg
{
    background-color: var(--colorBgAlpha);
    backdrop-filter: blur(10px);
}

/* Sets the background color to any non-selected 
 * element of the quick command menu to transparent */
#modal-bg *:not([data-selected])
{
    background-color: rgba(0,0,0,0)!important;
}

/*Transparent Speed Dial Thumbnails*/
.speeddial .dial {
	background-color: transparent !important;
	box-shadow: none !important;
}

/* Speed Dial | Wrap speed dial text on two rows */
.dials .dial .button-title {
  text-align: left; text-overflow: clip; white-space: pre-wrap; 
  height: 31px; line-height: 11px; margin-top: 0px; 
}

/* Blend addressbar background color */
.UrlBar-AddressField, .SearchField {
  border: none;
  color: #ffffff;
  /* background-color: var(--colorAccentBg); */
  /* border-color:var(--colorAccentBg); */
  background-color: transparent !important;
	box-shadow: none !important;
  border-color: transparent !important;
}

[nomadic]

@allanmohr Thanks. Not seeing that variable --active-tab-border-bottom-color anywhere, so guess you abandoned that approach.

Is there still a section that is causing you issues or something you want help achieving?

[allanmohr]

HAH! Apologies, I didn't think about that before posting - I had already removed that section. Honestly, I'm in a good spot where I'm at. Ultimately I just wanted to start removing static colors in my CSS and replace them with vars from the Theme so that they can adjust more dynamic.....

ie. statically set WHITE font color is fine when the background is dark, but if I change themes to white background, we have an issue!

I really appreciate all of your followups. I'm good for now, and thank you.