feat(documentation): dark mode

_assets/css/components/content-card.css

@@ -4,6 +4,12 @@
   grid-gap: 2rem;
 }
 
+.dark .content-card {
+    border: 0.5px solid rgba(255, 255, 255, 0.20);
+background: #242933;
+box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.10), 0px 34px 24px -20px rgba(0, 0, 0, 0.04);
+}
+
 .content-card {
   padding: 24px !important;
   display: flex;
@@ -32,6 +38,11 @@
   margin-bottom: 24px !important;
 }
 
+.dark .content-card p.content-card-label {
+    color: white;
+    opacity: 0.7;
+}
+
 .content-card p.content-card-label {
   font-size: 18px;
   font-weight: 600;
@@ -40,6 +51,11 @@
   margin-bottom: 16px !important;
 }
 
+.dark .content-card p.content-card-description {
+    color: white !important;
+    opacity: 0.5 !important;
+}
+
 .content-card p.content-card-description {
   padding-bottom: 32px !important;
   opacity: 0.6;
@@ -58,3 +74,7 @@
   text-transform: uppercase;
   text-decoration: none !important;
 }
+
+.dark .content-card-link { 
+    color: rgba(255, 255, 255, 0.70) !important;
+}

_assets/css/components/dark-light-image.css

@@ -0,0 +1,8 @@
+
+html.dark .dark-light-image .light {
+  display: none;
+}
+
+html:not(.dark) .dark-light-image .dark {
+  display: none;
+}

_assets/css/components/hero.css

@@ -20,3 +20,11 @@
   line-height: normal;
   letter-spacing: -0.68px;
 }
+
+.dark .hero h1 {
+    color: white !important;
+}
+
+.dark .hero h1 em {
+    opacity: 0.7
+}

_assets/css/components/product-card.css

@@ -13,6 +13,13 @@
   flex-direction: column;
 }
 
+.dark .product-grid-item {
+  border: 0.5px solid rgba(255, 255, 255, 0.2);
+  background: #242933;
+  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.1),
+    0px 34px 24px -20px rgba(0, 0, 0, 0.1);
+}
+
 .product-grid-item-header * {
   margin: 0 !important;
   color: #fff !important;
@@ -75,6 +82,11 @@
   height: 100%;
 }
 
+.dark .product-grid-item-body-description p {
+    color: #FFF;
+    opacity: 0.6;
+}
+
 .product-grid-item-body-description p {
   flex: 1;
   opacity: 0.6;
@@ -107,6 +119,11 @@
   text-decoration: none !important;
 }
 
+.dark .product-grid-item-body p a {
+    color: #FFF !important;
+    background: rgba(255, 255, 255, 0.15);
+}
+
 .product-grid-item-body a:hover {
   background: rgb(250, 91, 48, 0.3);
 }

_assets/css/components/quick-link.css

@@ -5,6 +5,12 @@
   margin-bottom: 2em;
 }
 
+.dark .quick-links-item { 
+    border: 0.5px solid rgba(255, 255, 255, 0.20);
+    background: #242933;
+    box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.10), 0px 34px 24px -20px rgba(0, 0, 0, 0.04);
+}
+
 .quick-links-item {
   border-radius: 4px;
   background: #fff;
@@ -13,6 +19,11 @@
   padding: 0 24px;
 }
 
