Hugging Face's logo

Spaces:
alamin655
/
surfx
Runtime error

App Files Community
surfx / docs /theming.md
neon_arch
📜 docs: update the theming and customisation explainations (#148)
55e1672
preview code
|
raw
history blame
11.2 kB

Colorschemes

Built-in

By default websurfx comes with 9 colorschemes to choose from which can be easily chosen using the config file. To how to change colorschemes please view the Configuration section of the wiki.

Custom

Creating coloschemes is as easy as it gets it requires the user to have a theme file name with the colorscheme in which every space should be replaced with a - (dash) and it should end with a .css file extension. After creating the file you need to add the following code with the colors you want:

:root {
  --background-color: <background color>;
  --foreground-color: <foreground color (text color on the website) >;
  --color-one: <color 1>;
  --color-two: <color 2>;
  --color-three: <color 3>;
  --color-four: <color 4>;
  --color-five: <color 5>;
  --color-six: <color 6>;
  --color-seven: <color 7>;
}

Note Please infer the theme file located under public/static/themes to better understand where each color is being used.

Example of catppuccin-mocha colorscheme:

:root {
  --background-color: #1e1e2e;
  --foreground-color: #cdd6f4;
  --color-one: #45475a;
  --color-two: #f38ba8;
  --color-three: #a6e3a1;
  --color-four: #f9e2af;
  --color-five: #89b4fa;
  --color-six: #f5c2e7;
  --color-seven: #ffffff;
}

Themes

Built-in

By default websurfx comes with 1 theme to choose from which can be easily chosen using the config file. To how to change themes please view the Configuration section of the wiki.

Custom

To write custom color scheme, it requires the user to have some knowledge of css stylesheets.

Here is an example of simple theme (which we provide by default with the app) which will give the user a better idea on how to create a custom theme using it as a template:

General 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  background: var(--color-one);
}

Styles for the index page 

.search-container {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  justify-content: center;
  align-items: center;
}

.search-container div {
  display: flex;
}

Styles for the search box and search button 

.search_bar {
  display: flex;
}

.search_bar input {
  padding: 1rem;
  width: 50rem;
  height: 3rem;
  outline: none;
  border: none;
  box-shadow: rgba(0, 0, 0, 1);
  background: var(--foreground-color);
}

.search_bar button {
  padding: 1rem;
  border-radius: 0;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  gap: 0;
  background: var(--background-color);
  color: var(--color-three);
  font-weight: 600;
  letter-spacing: 0.1rem;
}

.search_bar button:active,
.search_bar button:hover {
  filter: brightness(1.2);
}

Styles for the footer and header 

header {
  background: var(--background-color);
  width: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
  padding: 1rem;
}

header ul,
footer ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 1.5rem;
  gap: 2rem;
}

header ul li a,
footer ul li a,
header ul li a:visited,
footer ul li a:visited {
  text-decoration: none;
  color: var(--color-two);
  text-transform: capitalize;
  letter-spacing: 0.1rem;
}

header ul li a {
  font-weight: 600;
}

header ul li a:hover,
footer ul li a:hover {
  color: var(--color-five);
}

footer div span {
  font-size: 1.5rem;
  color: var(--color-four);
}

footer div {
  display: flex;
  gap: 1rem;
}

