feat: dark mode improvement

* chore: dark & light image component * chore: update pr template * chore: fix icon colors in dark mode
zeropsio · Aug 28, 2024 · d39f888 · d39f888
1 parent a84116e
commit d39f888
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 13 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -12,7 +12,7 @@
 
 #### Related issues & labels (optional)
 
-- Closes #<!-- Add an issue number  -->
+- /closes # <!-- Add an issue number  -->
 
 
 <!-- #### First-time contributor to Zerops Docs? -->

diff --git a/apps/docs/content/references/cli.mdx b/apps/docs/content/references/cli.mdx
@@ -3,6 +3,8 @@ title: zCLI
 ---
 
 import CustomCard from "/src/components/CustomCard"
+import Image from "/src/components/Image";
+
 
 zCLI is the Zerops command-line tool.
 
@@ -55,7 +57,12 @@ Personal tokens allow you to securely access Zerops using zCLI. You can create o
 To create a new personal access token open your account settings by clicking your avatar in the top right corner and choose **Access token management**.  Then create a new access token. 
 
 <p align="center">
-<img src="/img/screenshots/personal-access-tokens.webp" alt="image" width="95%" height="auto"/>
+<Image
+  lightImage="/img/screenshots/access-tokens-light.webp"
+  darkImage="/img/screenshots/access-tokens-dark.webp"
+  alt="personal access tokens"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 ## Use the access token to login to zCLI

diff --git a/apps/docs/src/components/Image/index.tsx b/apps/docs/src/components/Image/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { useColorMode } from '@docusaurus/theme-common';
+
+type ImageProps = {
+  lightImage: string;
+  darkImage: string;
+  alt: string;
+  [key: string]: any;
+};
+
+const Image: React.FC<ImageProps> = ({ lightImage, darkImage, alt, ...props }) => {
+  const { colorMode } = useColorMode();
+
+  const imageUrl = colorMode === 'dark' ? darkImage : lightImage;
+
+  return <img src={useBaseUrl(imageUrl)} alt={alt} {...props} />;
+};
+
+export default Image;
diff --git a/apps/docs/src/theme/Icon/Mariadb/index.tsx b/apps/docs/src/theme/Icon/Mariadb/index.tsx
@@ -16,6 +16,7 @@ const IconMariadb = (props: IconProps) => {
       <path
         d="M301.4 55.7c-.8-.7-1.9-1-2.9-1-2.9 0-6.6 2-8.7 3l-.8.4c-3.4 1.7-7.1 2.6-10.8 2.8-3.9.1-7.2.3-11.5.8C241 64.4 229.6 84 218.6 103c-6 10.3-12.2 21-20.7 29.3-1.8 1.7-3.6 3.3-5.6 4.7-8.8 6.5-19.8 11.2-28.4 14.5-8.3 3.2-17.3 6-26 8.7-8 2.5-15.5 4.9-22.4 7.5-3.1 1.2-5.8 2-8.1 2.8-6.3 2.1-10.9 3.6-17.5 8.2-2.6 1.8-5.2 3.7-7 5.1-5.3 4.2-9.9 9.1-13.9 14.6-3.4 5.1-7.3 9.8-11.6 14-1.4 1.4-3.9 2-7.6 2-4.4 0-9.7-.9-15.3-1.9-5.8-1-11.8-2-16.9-2-4.2 0-7.4.7-9.7 2.1 0 0-4 2.3-5.7 5.4l1.7.8c2.6 1.4 5 3.1 7.1 5.1 2.2 2.1 4.7 3.8 7.4 5.2.9.3 1.6.9 2.3 1.5-.7 1-1.7 2.4-2.8 3.8-5.9 7.7-9.4 12.6-7.4 15.3.9.5 2 .7 3 .7 12.9 0 19.8-3.4 28.6-7.6 2.5-1.2 5.2-2.5 8.2-3.8 5.1-2.2 10.6-5.8 16.5-9.5 7.7-5 15.7-10.1 23.5-12.6 6.4-1.9 13-2.9 19.7-2.8 8.2 0 16.8 1.1 25.2 2.2 6.2.8 12.6 1.6 18.9 2 2.4.1 4.7.2 6.9.2 2.9 0 5.9-.1 8.8-.5l.7-.2c4.4-2.7 6.5-8.6 8.5-14.2 1.3-3.6 2.4-6.9 4.1-9l.3-.3c.2-.1.4-.1.5.1v.1c-1.1 22.1-9.9 36.1-18.9 48.5l-6 6.4s8.4 0 13.2-1.8c17.4-5.2 30.6-16.7 40.1-35 2.4-4.7 4.5-9.5 6.3-14.4.2-.4 1.7-1.2 1.5.9 0 .6-.1 1.3-.1 2 0 .4-.1.9-.1 1.3-.2 3-1 9.6-1 9.6l5.4-2.9c13-8.2 23-24.7 30.6-50.5 3.2-10.7 5.5-21.4 7.5-30.8 2.4-11.2 4.5-20.9 7-24.7 3.8-5.9 9.5-9.9 15.1-13.7l2.3-1.6c7-4.9 14-10.6 15.5-21.2v-.2c1.1-7.8.2-9.8-.9-10.7z"
         fill="#003545"
+        className="dark:fill-[#ADB1B8]"
       />
     </svg>
   )

