feat: add logo and change theme colors

Author: stropitek

docusaurus.config.js

@@ -44,7 +44,7 @@ async function createConfig() {
   return {
     title: 'ImageJS',
     tagline: 'Advanced image processing and manipulation in JavaScript.',
-    favicon: 'img/favicon.ico',
+    favicon: 'img/image-js-favicon.svg',
 
     // Set the production url of your site here
     url: 'https://image-js-docs.pages.dev/',
@@ -123,11 +123,12 @@ async function createConfig() {
       ({
         // Replace with your project's social card
         image: 'img/docusaurus-social-card.jpg',
+        colorMode: {},
         navbar: {
           title: 'ImageJS',
           logo: {
             alt: 'ImageJS',
-            src: 'img/logo.svg',
+            src: 'img/image-js-favicon.svg',
           },
           items: [
             {

src/css/custom.css

@@ -6,26 +6,26 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #1d4ed8;
+  --ifm-color-primary-dark: #1e40af;
+  --ifm-color-primary-darker: #1e3a8a;
+  --ifm-color-primary-darkest: #172554;
+  --ifm-color-primary-light: #2563eb;
+  --ifm-color-primary-lighter: #3b82f6;
+  --ifm-color-primary-lightest: #60a5fa;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #0891b2;
+  --ifm-color-primary-dark: #0e7490;
+  --ifm-color-primary-darker: #155e75;
+  --ifm-color-primary-darkest: #083344;
+  --ifm-color-primary-light: #06b6d4;
+  --ifm-color-primary-lighter: #22d3ee;
+  --ifm-color-primary-lightest: #67e8f9;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 #frontPage {

src/demo/components/ImageDemo.tsx

@@ -34,7 +34,7 @@ export default function ImageDemo({
     >
       <div style={{ display: 'inline-flex', flexDirection: 'column', gap: 4 }}>
         <div
-          className="filter-demo alert--success"
+          className="filter-demo alert--info"
           style={{
             margin: 4,
             borderRadius: 4,

src/pages/index.tsx

@@ -14,7 +14,12 @@ function HomepageHeader() {
       className={clsx('hero hero--primary', styles.heroBanner)}
     >
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
+        <img
+          alt="image-js logo"
+          src="/img/image-js.svg"
+          width={200}
+          height={200}
+        />
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <p className="frontPage__text">
           ImageJS is a JavaScript library designed to facilitate image