From 55e1672883ef57324d7ae84de33a00a7dd4c14c8 Mon Sep 17 00:00:00 2001
From: neon_arch <mustafadhuleb53@gmail.com>
Date: Tue, 18 Jul 2023 18:21:54 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9C=20docs:=20update=20the=20theming?=
 =?UTF-8?q?=20and=20customisation=20explainations=20(#148)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/theming.md | 391 +++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 319 insertions(+), 72 deletions(-)

diff --git a/docs/theming.md b/docs/theming.md
index 49f3f22..86e5693 100644
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -8,17 +8,17 @@ By default `websurfx` comes with 9 colorschemes to choose from which can be easi
 
 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:
 
-``` css
-:root{
-  --bg: <background color>;
-  --fg: <foreground color (text color)>;
-  --1: <color 1>;
-  --2: <color 2>;
-  --3: <color 3>;
-  --4: <color 4>;
-  --5: <color 5>;
-  --6: <color 6>;
-  --7: <color 7>;
+```css
+: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>;
 }
 ```
 
@@ -27,17 +27,17 @@ Creating coloschemes is as easy as it gets it requires the user to have a theme
 
 **Example of `catppuccin-mocha` colorscheme:**
 
-``` css
+```css
 :root {
-  --bg: #1e1e2e;
-  --fg: #cdd6f4;
-  --1: #45475a;
-  --2: #f38ba8;
-  --3: #a6e3a1;
-  --4: #f9e2af;
-  --5: #89b4fa;
-  --6: #f5c2e7;
-  --7: #ffffff;
+  --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;
 }
 ```
 
@@ -47,14 +47,15 @@ Creating coloschemes is as easy as it gets it requires the user to have a theme
 
 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](https://github.com/neon-mmd/websurfx/wiki/configuration) section of the wiki.
 
-## Custom 
+## Custom
 
-To write custom color scheme, it requires the user to have some knowledge of `css stylesheets`. 
+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
-``` css
+
+```css
 * {
   padding: 0;
   margin: 0;
@@ -71,11 +72,13 @@ body {
   justify-content: space-between;
   align-items: center;
   height: 100vh;
-  background: var(--1);
+  background: var(--color-one);
 }
 ```
+
 ### Styles for the index page
-``` css
+
+```css
 .search-container {
   display: flex;
   flex-direction: column;
@@ -88,8 +91,10 @@ body {
   display: flex;
 }
 ```
+
 ### Styles for the search box and search button
-``` css
+
+```css
 .search_bar {
   display: flex;
 }
@@ -101,7 +106,7 @@ body {
   outline: none;
   border: none;
   box-shadow: rgba(0, 0, 0, 1);
-  background: var(--fg);
+  background: var(--foreground-color);
 }
 
 .search_bar button {
@@ -114,8 +119,8 @@ body {
   outline: none;
   border: none;
   gap: 0;
-  background: var(--bg);
-  color: var(--3);
+  background: var(--background-color);
+  color: var(--color-three);
   font-weight: 600;
   letter-spacing: 0.1rem;
 }
@@ -125,10 +130,12 @@ body {
   filter: brightness(1.2);
 }
 ```
+
 ### Styles for the footer and header
-``` css
+
+```css
 header {
-  background: var(--bg);
+  background: var(--background-color);
   width: 100%;
   display: flex;
   justify-content: right;
@@ -151,7 +158,7 @@ footer ul li a,
 header ul li a:visited,
 footer ul li a:visited {
   text-decoration: none;
-  color: var(--2);
+  color: var(--color-two);
   text-transform: capitalize;
   letter-spacing: 0.1rem;
 }
@@ -162,7 +169,27 @@ header ul li a {
 
 header ul li a:hover,
 footer ul li a:hover {
-  color: var(--5);
+  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 {
@@ -185,8 +212,10 @@ footer {
   align-items: center;
 }
 ```
+
 ### Styles for the search page
-``` css
+
+```css
 .results {
   width: 90%;
   display: flex;
@@ -213,28 +242,28 @@ footer {
 
 .results_aggregated .result h1 a {
   font-size: 1.5rem;
-  color: var(--2);
+  color: var(--color-two);
   text-decoration: none;
   letter-spacing: 0.1rem;
 }
 
 .results_aggregated .result h1 a:hover {
-  color: var(--5);
+  color: var(--color-five);
 }
 
 .results_aggregated .result h1 a:visited {
-  color: var(--bg);
+  color: var(--background-color);
 }
 
 .results_aggregated .result small {
-  color: var(--3);
+  color: var(--color-three);
   font-size: 1.1rem;
   word-wrap: break-word;
   line-break: anywhere;
 }
 
 .results_aggregated .result p {
-  color: var(--fg);
+  color: var(--foreground-color);
   font-size: 1.2rem;
   margin-top: 0.3rem;
   word-wrap: break-word;
@@ -245,13 +274,13 @@ footer {
   text-align: right;
   font-size: 1.2rem;
   padding: 1rem;
-  color: var(--5);
+  color: var(--color-five);
 }
 ```
 
-### Styles for the 404 page 
+### Styles for the 404 page
 
-``` css
+```css
 .error_container {
   display: flex;
   justify-content: center;
@@ -290,16 +319,18 @@ footer {
 
 .error_content p a,
 .error_content p a:visited {
-  color: var(--2);
+  color: var(--color-two);
   text-decoration: none;
 }
 
 .error_content p a:hover {
-  color: var(--5);
+  color: var(--color-five);
 }
 ```
+
 ### Styles for the previous and next button on the search page
-``` css
+
+```css
 .page_navigation {
   padding: 0 0 2rem 0;
   display: flex;
@@ -308,8 +339,8 @@ footer {
 }
 
 .page_navigation button {
-  background: var(--bg);
-  color: var(--fg);
+  background: var(--background-color);
+  color: var(--foreground-color);
   padding: 1rem;
   border-radius: 0.5rem;
   outline: none;
@@ -326,40 +357,256 @@ footer {
 This part is only available right now in the **rolling/edge/unstable** version
 
 ```css
-.about-container article{
-    font-size: 1.5rem;
-    color:var(--fg);
-    padding-bottom: 10px;
-  }
-
-.about-container article h1{
-    color: var(--2);
-    font-size: 2.8rem;
-  }
-
-.about-container article div{
-    padding-bottom: 15px;
-  }
-
-.about-container a{
-  color:var(--3);
+.about-container article {
+  font-size: 1.5rem;
+  color: var(--foreground-color);
+  padding-bottom: 10px;
 }
 
-.about-container article h2{
-  color: var(--3);
+.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(--fg);
-  font-size:  1.6rem;
+.about-container p {
+  color: var(--foreground-color);
+  font-size: 1.6rem;
   padding-bottom: 10px;
 }
 
-.about-container h3{
+.about-container h3 {
   font-size: 1.5rem;
 }
+
+.about-container {
+  width: 80%;
+}
 ```
 
-[⬅️  Go back to Home](./README.md)
+### Styles for the Settings Page
+
+This part is only available right now in the **rolling/edge/unstable** version
+
+```css
+.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
+
+```css
+/* 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](./README.md)