diff --git a/apps/docs/src/theme/Icon/Php/index.tsx b/apps/docs/src/theme/Icon/Php/index.tsx
@@ -14,6 +14,7 @@ const IconPhp = (props: IconProps) => {
     >
       <path
         fill="#000"
+        className="dark:fill-[#ADB1B8]"
         d="M7.6 36.1h14.2c4.2 0 7.2 1.2 9.1 3.6 1.9 2.4 2.5 5.6 1.9 9.7-.2 1.9-.8 3.7-1.6 5.5-.8 1.8-2 3.5-3.4 4.9-1.8 1.8-3.7 3-5.7 3.5s-4.1.7-6.3.7H9.4l-2 10.1H0l7.6-38m6.2 6.1-3.2 15.9c.2 0 .4.1.6.1h.8c3.4 0 6.2-.3 8.5-1s3.8-3.3 4.6-7.7c.6-3.7 0-5.8-1.9-6.4-1.9-.6-4.2-.8-7-.8-.4 0-.8.1-1.2.1l-1.2-.2M41.1 26h7.3l-2.1 10.1h6.6c3.6.1 6.3.8 8.1 2.2 1.8 1.4 2.3 4.1 1.6 8.1L59 64.1h-7.4L55 47.2c.4-1.8.2-3-.3-3.8s-1.8-1.1-3.7-1.1l-5.9-.1L40.8 64h-7.3l7.6-38m29.3 10.1h14.2c4.2 0 7.2 1.2 9.1 3.6 1.9 2.4 2.5 5.6 1.9 9.7-.2 1.9-.8 3.7-1.6 5.5-.8 1.8-2 3.5-3.4 4.9-1.8 1.8-3.7 3-5.7 3.5s-4.1.7-6.3.7h-6.4l-2 10.1h-7.4l7.6-38m6.2 6.1-3.2 15.9c.2 0 .4.1.6.1h.7c3.4 0 6.2-.3 8.5-1s3.8-3.3 4.6-7.7c.6-3.7 0-5.8-1.9-6.4-1.9-.6-4.2-.8-7-.8-.4 0-.8.1-1.2.1l-1.1-.2"
       />
     </svg>

diff --git a/apps/docs/src/theme/Icon/Postgresql/index.tsx b/apps/docs/src/theme/Icon/Postgresql/index.tsx
@@ -17,6 +17,7 @@ const IconPostgresql = (props: IconProps) => {
         fillRule="evenodd"
         clipRule="evenodd"
         fill="#336791"
+        className="dark:fill-[#5883b0]"
         d="M123.258 76.784c-.45-2.918-2.901-4.829-5.752-4.958-1.032-.047-2.08.061-3.109.192-1.243.158-2.471.438-3.711.623-.857.128-1.726.187-2.582.275l-.021-.111c1.598-3.018 3.263-6.003 4.775-9.064 1.159-2.348 2.151-4.781 3.176-7.194 1.696-3.998 3.051-8.12 4.173-12.309 1.075-4.011 1.995-8.066 2.284-12.227.116-1.662.196-3.331.187-4.995-.008-1.327-.151-2.656-.284-3.979-.15-1.516-.608-2.953-1.242-4.336-.836-1.822-2.132-3.317-3.496-4.737-1.092-1.137-2.293-2.173-3.484-3.208-1.698-1.477-3.607-2.656-5.59-3.703a32.18 32.18 0 0 0-7.09-2.75c-1.493-.381-3.02-.664-4.532-.966-.544-.11-1.089-.337-1.633-.337H85.086c-.37 0-.737.191-1.11.233-2.452.273-4.875.735-7.228 1.464-.88.273-1.684.101-2.52.024-.641-.059-1.271-.231-1.912-.263-2.442-.122-4.887-.301-7.328-.275-2.339.024-4.654.409-6.918 1.052-1.895.538-3.749 1.195-5.447 2.191-.727.426-1.303.346-2.055.129-2.527-.729-5.072-1.414-7.639-1.989-1.6-.358-3.245-.536-4.879-.707a57.214 57.214 0 0 0-4.718-.294c-1.538-.033-3.087-.032-4.618.104a30.16 30.16 0 0 0-7.158 1.513 23.813 23.813 0 0 0-7.086 3.865c-2.167 1.715-3.905 3.809-5.303 6.2-1.473 2.523-2.483 5.224-3.111 8.061-.34 1.537-.555 3.117-.788 4.678-.073.486.732.972-.268 1.456v6.794c1 .452.208.903.266 1.356.139 1.089.262 2.187.446 3.268.291 1.711.636 3.417.988 5.117a324.86 324.86 0 0 0 1.546 7.111c.396 1.72.847 3.43 1.319 5.131.721 2.598 1.431 5.201 2.246 7.77.757 2.387 1.624 4.74 2.484 7.093 1.191 3.255 2.617 6.405 4.327 9.424 1.479 2.614 3.169 5.062 5.436 7.076 1.494 1.327 3.157 2.347 5.093 2.857 1.521.4 3.067.448 4.624.129a10.979 10.979 0 0 0 4.824-2.311c.163-.134.342-.236.535.01.735.931 1.719 1.552 2.748 2.089 2.777 1.448 5.803 1.882 8.877 2.059.744.043 1.496-.064 2.246-.085 1.461-.04 2.881-.325 4.278-.729.732-.212 1.447-.481 2.192-.732.039.793.089 1.557.112 2.321l.104 4.166c.019.634.044 1.27.103 1.901.151 1.627.299 3.255.493 4.877.135 1.118.275 2.245.538 3.336a38.176 38.176 0 0 0 2.158 6.428 13.81 13.81 0 0 0 3.9 5.185c2.22 1.836 4.822 2.619 7.632 2.764 1.162.061 2.357.004 3.501-.204a49.01 49.01 0 0 0 5.387-1.275c3.591-1.084 6.695-2.956 9.014-5.981 1.32-1.724 2.404-3.589 3.1-5.648.574-1.701 1.115-3.419 1.545-5.16.34-1.372.508-2.787.715-4.188.137-.927.219-1.863.305-2.797.14-1.517.283-3.033.384-4.553.07-1.058.067-2.121.109-3.181.013-.323.065-.644.095-.966.028-.298.178-.401.482-.396 1.071.016 2.144.044 3.212-.004 1.197-.054 2.405-.105 3.583-.303a56.542 56.542 0 0 0 4.99-1.067c1.943-.508 3.725-1.418 5.44-2.455 1.998-1.207 3.819-2.623 5.297-4.447 1.285-1.591 1.894-3.43 1.584-5.438zm-3.412.982c-.066.915-.485 1.699-1.093 2.369-2.869 3.163-6.468 5.082-10.585 6.027-1.564.358-3.178.544-4.779.692a32.093 32.093 0 0 1-4.114.097c-1.006-.038-2.004-.268-3.032-.416-.103.94-.201 1.919-.32 2.896l-.479 3.745c-.145 1.187-.258 2.378-.407 3.564-.146 1.151-.328 2.298-.481 3.449-.143 1.072-.248 2.149-.407 3.219-.245 1.64-.479 3.284-.799 4.911-.384 1.945-.973 3.829-1.934 5.583-1.172 2.141-2.834 3.772-4.949 4.98-2.18 1.246-4.563 1.894-6.979 2.436-1.71.384-3.472.447-5.204.291-3.004-.272-5.568-1.557-7.506-3.886-1.85-2.223-3.102-4.771-3.55-7.655a63.102 63.102 0 0 1-.491-4.136 108.067 108.067 0 0 1-.299-4.62 250.203 250.203 0 0 1-.197-5.871c-.053-2.406-.07-4.812-.104-7.218l-.006-.092c-1.224.734-2.427 1.538-3.703 2.2a12.392 12.392 0 0 1-4.798 1.353c-1.318.1-2.653.191-3.965.086-2.151-.173-4.3-.51-6.226-1.569-.781-.43-1.596-.953-2.134-1.64-1.29-1.646-.672-3.726 1.273-4.727 1.344-.693 2.811-.982 4.268-1.319a44.368 44.368 0 0 0 3.761-1.029c1.222-.4 1.993-1.391 2.754-2.363l1.206-1.551c-.503-.053-.977-.107-1.451-.151-1.439-.136-2.812-.532-4.125-1.114-1.124-.497-1.141-.551-1.965.343-1.376 1.494-2.714 3.023-4.062 4.542-.992 1.117-1.978 2.241-2.965 3.361-.978 1.108-1.894 2.279-2.947 3.31-1.564 1.531-3.449 2.452-5.698 2.348-1.443-.066-2.764-.572-3.952-1.399-2.452-1.708-4.104-4.097-5.608-6.606-1.927-3.215-3.406-6.64-4.672-10.159-.876-2.432-1.756-4.866-2.521-7.333-.831-2.681-1.56-5.396-2.277-8.11a157.373 157.373 0 0 1-1.482-6.182 216.117 216.117 0 0 1-1.464-7.079c-.298-1.599-.471-3.221-.712-4.831-.325-2.17-.385-4.36-.267-6.539.105-1.963.387-3.921.667-5.871.388-2.698 1.277-5.244 2.556-7.648.783-1.473 1.755-2.812 2.879-4.056 1.845-2.042 4.078-3.518 6.562-4.626 1.736-.774 3.57-1.24 5.439-1.604 2.774-.54 5.573-.519 8.373-.461 1.224.025 2.443.248 3.666.369 2.633.262 5.214.816 7.762 1.5 1.857.498 3.676 1.143 5.518 1.703.185.056.456.051.607-.048 2.496-1.629 5.224-2.704 8.125-3.319 1.101-.233 2.237-.335 3.363-.407 1.369-.087 2.749-.167 4.115-.088 1.642.094 3.276.336 4.908.56.792.108 1.565.383 2.359.458.38.036.783-.242 1.185-.335 2.049-.473 4.089-1 6.156-1.374 1.539-.278 3.111-.409 4.676-.499 1.745-.1 3.503-.173 5.247-.089a36.66 36.66 0 0 1 6.555.923c2.677.623 5.245 1.528 7.686 2.784 1.824.938 3.558 2.026 5.119 3.364 1.023.878 2.07 1.745 2.994 2.723 1.14 1.206 2.303 2.413 3.018 3.958.538 1.165.922 2.371 1.028 3.647.132 1.586.292 3.178.277 4.766-.014 1.519-.221 3.037-.368 4.552-.334 3.454-1.085 6.833-1.997 10.167a116.972 116.972 0 0 1-2.589 8.17c-.879 2.481-1.893 4.917-2.918 7.343a80.07 80.07 0 0 1-2.458 5.303c-1.677 3.286-3.421 6.538-5.438 9.633-.348.535-.678 1.083-1.018 1.629.88.594 1.877.803 2.881.911.955.104 1.929.166 2.883.095 1.527-.113 3.049-.331 4.567-.544 1.504-.21 2.978-.638 4.522-.525 1.542.112 2.645 1.284 2.54 2.729zm-22.013-3.353c-.655-.846-1.323-1.682-1.964-2.538-1.006-1.344-1.729-2.845-2.455-4.353-.688-1.429-1.532-2.782-2.257-4.195-1.265-2.465-2.553-4.922-3.718-7.435-1.465-3.157-2.62-6.426-2.984-9.923-.154-1.48-.193-2.958.106-4.424.479-2.341 1.702-4.172 3.758-5.428 1.907-1.165 4.032-1.541 6.209-1.659 1.351-.073 2.708-.013 4.11-.013l-.047-.237c-.872-1.823-1.687-3.677-2.641-5.457-1.346-2.512-3.068-4.777-4.986-6.877-1.421-1.555-2.96-2.998-4.646-4.273-1.658-1.255-3.405-2.376-5.269-3.293-2.223-1.093-4.538-1.938-6.967-2.477-2.334-.518-4.683-.835-7.077-.861-2.042-.022-4.071.07-6.06.531-3.002.695-5.748 1.931-8.137 3.933a21.143 21.143 0 0 0-3.517 3.77c-1.196 1.643-2.161 3.417-2.986 5.277-1.132 2.552-1.909 5.208-2.44 7.938-.266 1.361-.474 2.734-.686 4.106-.074.48-.08.971-.123 1.521.369-.192.635-.34.907-.472l.885-.397c2.993-1.369 6.094-2.25 9.427-2.149 1.416.043 2.771.323 4.03.943 2.415 1.191 3.828 3.216 4.442 5.779.424 1.769.714 3.573.996 5.372.221 1.405.447 2.825.473 4.242.037 2.071-.068 4.146-.181 6.216a17.386 17.386 0 0 1-1.08 5.146c-1.12 2.993-2.368 5.937-3.534 8.913-.385.983-.681 2.001-1.045 3.082.562 0 1.018-.004 1.474.002.178.003.36.008.532.049 1.34.316 2.502.923 3.455 1.954 1.271 1.372 1.938 2.973 1.972 4.826.019 1.027-.089 2.057-.084 3.084.021 4.786.057 9.572.097 14.357.007.782.046 1.565.102 2.346.117 1.635.235 3.271.395 4.902.112 1.157.268 2.312.451 3.461.259 1.628 1 3.077 1.841 4.462.724 1.191 1.665 2.203 2.905 2.901 2.107 1.186 4.376 1.285 6.663.848 1.545-.295 3.062-.769 4.562-1.258a10.128 10.128 0 0 0 3.937-2.354c1.051-1.019 1.797-2.261 2.3-3.632.976-2.659 1.28-5.459 1.684-8.237.151-1.04.282-2.083.42-3.125.157-1.186.316-2.371.468-3.556.112-.883.214-1.768.322-2.651.154-1.268.317-2.535.464-3.804.113-.981.209-1.966.309-2.949.129-1.256.268-2.512.379-3.77.086-.955.051-1.927.22-2.864.311-1.718 1.123-3.18 2.646-4.125.637-.395 1.356-.655 2.063-.989l-.12-.186zm-57.597-7.052a17.526 17.526 0 0 1-1.354-5.622c-.128-1.825.089-3.643.276-5.46.182-1.76.333-3.528.386-5.296.088-2.906-.108-5.808-.247-8.712-.084-1.729.117-3.479.271-5.212.139-1.561.312-3.126.607-4.664.495-2.581 1.152-5.125 2.086-7.591.887-2.338 1.906-4.615 3.345-6.665.986-1.406 2.105-2.72 3.18-4.094l-.319-.113c-3.498-1.111-7.053-1.979-10.709-2.358-1.729-.179-3.464-.284-5.198-.387-.532-.032-1.072.04-1.606.091-1.322.126-2.66.176-3.961.424-2.214.421-4.338 1.129-6.305 2.282-1.766 1.035-3.249 2.373-4.491 3.978-1.372 1.772-2.295 3.776-2.958 5.913-.783 2.521-1.156 5.115-1.257 7.733-.088 2.295-.132 4.603.264 6.889.295 1.702.492 3.422.817 5.117.443 2.311.918 4.617 1.467 6.904.785 3.274 1.569 6.553 2.499 9.787.89 3.099 1.894 6.17 2.982 9.204.89 2.476 1.919 4.906 3.003 7.304.706 1.562 1.561 3.065 2.457 4.528.953 1.553 2.037 3.027 3.508 4.154 1.856 1.423 3.293 1.644 5.179.083.808-.669 1.491-1.495 2.194-2.282 1.117-1.25 2.195-2.534 3.307-3.788 1.416-1.598 2.85-3.179 4.273-4.769.301-.336.59-.682.883-1.022l-.484-.425a17.695 17.695 0 0 1-4.095-5.931zm53.688-47.569a61.488 61.488 0 0 1 3.309 4.204c2 2.809 3.598 5.842 4.775 9.087.521 1.43.937 2.874.751 4.439-.129 1.096-.118 2.208-.215 3.31-.081.917-.226 1.829-.345 2.743-.178 1.378-.436 2.752-.513 4.136-.073 1.317.003 2.648.086 3.968.084 1.341.265 2.676.388 4.015.139 1.518.326 3.036.369 4.557.035 1.249-.076 2.506-.185 3.753-.13 1.502-.511 2.956-1.079 4.351-.399.982-.876 1.934-1.327 2.917l.181.192.275.213.277-.496a93.621 93.621 0 0 0 6.222-11.493 186.333 186.333 0 0 0 3.287-7.766c1.624-4.064 2.909-8.242 3.903-12.503.446-1.913.787-3.855 1.09-5.797.236-1.518.433-3.054.477-4.586.047-1.625-.043-3.263-.193-4.884-.112-1.224-.414-2.456-1.181-3.451-1.233-1.602-2.564-3.134-4.201-4.346-1.378-1.021-2.751-2.068-4.23-2.927-2.345-1.36-4.883-2.266-7.535-2.883-2.588-.603-5.21-.863-7.849-.918-1.556-.033-3.119.134-4.672.28-1.407.132-2.805.357-4.222.543 1.52.855 3.019 1.615 4.433 2.511 2.973 1.883 5.637 4.149 7.924 6.831zM55.299 72.514c.961-3.073 2.27-6.007 3.538-8.959 1.028-2.394 1.59-4.916 1.777-7.506.093-1.277.067-2.57.004-3.851a44.628 44.628 0 0 0-.392-4.259c-.266-1.801-.569-3.603-.995-5.371-.462-1.913-1.627-3.245-3.623-3.736-1.216-.299-2.424-.287-3.653-.093-3.002.473-5.75 1.579-8.31 3.199-.515.326-.798.589-.709 1.328.188 1.565.229 3.155.222 4.735-.01 2.236-.105 4.472-.19 6.707-.028.728-.133 1.452-.211 2.177-.12 1.11-.351 2.219-.344 3.327.007 1.142.124 2.311.401 3.417.88 3.507 2.744 6.377 5.799 8.402 1.879 1.245 3.958 1.873 6.24 1.992.155-.524.293-1.019.446-1.509zm-3.586-30.087c-.402-.844-.172-1.543.76-1.867.227-.08.461-.165.697-.188.324-.032.654-.008.982-.008 1.182.006 2.319.171 3.295.923.626.482.794 1.122.389 1.779-.575.932-1.452 1.4-2.529 1.49-1.697.141-2.888-.65-3.594-2.129zm47.04-.308c.136-1.124.245-2.251.384-3.375.056-.452-.182-.574-.561-.585-1.192-.033-2.384-.075-3.576-.097-1.344-.024-2.652.192-3.896.703-1.38.568-2.431 1.478-2.86 2.98a9.042 9.042 0 0 0-.293 3.41 20.11 20.11 0 0 0 1.193 5.176c.834 2.221 1.707 4.441 2.75 6.569 1.413 2.881 3.012 5.67 4.513 8.507.401.757.738 1.547 1.156 2.431a13.783 13.783 0 0 0 1.351-5.622c.041-1.61-.088-3.227-.182-4.838-.059-.986-.198-1.966-.294-2.95-.134-1.371-.337-2.741-.368-4.115-.031-1.397.068-2.802.188-4.197.113-1.338.334-2.665.495-3.997zm-2.689-1.082c-.443 1.223-1.39 1.913-2.618 2.116-1.145.188-2.148-.235-2.894-1.148-.531-.65-.328-1.42.468-1.859.914-.506 1.919-.634 3.104-.711.322.059.807.108 1.268.24.669.189.916.692.672 1.362zm-35.422 37.66c-.655-.535-1.521-.566-2.144.021-.773.73-1.453 1.565-2.133 2.388-.785.951-1.521 1.94-2.534 2.677-1.474 1.071-3.192 1.515-4.919 1.935-1.373.334-2.752.644-4.129.965l-.017.178c.409.189.805.425 1.231.56 2.1.665 4.236.996 6.455.808 1.602-.136 3.128-.485 4.574-1.171 1.99-.943 3.521-2.437 4.823-4.175.218-.29.317-.719.343-1.093.089-1.321-.582-2.303-1.55-3.093zm51.751.526c-1.69.181-3.382.373-5.077.47-.818.047-1.648-.109-2.474-.176-1.385-.112-2.737-.42-3.908-1.16-.678-.427-1.241-.475-1.961-.233-1.028.346-1.867.872-2.115 1.986-.169.753-.23 1.533-.298 2.304-.013.136.157.386.287.42.793.209 1.59.456 2.401.529.996.09 2.01.061 3.013.011 1.083-.054 2.173-.124 3.24-.304 2.515-.422 4.948-1.11 7.109-2.536.779-.515 1.551-1.041 2.325-1.562l-.064-.11c-.826.123-1.648.273-2.478.361z"
       />
     </svg>

diff --git a/apps/docs/src/theme/Icon/Rust/index.tsx b/apps/docs/src/theme/Icon/Rust/index.tsx
@@ -1,6 +1,6 @@
-import { IconProps } from "@medusajs/icons/dist/types"
-import clsx from "clsx"
-import React from "react"
+import { IconProps } from "@medusajs/icons/dist/types";
+import clsx from "clsx";
+import React from "react";
 
 const IconRust = (props: IconProps) => {
   return (
@@ -15,15 +15,22 @@ const IconRust = (props: IconProps) => {
     >
       <g transform="translate(53 53)">
         <path
-          fill="#000"
+          className={clsx("fill-black dark:fill-[#ADB1B8]")}
           strokeLinejoin="round"
           d="M-8.5-14.5h13c8 0 8 8 0 8h-13Zm-31 37h40v-11h-9v-8h10c11 0 5 19 14 19h25v-19h-6v2c0 8-9 7-10 2s-5-9-6-9c15-8 6-24-6-24h-47v11h10v26h-15Z"
         />
         <g mask="url(#a)">
-          <circle r="43" fill="none" stroke="#000" strokeWidth="9" />
+          <circle
+            r="43"
+            fill="none"
+            stroke="currentColor"
+            className="dark:stroke-[#ADB1B8]"
+            strokeWidth="9"
+          />
           <path
             id="b"
-            stroke="#000"
+            stroke="currentColor"
+            className="dark:stroke-[#ADB1B8]"
             strokeWidth="3"
             strokeLinejoin="round"
             d="m46 3 5-3-5-3z"
@@ -61,7 +68,8 @@ const IconRust = (props: IconProps) => {
           <use xlinkHref="#b" transform="rotate(348.75)" />
           <path
             id="c"
-            stroke="#000"
+            stroke="currentColor"
+            className="dark:stroke-[#ADB1B8]"
             strokeWidth="6"
             strokeLinejoin="round"
             d="m-7-42 7 7 7-7z"
@@ -72,7 +80,7 @@ const IconRust = (props: IconProps) => {
           <use xlinkHref="#c" transform="rotate(288)" />
         </g>
         <mask id="a">
-          <path fill="#fff" d="M-60-60H60V60H-60z" />
+          <path fill="white" d="M-60-60H60V60H-60z" />
           <circle id="d" cy="-40" r="3" />
           <use xlinkHref="#d" transform="rotate(72)" />
           <use xlinkHref="#d" transform="rotate(144)" />
@@ -81,7 +89,7 @@ const IconRust = (props: IconProps) => {
         </mask>
       </g>
     </svg>
-  )
-}
+  );
+};
 
-export default IconRust
+export default IconRust;
diff --git a/apps/docs/static/img/screenshots/access-tokens-dark.webp b/apps/docs/static/img/screenshots/access-tokens-dark.webp
diff --git a/apps/docs/static/img/screenshots/access-tokens-light.webp b/apps/docs/static/img/screenshots/access-tokens-light.webp