[docs] docs improvements and guides (#71)

# Description

<!-- Include a summary of the change made and also list the dependencies
that are required if any -->

## Issue Ticket Number

Fixes #<ISSUE_NUMBER>

<!-- Specify above which issue this fixes by referencing the issue
number (`#<ISSUE_NUMBER>`) or issue URL. -->
<!-- Example: Fixes
https://github.com/cloudinary-community/svelte-cloudinary/issues/<ISSUE_NUMBER>
-->

## Type of change

<!-- Please select all options that are applicable. -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Fix or improve the documentation
- [ ] This change requires a documentation update


# Checklist

<!-- These must all be followed and checked. -->

- [ ] I have followed the contributing guidelines of this project as
mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md)
- [ ] I have created an
[issue](https://github.com/cloudinary-community/svelte-cloudinary/issues)
ticket for this PR
- [ ] I have checked to ensure there aren't other open [Pull
Requests](https://github.com/cloudinary-community/svelte-cloudinary/pulls)
for the same update/change?
- [ ] I have performed a self-review of my own code
- [ ] I have run tests locally to ensure they all pass
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes needed to the documentation

Author: matiasfha

docs/package.json

@@ -28,21 +28,25 @@
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
+		"sass": "1.69.5",
 		"svelte": "^4.0.0",
 		"svelte-check": "^3.4.4",
 		"svelte-preprocess": "^5.0.4",
+		"svelte-preprocess-sass": "2.0.1",
 		"tailwindcss": "^3.3.1",
 		"tslib": "^2.5.3",
 		"typescript": "^5.1.3",
 		"vite": "^4.3.9"
 	},
 	"type": "module",
 	"dependencies": {
+		"@iconify/svelte": "3.1.4",
 		"@microflash/rehype-toc": "1.0.2",
 		"@sentry/sveltekit": "7.64.0",
 		"@sveltejs/adapter-vercel": "3.0.2",
 		"@vercel/analytics": "1.0.1",
 		"cloudinary": "^1.32.0",
+		"flowbite-svelte": "0.44.20",
 		"rehype-autolink-headings": "6.1.1",
 		"rehype-slug": "5.1.0",
 		"svelte-cloudinary": "workspace:*",

docs/src/app.html

@@ -26,7 +26,7 @@
 				let currentTheme = localStorage.getItem("theme");
 				if (currentTheme === null) {
 					if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-						currentTheme = "black";
+						currentTheme = "night";
 					} else {
 						currentTheme = "light";
 					}

docs/src/app.postcss

@@ -42,3 +42,14 @@
     border: none;
     border-radius: 999px;
 }
+
+:root {
+  --searchbox-bg: #fff;
+  /* or any other variables/style */
+}
+[data-theme='light'] {
+  --searchbox-bg: oklch(0.961151 0 0);
+}
+[data-theme='night'] {
+  --searchbox-bg: rgba(249,250,251,.1);
+}