feat(docs): update dark mode illustrations and dark hover effect (#1001)

.github/spelling/known_words_corpus.txt

@@ -678,4 +678,28 @@ bestmatches
 gnews
 newsrequest
 v20
-servicefordungeons
+servicefordungeons
+darksystemdiagramaiengine
+svg
+systemdiagramaiengine
+humantextin
+darkhumantextin
+darkaiwithpersonaldata
+aiwithpersonaldata
+darkmailroom
+darkscalinghosting
+scalinghosting
+anagentforeveryone
+darkhostingnameservice1
+darkanagentforeveryone
+hostingnameservice1
+darkagentsinteracting
+imagebytheme
+agentsinteracting
+decentralisednetwork
+darkdecentralisednetwork
+decentralised
+publicandprivateagents
+darkpublicandprivateagents
+highleveldiagram
+darkhighleveldiagram

components/grid.module.css

@@ -30,7 +30,8 @@
 }
 
 :is(html[class~="dark"] .hoverGridBox) {
-  background-color: #363841;
+  background: rgba(95, 56, 251, 0.2);
+  backdrop-filter: blur(35px);
   border: none;
   color: #bfaffd;
 }

components/landing.module.css

@@ -372,7 +372,8 @@
 }
 
 :is(html[class~="dark"] .comingSomewhereWrapper:hover) {
-  background-color: #363841;
+  background: rgba(95, 56, 251, 0.2);
+  backdrop-filter: blur(35px);
 }
 
 :is(html[class~="dark"] .comingSomewhereTitle) {

components/mdx.tsx

@@ -2,6 +2,9 @@ import React, { ReactNode, useState, useEffect, useRef } from "react";
 import { Tab as HeadlessTab } from "@headlessui/react";
 import { DropDownArrow, Tickicon } from "src/icons/shared-icons";
 import { motion } from "framer-motion";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import { ThemeMode } from "theme/fetch-ai-docs/helpers";
 
 function InfoIcon(properties) {
   return (
@@ -289,3 +292,32 @@ export function Grid2({ children }: { children: ReactNode }) {
     </div>
   );
 }
+
+interface ImageByThemePropsTypes {
+  darkSrc: string;
+  lightSrc: string;
+  alt: string;
+  width?: number | `${number}`;
+  height?: number | `${number}`;
+}
+
+export const ImageByTheme = ({
+  darkSrc,
+  lightSrc,
+  alt,
+  width,
+  height,
+}: ImageByThemePropsTypes) => {
+  const { resolvedTheme } = useTheme();
+  const src = resolvedTheme === ThemeMode.Dark ? darkSrc : lightSrc;
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      layout="responsive"
+      className="nx-my-6 nx-rounded-lg"
+    />
+  );
+};

components/tab.module.css

@@ -23,7 +23,8 @@
 }
 
 :is(html[class~="dark"] .hoverGuideBox) {
-  background: #363841;
+  background: rgba(95, 56, 251, 0.2);
+  backdrop-filter: blur(35px);
   box-shadow: none;
 }
 

pages/concepts/agent-services/agent-hosting.mdx

@@ -1,4 +1,11 @@
 import { Callout } from 'nextra/components'
+import { ImageByTheme } from "components/mdx";
+import AnAgentForEveryone from 'src/images/an-agent-for-everyone.png';
+import DarkAnAgentForEveryone from 'src/images/dark-an-agent-for-everyone.svg';
+import ScalingHosting from 'src/images/scaling-hosting.png';
+import DarkScalingHosting from 'src/images/dark-scaling-hosting.svg';
+import HostingNameService1 from 'src/images/hosting-name-service_1.png';
+import DarkHostingNameService1 from 'src/images/dark-hosting-name-service_1.svg';
 
 # Agentverse: My Agents
 
@@ -8,7 +15,12 @@ The Agentverse My Agents tab enables all users to get quickly started and to dep
 
 With the world moving every increasingly towards an automated future where technology will play a greater central role in everyone's life, we will all require an agent to represent and help us in interacting and carry out operations with one other.
 
