[THEME] Google Dark

[treyg]

Dark theme based on google's current styles.

:root {
  --whoogle-dark-logo: #685e79;
  --whoogle-dark-page-bg: #202124;
  --whoogle-dark-element-bg: #5f6368;
  --whoogle-dark-text: #fff;
  --whoogle-dark-contrast-text: #fff;
  --whoogle-dark-secondary-text: #93b3f3;
  --whoogle-dark-result-bg: #202124;
  --whoogle-dark-result-title: #93b3f3;
  --whoogle-dark-result-url: #bec1c5;
  --whoogle-dark-result-visited: #bc8cf2;
}

a:link h3 div {
  font-size: 20px !important;
}

#whoogle-w,
#whoogle-h,
#whoogle-o-1,
#whoogle-o-2,
#whoogle-g,
#whoogle-l,
#whoogle-e {
  color: var(--whoogle-dark-text) !important;
  fill: var(--whoogle-dark-text) !important;
}

#search-bar {
  z-index: 3;

  background: #202124;
  border: 1px solid #5f6368 !important;
  box-shadow: none;
  border-radius: 24px;
}

#search-submit {
  height: 40px;
  text-align: center;
  cursor: pointer;
  font-size: 20px;
  align-content: center;
  align-items: center;
  margin: auto;
  border-radius: 5px;
  width: 100px;
  font-size: 14px;
  margin: 23px auto 0 auto;
  padding: 0 16px;
  line-height: 27px;
  height: 36px;
  min-width: 54px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  background-color: #303134 !important;
  border: none !important;
}

.search-fields {
  display: flex;
  flex-direction: column;
}

[benbusby]

Added to the wiki, thanks!

[byertsy]

This is great.

I've made a couple of small updates:

  --whoogle-dark-logo: #685e79;
  --whoogle-dark-page-bg: #202124;
  --whoogle-dark-element-bg: #5f6368;
  --whoogle-dark-text: #fff;
  --whoogle-dark-contrast-text: #fff;
  --whoogle-dark-secondary-text: #93b3f3;
  --whoogle-dark-result-bg: #202124;
  --whoogle-dark-result-title: #93b3f3;
  --whoogle-dark-result-url: #bec1c5;
  --whoogle-dark-result-visited: #bc8cf2;
}

a:link h3 div {
  font-size: 20px !important;
}

#whoogle-w,
#whoogle-h,
#whoogle-o-1,
#whoogle-o-2,
#whoogle-g,
#whoogle-l,
#whoogle-e {
  color: var(--whoogle-dark-text) !important;
  fill: var(--whoogle-dark-text) !important;
}

#search-bar {
  z-index: 3;

  background: #202124;
  border: 1px solid #5f6368 !important;
  box-shadow: none;
  border-radius: 24px;
}

#search-bar.home-search {
   padding-left: 30px; !important
}

#search-submit {
  height: 40px;
  text-align: center;
  cursor: pointer;
  font-size: 20px;
  align-content: center;
  align-items: center;
  margin: auto;
  border-radius: 5px;
  width: 100px;
  font-size: 14px;
  margin: 23px auto 0 auto;
  padding: 0 16px;
  line-height: 27px;
  height: 36px;
  min-width: 54px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  background-color: #303134 !important;
  border: none !important;
}

.search-fields {
  display: flex;
  flex-direction: column;
}

.header-tab-div-2 {
  border-top: 0px; !important
}

Is there a way to remove the thick line under the search bar on the results page. I can't seem to find a way to get rid of it:

I have tried:

.autocomplete-list {
  border: 0px; !important
}

Which works initially, however it then simply reappears.

[patrick-lohmann]

:root {
  --whoogle-dark-logo: #685e79;
  --whoogle-dark-page-bg: #202124;
  --whoogle-dark-element-bg: #5f6368;
  --whoogle-dark-text: #fff;
  --whoogle-dark-contrast-text: #fff;
  --whoogle-dark-secondary-text: #93b3f3;
  --whoogle-dark-result-bg: #202124;
  --whoogle-dark-result-title: #93b3f3;
  --whoogle-dark-result-url: #bec1c5;
  --whoogle-dark-result-visited: #bc8cf2;
}

