[GH-ISSUE #1041] [THEME] Google Dark #636

New issue

Closed

opened 2026-02-25 20:36:11 +03:00 by kerem · 3 comments

kerem commented

2026-02-25 20:36:11 +03:00

Owner

Originally created by @treyg on GitHub (Jul 27, 2023).
Original GitHub issue: https://github.com/benbusby/whoogle-search/issues/1041

Originally assigned to: @benbusby on GitHub.

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;
}

Originally created by @treyg on GitHub (Jul 27, 2023). Original GitHub issue: https://github.com/benbusby/whoogle-search/issues/1041 Originally assigned to: @benbusby on GitHub. Dark theme based on google's current styles. ```css :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; } ``` <img width="1163" alt="CleanShot 2023-07-26 at 19 55 42@2x" src="https://github.com/benbusby/whoogle-search/assets/41927921/12ea6c9d-d951-461e-871e-f7c59cffe39e"> <img width="1013" alt="CleanShot 2023-07-26 at 19 59 42@2x" src="https://github.com/benbusby/whoogle-search/assets/41927921/04a50a38-2155-482f-af30-a83e61e004b2">

kerem

2026-02-25 20:36:11 +03:00

closed this issue
added the
theme
label

kerem commented

2026-02-25 20:36:11 +03:00

Author

Owner

@benbusby commented on GitHub (Aug 2, 2023):

Added to the wiki, thanks!

@benbusby commented on GitHub (Aug 2, 2023): Added to the wiki, thanks!

kerem commented

2026-02-25 20:36:11 +03:00

Author

Owner

@byertsy commented on GitHub (Nov 18, 2024):

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.

@byertsy commented on GitHub (Nov 18, 2024): This is great. I've made a couple of small updates: ```: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-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: ![line](https://github.com/user-attachments/assets/6b4473d4-caf5-4b62-8b9e-a5a1f15a1db4) I have tried: ``` .autocomplete-list { border: 0px; !important } ``` Which works initially, however it then simply reappears.

kerem commented

2026-02-25 20:36:11 +03:00

Author

Owner

@patrick-lohmann commented on GitHub (Nov 29, 2024):

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

@patrick-lohmann commented on GitHub (Nov 29, 2024): <img width="1346" alt="Bildschirmfoto 2024-11-29 um 04 58 56" src="https://github.com/user-attachments/assets/98256794-46de-4f95-98a0-a8e6d5cc8184"> ``` :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.