-![](../../../src/images/an-agent-for-everyone.png)
+
+<ImageByTheme
+  darkSrc={DarkAnAgentForEveryone}
+  lightSrc={AnAgentForEveryone}
+  alt="an-agent-for-everyone"
+/>
 
 ## Deploy and run agents
 
@@ -24,7 +36,12 @@ The **My Agents** section manages all the important steps about making sure that
 
 The **My Agents** section is designed to scale automatically with the number of messages that your agent receives. The benefit for you is that you do not have to carry the hassle of continuously deploying your agents, given that we run them for you using cloud technology. This means that your agents will continue running and receiving messages without the need of your presence for them to be deployed. Thus, as a developer, you can focus on making the most awesome agent code!
 
-![](../../../src/images/scaling-hosting.png)
+
+<ImageByTheme
+  darkSrc={DarkScalingHosting}
+  lightSrc={ScalingHosting}
+  alt="scaling-hosting"
+/>
 
 ## Secure runtime
 
@@ -40,4 +57,10 @@ An agent that only checks for an oracle value every 12 hours will be much cheape
 
 Hosted agents on the Agentverse can be given a human name so that you can find them faster, as can others for any type of development purposes.
 
-![](../../../src/images/hosting-name-service_1.png)
+<ImageByTheme
+  darkSrc={DarkHostingNameService1}
+  lightSrc={HostingNameService1}
+  alt="hosting-name-service1"
+/>
+
+

pages/concepts/agent-services/agent-mail.mdx

@@ -1,4 +1,7 @@
 import { Callout } from 'nextra/components'
+import { ImageByTheme } from "components/mdx";
+import Mailroom from 'src/images/mailroom.png';
+import DarkMailroom from 'src/images/dark-mailroom.svg';
 
 # Agentverse: Mailroom / IoT Gateway
 
@@ -10,7 +13,11 @@ The **Agentverse Mailroom** is a service that allows you to set up mailboxes for
 
 The mailroom service also enables communication between agents registered in Agentverse and local agents: your local agents can access the APIs in the Agentverse to retrieve the information needed to communicate with the hosted agents registered in the Agentverse platform.
 
-![](../../../src/images/mailroom.png)
+<ImageByTheme
+  darkSrc={DarkMailroom}
+  lightSrc={Mailroom}
+  alt="mailroom"
+/>
 
 ## Next steps
 

pages/concepts/ai-engine/ai-engine-intro.mdx

@@ -1,13 +1,21 @@
 import { Callout } from 'nextra/components'
 import PackageVersion from 'components/package-version'
+import { ImageByTheme } from "components/mdx";
+import SystemDiagramAiEngine from 'src/images/concepts/ai-engine/system_diagram_ai_engine.png';
+import DarkSystemDiagramAiEngine from 'src/images/concepts/ai-engine/dark_system_diagram_ai_engine.svg';
 
 # AI Engine
 
 ## Introduction
 
 The **AI Engine** is a system that combines [Agents ↗️](/concepts/agents/agents) with human-readable text input to create a scalable AI infrastructure that supports Large Language Models (LLMs). It is at the heart of [DeltaV ↗️](/concepts/ai-engine/deltav) and its functionalities. The goal of the AI Engine is to analyze, understand and link human input to agents by facilitating natural language interactions. The AI Engine reads user input, converts it into actionable tasks and selects the most appropriate AI agent registered in the Agentverse to perform the Objective Tasks provided by users.
 
