Custom JS and CSS (#1950)

* First commit for custom styles and JS

* Adjusted classes

* Added ids and classes for services and bookmarks

* Apply suggestions from code review

* Remove mime dependency

* Update settings.json

* Detect custom css / js changes, no refresh

* Added preload to custom scripts and styles so they can load earlier

* Added data attribute name for bookmarks too

* Update [path].js

* code style, revert some pointer changes

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src/components/toggles/color.jsx

@@ -38,7 +38,7 @@ export default function ColorToggle() {
   }
 
   return (
-    <div className="w-full self-center">
+    <div id="color" className="w-full self-center">
       <Popover className="relative flex items-center">
         <Popover.Button className="outline-none">
           <IoColorPalette

src/components/toggles/revalidate.jsx

@@ -10,7 +10,7 @@ export default function Revalidate() {
   };
 
   return (
-    <div className="rounded-full flex align-middle self-center mr-3">
+    <div id="revalidate" className="rounded-full flex align-middle self-center mr-3">
       <MdRefresh onClick={() => revalidate()} className="text-theme-800 dark:text-theme-200 w-6 h-6 cursor-pointer" />
     </div>
   );

src/components/toggles/theme.jsx

@@ -11,7 +11,7 @@ export default function ThemeToggle() {
   }
 
   return (
-    <div className="rounded-full flex self-end">
+    <div id="theme" className="rounded-full flex self-end">
       <MdLightMode className="text-theme-800 dark:text-theme-200 w-5 h-5 m-1.5" />
       {theme === "dark" ? (
         <MdToggleOn