Download theme Share Report

Hogwarts

Hogwarts dark theme 🏰

  • Please visit my github page to download the custom CSS that would make your vivaldi browser look even cooler.

  • I would recommend turning on device's dark mode and using the extensions like "Dark Reader" or turning on "auto dark mode for webcontents" in vivaldi://flags this will force all the webpages you view to be in dark mode.

  • For arch users if want to force vivaldi to use dark mode go to ~/.config and create a file called vivaldi-stable.conf and enter these lines:

--force-dark-mode 
--enable-features=WebUIDarkMode

and save.

Image source
View
Made by
Size
576.9KB
Version
1
Date
Downloads
369
Colors

Comments

This theme is meant to be high contrast dark theme but since the vivaldi/chromium update a year or so ago the white border it was supposed to create around address bar has disappeard so I wrote custom CSS for it feel free to try it.

.SearchField, .UrlBar-AddressField { border-radius: var(--radius); border: 1px solid var(--colorBorder); color: var(--colorFg); background-color: var(--colorBgIntenser); align-items: center; display: flex; }

panels-container {

display: flex; flex: 0 0 auto; max-width: 61.8%; overflow: visible; position: relative; color: var(--colorFg); border: 0px solid var(--colorBorder); border-right: 1px solid var(--colorBorder); background-color: var(--colorBgAlphaBlur); z-index: 1; }

I would recommend turning on device's dark mode and using the extensions like "Dark Reader" or turning on "auto dark mode for webcontents" in vivaldi://flags this will force all the webpages you view to be in dark mode.

For arch users if want to force vivaldi to use dark mode go to ~/.config and create a file called vivaldi-stable.conf and enter these lines:

--force-dark-mode --enable-features=WebUIDarkMode

and save.

For those who don't know how to use custom CSS in vivaldi:

  1. create a file ending with .css eg: custom.css
  2. Open the file and paste the above CSS code
  3. open vivaldi and type vivaldi://experiments/ in the address field.
  4. turn on "Allow using CSS modification" option visible on the page (make sure that the checkbox next to it is ticked).
  5. next open vivaldi settings or if you can't find the settings icon type vivaldi://settings/ in the URL bar.
  6. once there go to Appearance -> custom UI modifications and click select folder and select the folder where the css file is kept.
  7. click OK and you are done you might need to reload the browser for the custom css to work.

Well that didn't go well I never realised vivaldi would use markdown my comment. let me try again:

.SearchField,
.UrlBar-AddressField {
  border-radius: var(--radius);
  border: 1px solid var(--colorBorder);
  color: var(--colorFg);
  background-color: var(--colorBgIntenser);
  align-items: center;
  display: flex;
}
#panels-container {
  display: flex;
  flex: 0 0 auto;
  max-width: 61.8%;
  overflow: visible;
  position: relative;
  color: var(--colorFg);
  border: 0px solid var(--colorBorder);
  border-right: 1px solid var(--colorBorder);
  background-color: var(--colorBgAlphaBlur);
  z-index: 1;
}

I would recommend turning on device's dark mode and using the extensions like "Dark Reader" or turning on "auto dark mode for webcontents" in vivaldi://flags this will force all the webpages you view to be in dark mode.

For arch users if want to force vivaldi to use dark mode go to ~/.config and create a file called vivaldi-stable.conf and enter these lines:

--force-dark-mode 
--enable-features=WebUIDarkMode

and save.

A new update brings us a new broken theme. I just decided to create a github repo and update my css script there. @siddharthkumarjha