-![](../../../src/images/concepts/ai-engine/system_diagram_ai_engine.png)
+
+<ImageByTheme
+  darkSrc={DarkSystemDiagramAiEngine}
+  lightSrc={SystemDiagramAiEngine}
+  alt="system-diagram-ai-engine"
+/>
 
 The AI Engine is characterized by a variety of different tasks. It is able to provide answers to complex queries and then carry out various actions, such as making a booking for a hotel. This is achieved through its ability to understand users' preferences and goals through **contextual understanding**. The AI Engine examines trends and turns random inputs into meaningful insights by evaluating previous interactions. When uncertainty comes into play, the AI Engine solicits feedback from the user to verify that its suggestions and recommendations match the user's end goal. In this way, the AI Engine actively anticipates the needs of users and adapts to them. We look forward to creating an ecosystem in which technology becomes an ally in achieving users' goals.
 

pages/concepts/ai-engine/powering-connections-and-smart-operations-in-deltav.mdx

@@ -1,8 +1,21 @@
+import { ImageByTheme } from "components/mdx";
+import AiWithPersonalData from 'src/images/concepts/ai-engine/ai_with_personal_data.png';
+import DarkAiWithPersonalData from 'src/images/concepts/ai-engine/dark_ai_with_personal_data.svg';
+import HumanTextIn from 'src/images/concepts/ai-engine/human_text_in.png';
+import DarkHumanTextIn from 'src/images/concepts/ai-engine/dark_human_text_in.svg';
+import HotelTasksGoThroughTheEngineToRepresentativeAgents from 'src/images/concepts/ai-engine/hotel_tasks_go_through_the_engine_to_representative_agents.png';
+import DarkHotelTasksGoThroughTheEngineToRepresentativeAgents from 'src/images/concepts/ai-engine/dark_hotel_tasks_go_through_the_engine_to_representative_agents.svg';
+
 # Powering connections and smart operations in DeltaV
 
 The AI Engine stands at the core of [DeltaV ↗️](https://deltav.agentverse.ai/login) and its features, as it allows users and developers to connect to a wide range of agent-based [functions ↗️](/guides/agents/intermediate/agent-functions). Once an agent is [registered ↗️](/guides/agentverse/registering-agent-services), the offered Agent Function is visible to the AI Engine and it can start connecting users and Agent functionalities.
 
-![](../../../src/images/concepts/ai-engine/ai_with_personal_data.png)
+<ImageByTheme
+  darkSrc={DarkAiWithPersonalData}
+  lightSrc={AiWithPersonalData}
+  alt="ai-with-personal-data"
+/>
+
 
 This system is equipped with personalized capabilities, supported by an internal agent that performs tasks efficiently. An internal agent is created by the AI Engine and made available for communication via the DeltaV user interface. The AI Engine interprets the human text input provided to the agent and starts working asynchronously on your behalf as soon as it receives your intent. This customized method uses Large Language Models (LLMs), which are essential for improving the AI Engine's understanding, coordination and problem-solving capabilities.
 
@@ -24,12 +37,20 @@ In this context, a **Primary function** refers to an agent function that provide
 
 ## Deconstructing tasks: context building and smart routing
 
-![](../../../src/images/concepts/ai-engine/human_text_in.png)
+<ImageByTheme
+  darkSrc={DarkHumanTextIn}
+  lightSrc={HumanTextIn}
+  alt="human-text-in"
+/>
 
 Finding new information is a key focus of the AI Engine to significantly improve the user journey. This is crucial for the execution of Agent Functions, such as booking a hotel room for your holiday in a specific city. In an environment where reservations are centralized, this seems like a simple process. However, for the booking to be successful, the AI Engine must be able to understand the user's input and objectives and communicate with multiple agents. At this stage, the AI Engine's ability to **understand and plan** is very important: the user's goal is broken down into a series of smaller primary and secondary functions, each representing an integral step towards the desired end result. This coordination may be automatic, or in certain situations where the AI Engine is unsure, it may require user input to confirm the function selection.
 
 **Context building** plays a crucial role, allowing the AI Engine to continuously improve its understanding by transforming data. Context building is an ongoing process within the AI Engine that involves the continuous improvement of the knowledge base during the AI Engine session. In other words, context building is the continuous act of collecting and/or transforming new knowledge to complete a task.
 
-![](../../../src/images/concepts/ai-engine/hotel_tasks_go_through_the_engine_to_representative_agents.png)
+<ImageByTheme
+  darkSrc={DarkHotelTasksGoThroughTheEngineToRepresentativeAgents}
+  lightSrc={HotelTasksGoThroughTheEngineToRepresentativeAgents}
+  alt="hotel-tasks-go-through-the-engine-to-representative-agents"
+/>
 
 The final step of the AI Engine is **smart routing**, that is the ongoing process within the AI Engine that makes it aware of all registered Agents and Agent Function according to the objective for which they are best suited for. This process takes into account the context and past performance history of these agents to guide the AI Engine's decision-making process. In this way, the AI Engine selects the most suitable agents, taking into account the agents' functions and their past performance metrics. **Trust** becomes a key factor, favoring agents with a track record of reliable behavior. Smart routing not only ensures the completion of objectives, but also creates a sense of reliability and efficiency in the operations.

pages/concepts/introducing-fetchai.mdx

@@ -1,3 +1,11 @@
+import { ImageByTheme } from "../../components/mdx";
+import HighLevelDiagram from 'src/images/concepts/about/High-level-system-diagram.png';
+import DarkHighLevelDiagram from 'src/images/concepts/about/Dark-high-level-system-diagram.svg';
+import AgentsInteracting from 'src/images/concepts/ai-agents/Agents_interacting.png';
+import DarkAgentsInteracting from 'src/images/concepts/ai-agents/Dark_agents_interacting.svg';
+import DecentralisedNetwork from 'src/images/concepts/ai-agents/decentralised_network.png';
+import DarkDecentralisedNetwork from 'src/images/concepts/ai-agents/Dark_decentralised_network.svg';
+
 # Introducing Fetch.ai: pioneering an AI powered decentralized digital economy
 
 **Fetch.ai** is developing a platform to enable the development of an AI empowered decentralized digital economy. _Agents_ are programs that can make choices on their own for individuals, companies, and devices. Agents are the actors, and the heart of Fetch.ai ecosystem.
@@ -14,7 +22,11 @@ These services make up the core architecture of Fetch.ai
 
 Agents register to Almanac so that they can be discovered in the network by other agents. Agents may register their functions to Agentverse so that AI-Engine can index these agents so that they can be called by AI-Engine. The Fetch network offers a layer of truth and trust by inherently being open.
 
-![](../../src/images/concepts/about/High-level-system-diagram.png)
+<ImageByTheme
+  darkSrc={DarkHighLevelDiagram}
+  lightSrc={HighLevelDiagram}
+  alt="HightLevel-Diagram"
+/>
 
 ### Agents: the core
 
@@ -25,14 +37,21 @@ Agents can come together to become multi-agent workflows, single agents which ca
 
 Agents are built with the  **uAgents Framework**, a lightweight library designed to facilitate the development of decentralized **Agents**. At the uAgents core is an open sourced communication protocol for agents.
 
-![](src/images/concepts/ai-agents/Agents_interacting.png)
-
+<ImageByTheme
+  darkSrc={DarkAgentsInteracting}
+  lightSrc={AgentsInteracting}
+  alt="agent-interacting"
+/>
 
 Agents can fundamentally change the way we see complicated systems. For example, supply chain management could deploy Agents using the uAgents Framework to improve operations at various stages. Demand forecasting, inventory control, logistics optimization, supplier relationships monitoring, quality control and risk mitigation in all areas can be done with their help. Agents could transform supply chain operations by increasing efficiency, reducing costs, improving accuracy and providing real-time visibility.
 
 These agents are the building blocks that allow developers to gain access to the tools and resources provided by the uAgents Framework, enabling them to create and participate in intelligent and self-managed systems that can be used in various real-world domains.
 
-![](src/images/concepts/ai-agents/decentralised_network.png)
+<ImageByTheme
+  darkSrc={DarkDecentralisedNetwork}
+  lightSrc={DecentralisedNetwork}
+  alt="decentralised-network"
+/>
 
 Agents can wrap and cannibalize LLMs to create personalized agents for any task. With the rise of Large Language Models (LLMs) and AI-related products, autonomous intelligent agents have become the link between these models and tools. They are revolutionizing the way we solve problems, make decisions and collaborate with each other.
 

pages/guides/agents/getting-started/whats-an-agent.mdx

@@ -1,5 +1,10 @@
 import { Callout } from 'nextra/components'
 import PackageVersion from 'components/package-version'
+import { ImageByTheme } from "components/mdx"
+import AgentsInteracting from 'src/images/concepts/ai-agents/Agents_interacting.png';
+import DarkAgentsInteracting from 'src/images/concepts/ai-agents/Dark_agents_interacting.svg';
+import DecentralisedNetwork from 'src/images/concepts/ai-agents/decentralised_network.png';
+import DarkDecentralisedNetwork from 'src/images/concepts/ai-agents/Dark_decentralised_network.svg';
 
 # Agents - uAgents Framework
 
@@ -13,15 +18,24 @@ The **uAgents Framework** is a lightweight library designed to facilitate the de
       Current version of the uAgents package is <PackageVersion packageName="uagents" packageType="pypi" />.
     </Callout>
 
-![](src/images/concepts/ai-agents/Agents_interacting.png)
+<ImageByTheme
+  darkSrc={DarkAgentsInteracting}
+  lightSrc={AgentsInteracting}
+  alt="agents-interacting"
+/>
+
 
 Agents are autonomous software program built using the uAgents framework and that can interact autonomously with other agents in a decentralized environment. These agents can operate in a decentralized manner, but their decentralization remains optional and dependent on individual preferences or needs.
 
 Intelligent agents can fundamentally change the way we see complicated systems. For example, supply chain management could deploy Agents using the uAgents Framework to improve operations at various stages. Demand forecasting, inventory control, logistics optimization, supplier relationships monitoring, quality control and risk mitigation in all areas can be done with their help. Agents could transform supply chain operations by increasing efficiency, reducing costs, improving accuracy and providing real-time visibility.
 
 These agents are the basic building blocks that allow developers to gain access to the tools and resources provided by the uAgents Framework, enabling them to create and participate in intelligent and self-managed systems that can be used in various real-world domains.
 
-![](src/images/concepts/ai-agents/decentralised_network.png)
+<ImageByTheme
+  darkSrc={DarkDecentralisedNetwork}
+  lightSrc={DecentralisedNetwork}
+  alt="decentralised-network"
+/>
 
 ## Why Agents
 

pages/guides/agents/intermediate/public-private-agents.mdx

@@ -1,12 +1,20 @@
 import { Callout } from 'nextra/components'
+import { ImageByTheme } from "components/mdx"
+import PublicAndPrivateAgents from 'src/images/concepts/ai-agents/public_and_private_agents.png'
+import DarkPublicAndPrivateAgents from 'src/images/concepts/ai-agents/dark_public_and_private_agents.svg'
 
 # Public and private agents
 
 ## Introduction
 
 Transparency is a fundamental principle in decentralized finance (DeFi) and blockchain systems. Within the Fetch.ai network, **users have the ability to determine the amount of information they wish to publish**. This is thanks to the ability for users to create Agents as either **public** or **private**, based on their **introspectivity** and **protocol exposure** through the [Agentverse ↗️](/concepts/agent-services/agentverse-intro) platform.
 
-![](src/images/concepts/ai-agents/public_and_private_agents.png)
+<ImageByTheme
+  darkSrc={DarkPublicAndPrivateAgents}
+  lightSrc={PublicAndPrivateAgents}
+  alt="public-and-private-agents"
+/>
+
 
 This allows users to provide greater flexibility to Agents, creating a balance between transparency and privacy for every operation they perform on the network.