fix images, adjust theme including dark mode

Signed-off-by: Karel van Klink <karel.vanklink@geant.org>

docs/architecture/modeling/ports.md

@@ -17,11 +17,9 @@ GAN
 
 These concepts apply to both CFSes and IFSes.
 
-```{figure} /static/access_port_diagram.png
-:alt: Diagram that displays the different entities that make up a GÉANT service.
+![GÉANT service entities](/assets/images/access_port_diagram.png)
 
-A visualisation of how services insist on ports.
-```
+*A visualisation of how services insist on ports.*
 
 ## Peer-to-peer and multipoint services
 
@@ -31,8 +29,6 @@ However, for multipoint services customers are supposed to be dual-homed in at l
 
 To give some examples, the figure below shows a decomposition of a GeantIP service for an NREN.
 
-```{figure} /static/geant_ip_ports_diagram.png
-:alt: Diagram that displays the different entities that make up a GeantIP service instance.
+![GeantIP service entities](/assets/images/geant_ip_ports_diagram.png)
 
-A visualisation of an instance of a GeantIP service that consists of different configuration objects.
-```
+*A visualisation of an instance of a GeantIP service that consists of different configuration objects.*

docs/assets/stylesheets/extra.css

-:root {
-  --md-primary-fg-color: #ED1556;
-  --md-primary-fg-color--light: #F8B8CC;
+[data-md-color-scheme="geant"] {
+  --md-primary-fg-color: #003F5F;
+  --md-default-fg-color--light: #4D798F;
+  --md-default-fg-color--dark: #002B41;
+  --md-primary-fg-color--light: #4D798F;
+  --md-primary-fg-color--dark: #003F5F;
+  --md-typeset-a-color: #ED1556;
+  --md-code-hl-string-color: #E24301;
+  --md-code-hl-function-color: #6D2077;
+  --md-code-hl-number-color: #ED1556;
+  --md-code-hl-special-color: #CC007B;
+  --md-code-hl-constant-color: #6D2077;
+  --md-footer-logo-dark-mode: none;
+  --md-footer-logo-light-mode: block;
+}
+
+[data-md-color-scheme="slate"] {
+  --md-primary-fg-color: #6D2077;
+  --md-typeset-a-color: #F05B89;
+  --md-default-fg-color--light: #D4DADA;
+  --md-default-fg-color--dark: #511259;
+  --md-primary-fg-color--light: #9D6AA2;
   --md-primary-fg-color--dark: #6D2077;
+  --md-code-hl-string-color: #EA7E66;
+  --md-code-hl-function-color: #9D6AA2;
+  --md-code-hl-number-color: #F05B89;
+  --md-code-hl-special-color: #D85EA3;
+  --md-code-hl-constant-color: #9D6AA2;
+  --md-footer-logo-dark-mode: block;
+  --md-footer-logo-light-mode: none;
+}
+
+#logo_light_mode {
+    display: var(--md-footer-logo-light-mode);
+    width: 45px;
+    height: auto;
+}
+
+#logo_dark_mode {
+    display: var(--md-footer-logo-dark-mode);
+    width: 45px;
+    height: auto;
 }

docs/legacy_platform/overview.md

@@ -12,7 +12,7 @@ playbooks</a> stored in Git
 
 An overview of the platform is depicted in the following picture:
 
-![GAP_overview](../static/Legacy_GAP_diagrams.overview.drawio.png)
+![GAP_overview](/assets/images/Legacy_GAP_diagrams.overview.drawio.png)
 
 
 ## Functionalities

docs/user_guide/routers/deploy_router.md

@@ -9,8 +9,6 @@ From a bird's-eye view, the process of deploying a new router in the network is
 5. Update the protocol meshes (such as iBGP).
 6. Promote the router to the production environment.
 
-```{figure} ../static/WFO_deploy_router.png
-:alt: Diagram that displays the steps that Workflow Orchestrator takes to provision a new router. 
+![Provisioning a router in WFO](/assets/images/WFO_deploy_router.png)
 
-WFO provisions a new router by following the steps shown here.
-```
+*WFO provisions a new router by following the steps shown here.*

mkdocs.yml

@@ -11,7 +11,9 @@ repo_url: https://gitlab.software.geant.org/goat/gap/geant-automation-platform
 # Theme
 theme:
   name: material
-  logo: assets/images/logo.png
+  logo_light_mode: assets/images/logo.png
+  logo_dark_mode: assets/images/geant_logo_white.png
+  custom_dir: overrides
   icon:
     repo: fontawesome/brands/gitlab
   features:
@@ -21,12 +23,17 @@ theme:
     - navigation.expand
     - navigation.path
     - navigation.indexes
+    - content.code.copy
   palette:
-    - scheme: custom
+    - media: "(prefers-color-scheme: light)"
+      scheme: geant
+      primary: custom
       toggle:
         icon: material/weather-sunny
         name: Switch to dark mode
-    - scheme: slate
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      primary: custom
       toggle:
         icon: material/weather-night
         name: Switch to light mode
@@ -56,10 +63,17 @@ nav:
       - Overview: legacy_platform/overview.md
       - New Router Deployment: legacy_platform/new_router_deployment.md
 
-# Extras
+# Extensions
 markdown_extensions:
   - abbr
   - attr_list
   - pymdownx.snippets:
       auto_append:
         - includes/glossary.md
+  - pymdownx.highlight:
+      anchor_linenums: true
+      line_spans: __span
+      pygments_lang_class: true
+  - pymdownx.inlinehilite
+  - pymdownx.snippets
+  - pymdownx.superfences

overrides/partials/logo.html

+<img id="logo_light_mode" src="{{ config.theme.logo_light_mode | url }}" alt="logo">
+<img id="logo_dark_mode" src="{{ config.theme.logo_dark_mode | url }}" alt="logo">