+.dark .quick-links-item h4 {
+    color: rgba(255, 255, 255, 0.70) !important;
+
+}
+
 .quick-links-item h4 {
   color: var(--AV_Primary_Blue_Dark, #202d47) !important;
   font-size: 18px !important;
@@ -45,15 +56,25 @@
   background: linear-gradient(90deg, #414f6e 0%, #2773aa 100%);
 }
 
+.dark .quick-links-item > p {
+    border-top: 1px solid rgba(255,255,255,0.1) !important;  
+}
+
 .quick-links-item > p {
   border-top: 1px solid #efefef !important;
   padding-top: 18px !important;
 }
 
+.dark .quick-links-item > p > a.quick-links-item-line { 
+    color: rgba(255, 255, 255, 0.50) !important;
+
+}
+
 .quick-links-item > p > a.quick-links-item-line {
   display: flex !important;
   gap: 16px !important;
   align-items: center !important;
+  font-size: 14px;
 
   text-decoration: none !important;
   color: var(--AV_Primary_Blue, #414f6e) !important;

_assets/css/components/support-card.css

@@ -3,6 +3,13 @@
   gap: 56px;
 }
 
+.dark .support-cards .support-card {
+  border: 0.5px solid rgba(255, 255, 255, 0.2);
+  background: #242933;
+  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.1),
+    0px 34px 24px -20px rgba(0, 0, 0, 0.04);
+}
+
 .support-cards .support-card {
   flex: 1;
   display: flex;
@@ -22,6 +29,10 @@
   letter-spacing: -0.36px !important;
 }
 
+.dark .support-card p.support-card-label {
+    color: rgba(255, 255, 255, 0.50) !important;
+}
+
 .support-card p.support-card-label {
   flex: 1;
 }

_assets/css/style.css

@@ -335,6 +335,11 @@
   border-top: 1px dashed var(--doctave-theme-content-bg-secondary);
 }
 
+.dark .section-header hr {
+  border-top: 1px dashed white !important;
+  opacity: 0.6 !important;
+}
+
 .section-header h3 {
   color: var(--AV_Primary_Blue_06, rgba(65, 79, 110, 0.60)) !important;
   font-family: JetBrains Mono, sans-serif;
@@ -347,4 +352,12 @@
   font-size: 34px !important;
   line-height: 34px !important;
   font-weight: 500 !important;
+}
+
+p {
+  font-size: 18px;
+}
+
+.dark p {
+  color: rgba(255, 255, 255, 0.70);
 }

_partials/dark-light-image.md

@@ -0,0 +1,6 @@
+<div class="dark-light-image">
+
+<span class="dark">![]({{dark}})</span>
+<span class="light">![]({{light}})</span>
+
+</div>  

doctave.yaml

@@ -32,6 +32,7 @@ styles:
   - _assets/css/components/product-card.css
   - _assets/css/components/hero.css
   - _assets/css/components/content-card.css
+  - _assets/css/components/dark-light-image.css
 
 open_api:
   - spec_file: openapi.yaml

get-started/aws-migration.md

@@ -5,7 +5,50 @@ meta:
   description: This page gets users started on how to migrate from AWS to api.video.
 ---
 
-AWS migration guide
-=============
+# AWS migration guide
 
-This page gets users started on how to migrate from AWS to api.video.
+Planning to migrate api.video from Amazon S3? We got you covered! 
+
+There are two methods for your disposal that you can use in order to migrate all of your video content from S3 to api.video.
+
+## api.video Import Tool
+
+With api.video, you can use our in-house import tool in order to migrate all of your video in a short time from the popular hosting and video provider.
+
+The simple tool will require you to input serveral parameters from provider you are leaving and from api.video. 
+
+Check out the [Import Tool](https://import.api.video/) now.
+
+
+
+
+### How to get the AWS Access Key and Account Secret
+
+To access AWS, you will need to sign up for an AWS account.
+
+Access keys consist of an access key ID and secret access key, which are used to sign programmatic requests that you make to AWS. If you don't have access keys, you can create them by using the IAM console at https://console.aws.amazon.com/iam/. We recommend that you use IAM access keys instead of AWS root account access keys. IAM lets you securely control access to AWS services and resources in your AWS account.
+
+Note
+To create access keys, you must have permissions to perform the required IAM actions. For more information, see Granting IAM User Permission to Manage Password Policy and Credentials in the IAM User Guide.
+
+To get your access key ID and secret access key
+Open the IAM console at https://console.aws.amazon.com/iam/.
+
+On the navigation menu, choose Users.
+
+Choose your IAM user name (not the check box).
+
+Open the Security credentials tab, and then choose Create access key.
+
+To see the new access key, choose Show. Your credentials resemble the following:
+
+Access key ID: AKIAIOSFODNN7EXAMPLE
+
+Secret access key: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
+
+To download the key pair, choose Download .csv file. Store the .csv file with keys in a secure location.
+
+Important
+Keep the keys confidential to protect your AWS account, and never email them. Do not share them outside your organization, even if an inquiry appears to come from AWS or Amazon.com. No one who legitimately represents Amazon will ever ask you for your secret key.
+
+You can retrieve the secret access key only when you initially create the key pair. Like a password, you can't retrieve it later. If you lose it, you must create a new key pair.

get-started/start-building.md

@@ -14,7 +14,7 @@ Within this section, you can find essential insights into building with api.vide
 
 ## What is api.video?
 
-![](/_assets/how-api-video-works.jpg)
+{% include "_partials/dark-light-image.md" dark: "/_assets/getting-started-diagram-dark.png", light: "/_assets/getting-started-diagram-light.png" %}
 
 api.video is a cloud-based video hosting and live streaming platform that provides developers and businesses with an easy-to-use API to handle all video-related tasks. The platform offers a range of features to help developers and businesses manage video content, including video hosting, transcoding, player customization, live streaming, and analytics.