change logos based on color mode

docusaurus.config.ts

@@ -98,12 +98,13 @@ const config: Config = {
 
   themeConfig: {
     // Replace with your project's social card
-    image: 'img/mrs_logo.png',
+    image: 'img/mrs_f4f_small_light.png',
     navbar: {
       title: 'CTU MRS Docs',
       logo: {
         alt: 'CTU MRS Logo',
-        src: 'img/mrs_logo.png',
+        src: 'img/mrs_f4f_small_light.png',
+        srcDark: 'img/mrs_f4f_small_dark.png', // Dark mode logo
       },
       items: [
         {

src/components/ImageByColorMode/ImageByColorMode.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useColorMode } from '@docusaurus/theme-common';
+
+const ImageByColorMode = ({lightModeImage, darkModeImage}) => {
+  const { colorMode } = useColorMode();
+
+  return (
+    <img
+      src={colorMode === 'dark' ? darkModeImage : lightModeImage}
+      alt={colorMode === 'dark' ? darkModeImage : lightModeImage}
+      style={{ width: '100%', height: 'auto' }}
+    />
+  );
+};
+
+export default ImageByColorMode;

src/css/custom.css

@@ -33,3 +33,21 @@
 html[data-theme='dark'] button {
   color: #ffffff;
 }
+
+/* Main page theme */
+.text_image_side_by_side
+{
+  display:flex;
+  align-items:justify;
+}
+.text_image_side_by_side img
+{
+  width:60%;
+  float:right;
+}
+.text_image_side_by_side p
+{
+  width:135%;
+  text-align:justify;
+  float: left;
+}

src/pages/index.md

@@ -1,9 +1,24 @@
-![](./logos.png)
+import ImageByColorMode from '../components/ImageByColorMode/ImageByColorMode.js';
+
+<ImageByColorMode 
+lightModeImage="./img/mrs_f4f_large_light.png"
+darkModeImage="./img/mrs_f4f_large_dark.png"
+/>
 
 # MRS UAV System Documentation
-
-The MRS UAV System is an **open-source software framework** developed by the Multi-Robot Systems Group at Czech Technical University, designed to **support advanced R&D in autonomous UAV systems**, from speed racing and decentralized swarming to GNSS-denied coordination of multi-UAV formations.
 
-Please continue to <Button label="🔗 Documentation" link="/docs/introduction" /> to read more about the system usability and licensing and check out our latest updates in our <Button label="🔗 Blog" link="/blog" />.
+<div class="text_image_side_by_side">
+
+<p>
+The MRS UAV System is an **open-source software framework** developed by the Multi-Robot Systems Group at Czech Technical University, designed to assist researchers in **advanced R&D in autonomous UAV systems**, from speed racing and decentralized swarming to GNSS-denied coordination of multi-UAV formations.
+</p>
+
+![UAV image](img/x500_real.jpg)
+
+</div>
+
+<Button label="📖 Documentation" link="/docs/introduction" /> will give you **context** and show you the **features** of our system.
+
+And don't forget to check out our <Button label="✏️ blog" link="/blog" /> to read about our latest updates.
 
-**Note**: Older versions of the documentation are preserved, however, the versions are not maintained anymore.
+**Note on versioning:** Older versions of the documentation are preserved, but not maintained anymore.