*, *::before, *::after {
  box-sizing: border-box;
}


#whoogle-w,
#whoogle-h,
#whoogle-o-1,
#whoogle-o-2,
#whoogle-g,
#whoogle-l,
#whoogle-e {
  color: var(--whoogle-dark-text) !important;
  fill: var(--whoogle-dark-text) !important;
}

body {
  padding: 0;
  margin: 0;
}

body div {
  border: none !important;
}

.header-tab-div {
  margin-top: 1rem !important;
} 

.search-container {
  top: 24rem !important;
  left: 50% !important;
  transform: translateX(-50%), translateY(-10rem);
}

label, input, select {
  border: transparent;
  padding: .5rem;
  font-size: .85rem;
}

.logo-container {
  margin-bottom: 1.5rem !important;
}

.logo-container svg {
  width: 50%;
}

.search-fields {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

#search-form {
  position: relative;
}

#search-form:focus-within #search-bar,
#search-form:focus-within #autocomplete-list {
  background-color: hsl(0, 0%, 20%) !important;
}

#search-form:focus-within #search-bar {
  border-radius: 24px 24px 0 0 !important;
  border-bottom: 1px solid hsl(0, 0%, 35%) !important;
}

#search-bar {
  position: relative;
  z-index: 3;
  border: transparent;
  border-radius: 50vh;
  padding: 1rem !important;
  height: 48px;
  background-color: hsl(213, 5%, 30%) !important;
  font-size: 1rem;
  font-weight: normal;
  transition: all 180ms ease-in-out;
}

#search-bar:hover {
  background-color: hsl(213, 5%, 36%) !important;
}

#autocomplete-list {
  position: absolute; 
  top: 48px;
  z-index: 2;
  border-radius: 0 0 24px 24px;
  border: transparent;
  overflow: hidden;
}

#autocomplete-list .autocomplete-item{
  background: transparent !important;
  border: transparent !important;
}

#autocomplete-list .autocomplete-active{
 background-color: hsl(0, 0%, 25%) !important;
}

#autocomplete-item {
  border: transparent !important;
  background-color: none !important;
}

#autocomplete-list .autocomplete-item:last-child {
  margin-bottom: 1rem !important;
}

#search-submit,
#config-collapsible {
  border-radius: 5px;
  width: auto;
  font-size: 0.875rem;
  padding: .15rem 1.25rem;
  background-color: hsl(0, 0%, 22%) !important;
  border: transparent !important;
}

#search-submit {
  transform: translateX(-73px);
}

#config-collapsible {
  position: absolute;
  top: 180px;
  left: 50%;
  height: 2.5rem;
  transform: translateX(-20px);
}

footer {
  width: 100%;
  font-size: .85rem;
  background-color: hsl(0, 0%, 9%);
}

.content {
  height: auto;
  background-color: hsl(0, 0%, 20%) !important;
  border-radius: 24px;
}

.content.open {
  max-height: 28rem !important;
}


.config-fields {
  padding-block 1rem !important;
  margin: 1rem 0 2rem 0 !important;
}

.config-form .config-div {
  padding: 1rem 0 !important;
  margin-bottom: 1rem !important;
  display: flex;
  align-items: center;
}

#config-load,
#config-save,
#config-submit {
  border-radius: 5px;
  width: auto;
  font-size: 0.875rem;
  padding: .15rem 1rem;
  background-color: hsl(0, 0%, 28%) !important;
  border: transparent !important;
  height: 2.25rem;
}

#config-style {
  padding: 1rem;
  min-height: 10rem;
}

A few improvements and adjusted positioning to make it more like Google. It is far from perfect and needs a bit more organization. Maybe it will help someone else.