Vivaldi original/legacy theme



  • 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.


  • Moderator

    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?


  • Moderator

    @luetage I've installed the oldest Vivaldi version that I have on my PC and took screenshots of it.

    0_1488217403576_vivaldi.png

    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.
    legacy theme


  • Moderator

    @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.


  • Moderator

    @luetage Oh, that must be an OS thing then. On Windows it looks different:

    Vivaldi



  • 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 :D I can't remember when the buttons on Start Page had this spacing and style.


  • Moderator

    @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. Can be used with any theme.

    #switch, #panels-container:after {
            background: #2d2d2d;
    }
    
    #switch button svg {
    	fill: #9c9c9c;
    }
    
    #switch button.active svg {
    	fill: #484848;
    }
    
    #switch button.active, #switch button.active:hover {
    	background: #fff !important;
    }
    
    #switch button:hover {
    	background: #474747 !important;
    }
    
    #switch .webviewbtn, #switch button {
    	background: transparent !important;
    }
    

Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.