Legacy Panel
-
I'd like to try to recreate the original theming of Vivaldi and could use some help. Does anyone know the exact hex colors of the browser before theming became a thing? Including, if possible, the icon color of the panel.
-
Background:
#f6f6f6
Foreground:#111111
Highlight:#006ed7
Accent:#de3434
Panel:
#1f262a
Panel icon:#8f9395
Active panel icon:#484848
Active panel icon background:#f2f2f2
Hovered panel icon background:#30363a
-
@pafflick Yeah, that seems to be correct, thanks.
Where did you get the colors? I picked them from screenshots, but they are ever so slightly off.
I'm still unsure about a few things- I thought the foreground used to be #333
- I can't quite pin down the background of the tabs (running Vivaldi without page color), nowadays on the subtle theme it's #ccc, but on the pictures it seems to be something in the line of #cecece
But yeah, where do you look this up?
-
@luetage I've installed the oldest Vivaldi version that I have on my PC and took screenshots of it.
I was not sure where to pick the "Foreground" color - in current version it changes the font color in settings and thus I picked it up from the font color in the "old" Vivaldi's settings.
Background tabs were white (
#ffffff
). -
For anyone interested I put up the codes for the panel, the rest can be done in settings/themes.
.theme-light #switch { background: #1f262a; } .theme-light #switch button svg { fill: #8f9395; } .theme-light #switch button.active svg { fill: #484848; } .theme-light #switch button.active, .theme-light #switch button.active:hover { background: #fff !important; } .theme-light #switch button:hover { background: #30363a !important; }
I went with #fff for the active panel background, because #f2f2f2 looks somehow wrong with the completely white background of the opened panel. But yeah, that's the return of the legacy panel for me, at least till I grow tired of it ^^
Thanks for the help pafflick. I think we had a misunderstanding though about tab backgrounds. I meant the color of the actual bar behind the tabs. On the pictures it's a light grey, but I remember it as slightly darker. I went with "apply accent color to active window" and an accent color of #cecece, which is probably wrong, but it comes close enough. Also I don't think the active tab background was white, but I could be mistaken.
Picture of finished theme, ignore highlight color, it's not legacy.
-
@luetage said in Vivaldi original/legacy theme:
I went with #fff for the active panel background, because #f2f2f2 looks somehow wrong with the completely white background of the opened panel.
I've re-checked this and both the panel background and the active panel icon background are white. I don't know where I picked the
#f2f2f2
, but it is indeed wrong...@luetage said in Vivaldi original/legacy theme:
I think we had a misunderstanding though about tab backgrounds. I meant the color of the actual bar behind the tabs.
Then you're talking about
.tabs-container
which is#f6f6f6
. -
Hmm, no, look at the picture in above post. The color of the addressbar and the active tab is #f6f6f6 -- that's the background in theming -- I'm talking about the accent color applied to window. In the picture it's the color behind the osx buttons.
-
@luetage Oh, that must be an OS thing then. On Windows it looks different:
-
You have tab color from active page activated, I believe that's the difference. But it's entirely possible that there are differences between the operating systems nevertheless. Wouldn't surprise me.
Also that's a really early version I can't remember when the buttons on Start Page had this spacing and style.
-
@luetage said in Vivaldi original/legacy theme:
You have tab color from active page activated
I'm using the default settings. There's only "Color Active Tab" option which is the equivalent of "Accent Color from Active Page" in current versions of Vivaldi. If I turn it off, all active tabs and the address bar will be dark gray
#464646
. There was no option to "Apply Accent Color to Window". -
I understand. Anyway, I found a snapshot post where they are using it the way I described (they took a picture running it on osx)
The color used is #d2d2d2. Made a few other adjustments too -- I think I'm happy with it now.
-
Update to the legacy panel with a few fixes. Works on any light theme and doesn't alter dark themes.
/* legacy panel */ .theme-light #switch, .theme-light #panels-container:after { background: #2d2d2d; box-shadow: none !important; } .theme-light #switch button svg { fill: #9c9c9c; } .theme-light #switch button.active svg { fill: #484848; } .theme-light #switch button.active, .theme-light #switch button.active:hover { background: #fff !important; } .theme-light #switch button:hover { background: #474747 !important; } .theme-light #switch button { background: transparent !important; }
-
Small update, I realized the activated panel has in truth a box shadow. It can be seen on dark panel content, but also when hovering an inactive panel button.
Looks like this (tested with completely black page in panel):A simple
#switch {box-shadow: none !important;}
takes care of it.It's a matter of taste if you want the shadow or not, but personally I think it's cleaner without it. Thanks @Tiamarth for pointing out box-shadows in another thread, or I wouldn't have checked the panel for them.
-
I've never liked the usage of box shadows in the theme and removed all them awhile ago using this
* { box-shadow: none !important; }
Also, if you use the toggle button for your side panel, there will be a line as well
#panels-container:after { background-color: transparent !important; }
-
@sjudenim Hmm, there are no other box shadows annoying me currently, but good point
The panels-container:after is already in the code.
-
@luetage I appreciate the credit but, to be fair, all I said was that I had confused the ::after pseudo element for a box shadow when I initially tried to style the panel
Also, here are some changes I've made to my css:
.theme-dark #switch button svg {fill: var(--colorFg);} .theme-dark #switch button.active svg, #switch button.active svg { fill: var(--colorFg); } #switch button.active, #switch button.active:hover { background: #fff !important; } .theme-dark #switch button.active, .theme-dark #switch #switch button.active, #switch button.active:hover { background-color: var(--colorBgLightIntense) !important; }
Essentially, if user decides to use a dark theme, SVGs in the panel adopt that theme's foreground color, and the active button in the panel adopts the theme's background color. It's a better user experience, imho
-