footer {
  background: var(--background-color);
  width: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

footer div span {
  font-size: 1.5rem;
  color: var(--4);
}

footer div {
  display: flex;
  gap: 1rem;
}

footer {
  background: var(--bg);
  width: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Styles for the search page 

.results {
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.results .search_bar {
  margin: 1rem 0;
}

.results_aggregated {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 2rem 0;
}

.results_aggregated .result {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.results_aggregated .result h1 a {
  font-size: 1.5rem;
  color: var(--color-two);
  text-decoration: none;
  letter-spacing: 0.1rem;
}

.results_aggregated .result h1 a:hover {
  color: var(--color-five);
}

.results_aggregated .result h1 a:visited {
  color: var(--background-color);
}

.results_aggregated .result small {
  color: var(--color-three);
  font-size: 1.1rem;
  word-wrap: break-word;
  line-break: anywhere;
}

.results_aggregated .result p {
  color: var(--foreground-color);
  font-size: 1.2rem;
  margin-top: 0.3rem;
  word-wrap: break-word;
  line-break: anywhere;
}

.results_aggregated .result .upstream_engines {
  text-align: right;
  font-size: 1.2rem;
  padding: 1rem;
  color: var(--color-five);
}

Styles for the 404 page 

.error_container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 5rem;
}

.error_container img {
  width: 30%;
}

.error_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.error_content h1,
.error_content h2 {
  letter-spacing: 0.1rem;
}

.error_content h1 {
  font-size: 3rem;
}

.error_content h2 {
  font-size: 2rem;
}

.error_content p {
  font-size: 1.2rem;
}

.error_content p a,
.error_content p a:visited {
  color: var(--color-two);
  text-decoration: none;
}

.error_content p a:hover {
  color: var(--color-five);
}

Styles for the previous and next button on the search page 

.page_navigation {
  padding: 0 0 2rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page_navigation button {
  background: var(--background-color);
  color: var(--foreground-color);
  padding: 1rem;
  border-radius: 0.5rem;
  outline: none;
  border: none;
}

.page_navigation button:active {
  filter: brightness(1.2);
}

Styles for the about page

This part is only available right now in the rolling/edge/unstable version

.about-container article {
  font-size: 1.5rem;
  color: var(--foreground-color);
  padding-bottom: 10px;
}

.about-container article h1 {
  color: var(--color-two);
  font-size: 2.8rem;
}

.about-container article div {
  padding-bottom: 15px;
}

.about-container a {
  color: var(--color-three);
}

.about-container article h2 {
  color: var(--color-three);
  font-size: 1.8rem;
  padding-bottom: 10px;
}

.about-container p {
  color: var(--foreground-color);
  font-size: 1.6rem;
  padding-bottom: 10px;
}

.about-container h3 {
  font-size: 1.5rem;
}

.about-container {
  width: 80%;
}

Styles for the Settings Page

This part is only available right now in the rolling/edge/unstable version

.settings_container {
  display: flex;
  justify-content: space-around;
  width: 80dvw;
}

.settings h1 {
  color: var(--color-two);
  font-size: 2.5rem;
}

.settings hr {
  border-color: var(--color-three);
  margin: 0.3rem 0 1rem 0;
}

.settings_container .sidebar {
  width: 30%;
  cursor: pointer;
  font-size: 2rem;
  display: flex;
  flex-direction: column;
  margin-right: 0.5rem;
  margin-left: -0.7rem;
  padding: 0.7rem;
  border-radius: 5px;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: var(--foreground-color);
  text-transform: capitalize;
  gap: 1.5rem;
}

.settings_container .sidebar .btn {
  padding: 0.5rem;
  border-radius: 0.5rem;
}

.settings_container .sidebar .btn.active {
  background-color: var(--color-two);
}

.settings_container .main_container {
  width: 70%;
  border-left: 1.5px solid var(--color-three);
  padding-left: 3rem;
}

.settings_container .tab {
  display: none;
}

.settings_container .tab.active {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.settings_container button {
  margin-top: 1rem;
  padding: 1rem 2rem;
  font-size: 1.5rem;
  background: var(--color-three);
  color: var(--background-color);
  border-radius: 0.5rem;
  border: 2px solid transparent;
  font-weight: bold;
  transition: all 0.1s ease-out;
  cursor: pointer;
  box-shadow: 5px 5px;
  outline: none;
}

.settings_container button:active {
  box-shadow: none;
  translate: 5px 5px;
}

.settings_container .main_container .message {
  font-size: 1.5rem;
  color: var(--foreground-color);
}

.settings_container .tab h3 {
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-four);
  margin-top: 1.5rem;
  text-transform: capitalize;
}

.settings_container .tab .description {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--foreground-color);
}

.settings_container .user_interface select {
  margin: 0.7rem 0;
  width: 20rem;
  background-color: var(--background-color);
  color: var(--foreground-color);
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  outline: none;
  border: none;
  text-transform: capitalize;
}

.settings_container .user_interface option:hover {
  background-color: var(--color-one);
}

.settings_container .engines .engine_selection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
}

.settings_container .engines .toggle_btn {
  color: var(--foreground-color);
  font-size: 1.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.settings_container .engines hr {
  margin: 0;
}

.settings_container .cookies input {
  margin: 1rem 0rem;
}

Styles for the Toggle Button

This part is only available right now in the rolling/edge/unstable version

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 6rem;
  height: 3.4rem;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--background-color);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: '';
  height: 2.6rem;
  width: 2.6rem;
  left: 0.4rem;
  bottom: 0.4rem;
  background-color: var(--foreground-color);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: var(--color-three);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--color-three);
}

input:checked + .slider:before {
  -webkit-transform: translateX(2.6rem);
  -ms-transform: translateX(2.6rem);
  transform: translateX(2.6rem);
}

/* Rounded sliders */
.slider.round {
  border-radius: 3.4rem;
}

.slider.round:before {
  border-radius: 50%;
}

⬅️ Go back to Home