WIP Kh.update to new brand guidelines (#39)

topos-protocol · Apr 18, 2024 · 09f0605 · 09f0605
1 parent c147715
commit 09f0605
Show file tree

Hide file tree

Showing 72 changed files with 431 additions and 171 deletions.
diff --git a/content/images/topos_header.png b/content/images/topos_header.png
diff --git a/content/images/topos_header.xcf b/content/images/topos_header.xcf
diff --git a/content/module-1/images/certificates-relationship.png b/content/module-1/images/certificates-relationship.png
diff --git a/content/module-1/images/certificates-relationship.xcf b/content/module-1/images/certificates-relationship.xcf
diff --git a/content/module-1/images/cross-chain-state-validity.png b/content/module-1/images/cross-chain-state-validity.png
diff --git a/content/module-1/images/cross-chain-state-validity.xcf b/content/module-1/images/cross-chain-state-validity.xcf
diff --git a/content/module-1/images/cross-chain-transaction-swim-lane.png b/content/module-1/images/cross-chain-transaction-swim-lane.png
diff --git a/content/module-1/images/cross-chain-transaction-swim-lane.xcf b/content/module-1/images/cross-chain-transaction-swim-lane.xcf
diff --git a/content/module-1/images/double-spend-problem.png b/content/module-1/images/double-spend-problem.png
diff --git a/content/module-1/images/double-spend-problem.xcf b/content/module-1/images/double-spend-problem.xcf
diff --git a/content/module-1/images/eli5-zkevm.png b/content/module-1/images/eli5-zkevm.png
diff --git a/content/module-1/images/eli5-zkevm.xcf b/content/module-1/images/eli5-zkevm.xcf
diff --git a/content/module-1/images/simple-fungible-subnet-transfer.png b/content/module-1/images/simple-fungible-subnet-transfer.png
diff --git a/content/module-1/images/simple-fungible-subnet-transfer.xcf b/content/module-1/images/simple-fungible-subnet-transfer.xcf
diff --git a/content/module-1/images/topos-components-executor.png b/content/module-1/images/topos-components-executor.png
diff --git a/content/module-1/images/topos-components-executor.xcf b/content/module-1/images/topos-components-executor.xcf
diff --git a/content/module-1/images/topos-components-seq.png b/content/module-1/images/topos-components-seq.png
diff --git a/content/module-1/images/topos-components-seq.xcf b/content/module-1/images/topos-components-seq.xcf
diff --git a/content/module-1/images/topos-components-subnet.png b/content/module-1/images/topos-components-subnet.png
diff --git a/content/module-1/images/topos-components-subnet.xcf b/content/module-1/images/topos-components-subnet.xcf
diff --git a/content/module-1/images/topos-components-uci.png b/content/module-1/images/topos-components-uci.png
diff --git a/content/module-1/images/topos-components-uci.xcf b/content/module-1/images/topos-components-uci.xcf
diff --git a/content/module-1/images/topos-components.png b/content/module-1/images/topos-components.png
diff --git a/content/module-1/images/topos-components.xcf b/content/module-1/images/topos-components.xcf
diff --git a/content/module-1/images/topos_header_concept.png b/content/module-1/images/topos_header_concept.png
diff --git a/content/module-1/images/topos_header_concept.xcf b/content/module-1/images/topos_header_concept.xcf
diff --git a/content/module-1/images/transaction-swim-lane-1.png b/content/module-1/images/transaction-swim-lane-1.png
diff --git a/content/module-1/images/transaction-swim-lane-1.xcf b/content/module-1/images/transaction-swim-lane-1.xcf
diff --git a/content/module-1/images/transaction-swim-lane-2.png b/content/module-1/images/transaction-swim-lane-2.png
diff --git a/content/module-1/images/transaction-swim-lane-2.xcf b/content/module-1/images/transaction-swim-lane-2.xcf
diff --git a/content/module-1/images/transaction-swim-lane.png b/content/module-1/images/transaction-swim-lane.png
diff --git a/content/module-1/images/transaction-swim-lane.xcf b/content/module-1/images/transaction-swim-lane.xcf
diff --git a/content/module-1/images/zk-lifecycle.png b/content/module-1/images/zk-lifecycle.png
diff --git a/content/module-1/images/zk-lifecycle.xcf b/content/module-1/images/zk-lifecycle.xcf
diff --git a/content/module-2/images/topos_header_handson.png b/content/module-2/images/topos_header_handson.png
diff --git a/content/module-2/images/topos_header_handson.xcf b/content/module-2/images/topos_header_handson.xcf
diff --git a/gatsby-config.ts b/gatsby-config.ts
@@ -51,12 +51,13 @@ const config: GatsbyConfig = {
           {
             resolve: 'gatsby-remark-images',
             options: {
+              backgroundColor: 'transparent',
               linkImagesToOriginal: true,
               // It's important to specify the maxWidth (in pixels) of
               // the content container as this plugin uses this as the
               // base for generating different widths of each image.
               maxWidth: 1216,
-              quality: env === 'development' ? 10 : 80,
+              quality: env === 'development' ? 80 : 80,
             },
           },
           {

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -19,7 +19,7 @@ export const Button: React.FC<ButtonProps> = ({
   return (
     <button
       className={cn(
-        'rounded bg-gradient-to-tr from-action-reg to-button-linear-end px-6 py-2 font-bold text-white transition-all hover:from-button-hover hover:to-button-hover active:from-button-active active:to-button-active',
+        'rounded bg-gradient-to-tr from-button-hover to-button-linear-end px-6 py-2 font-bold text-white transition-all hover:from-button-linear-end hover:to-button-hover active:from-button-active active:to-button-active',
         className
       )}
       onClick={onClick}

diff --git a/src/components/CookieConsent.tsx b/src/components/CookieConsent.tsx
@@ -31,7 +31,7 @@ const CookieConsent: React.FC = () => {
   };
 
   return (
-    <div className="fixed inset-x-0 bottom-0 z-50 flex flex-col items-center gap-4 border-t border-neutral-300 bg-light-border p-4 shadow-xl sm:flex-row sm:justify-between">
+    <div className="cookieconsent fixed inset-x-0 bottom-0 z-50 flex flex-col items-center gap-4 border-t border-neutral-300 bg-light-border p-4 shadow-xl sm:flex-row sm:justify-between">
       <p className="flex-1">
         We are using cookies, by using our website you agree to{' '}
         <Link to="/legal/privacy-policy.html">our Privacy Policy</Link>

diff --git a/src/components/GitHubCodeBlock.tsx b/src/components/GitHubCodeBlock.tsx
@@ -197,16 +197,10 @@ export const GitHubCodeBlock: React.FC<
   }
 
   useEffect(() => {
-    console.log('useEffect() called');
-
     const doFetch = async (url, attributes) => {
-      console.log(`url: ${url}`);
-      console.log(`attributes: ${JSON.stringify(attributes)}`);
       return await fetch(url, attributes)
         .then((response) => response.json())
         .then((data) => {
-          console.log('retrieved....')
-          console.log(data);
           if (data?.message?.startsWith('API rate limit exceeded')) {
             return undefined;
           } else if (data.message == 'Not Found') {
@@ -227,19 +221,13 @@ export const GitHubCodeBlock: React.FC<
 
         while (!finished && number_of_attempts < 2) {
           if (number_of_attempts > 0) {
-            console.log('Retrying with authentication...');
             attributes.headers['Authorization'] = `token ${githubToken}`;
             attributes.headers['X-GitHub-Api-Version'] = '2022-11-28';
           }
 
-          console.log(
-            `fetching with attributes: ${JSON.stringify(attributes)}`
-          );
           const url = `https://api.github.com/repos/${org}/${repo}/contents/${path}?ref=${tag}`;
           const data = await doFetch(url, attributes);
-          console.log('got data....')
           if (data === undefined) {
-            console.log('API rate limit exceeded');
             finished = false;
           } else if (data === false) {
             finished = true;
@@ -281,9 +269,9 @@ export const GitHubCodeBlock: React.FC<
       {title && (
         <div className={twMerge('githubblock-title')}>{title}</div>)}
       <div className={twMerge('githubblock',title ? '' : 'no-title')}>
-        <div className={twMerge('header')}>
-          <div className={twMerge('language')}>{`${language}`}</div>
-          <div className={twMerge('spacer')}></div>
+        <div className={twMerge('githubblock-header')}>
+          <div className={twMerge('githubblock-language')}>{`${language}`}</div>
+          <div className={twMerge('githubblock-spacer')}></div>
           {nocopy != true && (
             <button
               onClick={() => {
@@ -297,12 +285,12 @@ export const GitHubCodeBlock: React.FC<
             </button>
           )}
         </div>
-        <div className={twMerge('code')}>
+        <div className={twMerge('githubblock-code')}>
           {code ? (
             <Highlight code={code} language={language} theme={themes.nightOwl}>
               {({ className, style, tokens, getLineProps, getTokenProps }) => (
                 <pre
-                  className={twMerge('code-wrapper', className, 'diff-highlight')}
+                  className={twMerge('githubblock-code-wrapper', className, 'diff-highlight')}
                   style={{
                     ...style,
                   }}
@@ -348,7 +336,7 @@ export const GitHubCodeBlock: React.FC<
               )}
             </Highlight>
           ) : (
-            <div className={twMerge('loading')}>
+            <div className={twMerge('githubblock-loading')}>
               Loading{' '}
               <a href={baseUrl} target="_blank">
                 {baseUrl}
@@ -357,7 +345,7 @@ export const GitHubCodeBlock: React.FC<
             </div>
           )}
         </div>
-        <div className={twMerge('url')}>
+        <div className={twMerge('githubblock-url')}>
           <a href={link || contentUrl} target={'_blank'}>
             {link || (path && contentUrl)}
           </a>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -7,6 +7,7 @@ import { Logo } from './Logo';
 import config from '../../config';
 import { twMerge } from 'tailwind-merge';
 import { Search } from './Search';
+import { ModeToggle } from './ModeToggle';
 
 interface HeaderProps {
   navExpanded: boolean;
@@ -16,6 +17,7 @@ interface HeaderProps {
   tocEnabled: boolean;
 }
 
+/* TODO: Refactor this to have styling in stylesheets instead of so much being hardcoded in the component code. */
 export const Header: React.FC<HeaderProps> = ({
   navExpanded,
   setNavExpanded,
@@ -24,7 +26,7 @@ export const Header: React.FC<HeaderProps> = ({
   tocEnabled,
 }) => {
   return (
-    <header className="fixed left-0 right-0 top-0 z-10 border-b bg-white">
+    <header className="header">
       <div className="mx-auto flex h-[80px] max-w-[1920px] items-center justify-between gap-4 px-4 py-6 font-semibold leading-none text-neutral-500 md:px-8">
         <div className="flex flex-1 items-center justify-between">
           <Link
@@ -51,6 +53,7 @@ export const Header: React.FC<HeaderProps> = ({
           )}
         </div>
         <Search />
+        <ModeToggle />
         <button
           className="md:hidden"
           type="button"

diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
@@ -1,94 +1,47 @@
-import React from 'react';
-
-export const Logo: React.FC = () => {
-  return (
-    <>
-      <svg
-        aria-hidden="true"
-        className="h-[31px] w-[200px] max-sm:hidden md:block "
-        viewBox="0 0 112 17"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M55.935 2.39459C52.9175 2.40782 50.7621 4.67008 50.8013 7.7658C50.8405 10.8351 52.9959 13.018 55.9611 13.0047C58.9656 13.0047 61.1209 10.7425 61.0817 7.6335C61.0425 4.55101 58.9002 2.38136 55.935 2.39459ZM55.935 10.5573C54.3936 10.5573 53.3094 9.35334 53.3224 7.68642C53.3224 6.00626 54.4197 4.82883 55.9611 4.84206C57.5156 4.85529 58.5867 6.04595 58.5737 7.71288C58.5475 9.40626 57.4764 10.5573 55.935 10.5573Z"
-          fill="#29293F"
-        />
-        <path
-          d="M66.1635 6.49574C64.6874 6.03271 64.6874 5.55645 64.6874 5.30508C64.6874 4.98757 65.0009 4.63037 65.6802 4.63037C66.7122 4.63037 67.4959 5.42415 67.509 5.43738L67.8094 5.75489L68.9459 3.79691C68.9459 3.79691 68.9459 3.79691 68.9459 3.78368L68.763 3.59847C68.763 3.59847 67.4959 2.38135 65.6279 2.38135C63.3158 2.38135 62.2578 3.9689 62.2578 5.43738C62.2578 6.90586 63.1983 7.97746 64.8311 8.5331C66.4378 9.06228 66.5685 9.51209 66.5685 9.9222C66.5685 10.5308 65.9806 10.7424 65.4843 10.7424C64.2564 10.7424 63.2897 9.80314 63.2505 9.76345L62.9501 9.45917L61.8398 11.3775L62.0096 11.5494C62.0096 11.5494 63.342 12.965 65.4843 12.965C67.6265 12.965 68.9981 11.6553 68.9981 9.6973C68.9981 8.1759 68.0184 7.05139 66.1766 6.44283L66.1635 6.49574Z"
-          fill="#29293F"
-        />
-        <path
-          d="M33.3891 2.39459C30.3716 2.40782 28.2162 4.67008 28.2554 7.7658C28.2946 10.8351 30.45 13.018 33.4152 13.0047C36.4196 13.0047 38.575 10.7425 38.5358 7.6335C38.4966 4.55101 36.3543 2.38136 33.3891 2.39459ZM33.3891 10.5573C31.8477 10.5573 30.7635 9.35334 30.7765 7.68642C30.7765 6.00626 31.8738 4.82883 33.4152 4.84206C34.9697 4.85529 36.0408 6.04595 36.0278 7.71288C36.0016 9.40626 34.9305 10.5573 33.3891 10.5573Z"
-          fill="#29293F"
-        />
-        <path
-          d="M26.2691 2.51362C25.5376 2.52685 25.3155 2.52685 23.9831 2.52685V0.0529183C23.9178 0.0396887 23.8394 0.0132296 23.7741 0C22.4809 1.54786 21.1877 3.09572 19.79 4.77588C20.4954 4.80233 20.9395 4.82879 21.6188 4.85525C21.6188 6.33697 21.5143 7.72607 21.6449 9.10194C21.9061 11.9595 24.4403 13.6661 27.1182 12.7533C27.2357 12.7136 27.3402 12.6739 27.4447 12.6342V10.4117C25.8903 10.9673 24.4142 10.2397 24.166 8.62568C23.9831 7.40856 24.1268 6.13852 24.1268 4.77588H27.4447C27.4578 4.35253 27.4709 4.03502 27.497 3.73074C27.5884 2.47393 27.079 2.50039 26.2822 2.51362H26.2691Z"
-          fill="#29293F"
-        />
-        <path
-          d="M45.2239 2.39453C44.0744 2.39453 43.0555 2.85757 42.1542 3.77041V2.67235H39.8682V17H42.1542V11.5891C43.0686 12.5284 44.1136 13.0046 45.2631 13.0046C46.6086 13.0046 47.7189 12.5019 48.6072 11.5097C49.4954 10.5043 49.9396 9.24745 49.9396 7.75251C49.9396 6.25757 49.4954 4.93461 48.5941 3.92916C47.7058 2.91048 46.5824 2.40776 45.2239 2.40776V2.39453ZM44.61 10.5572C43.0686 10.5572 41.9844 9.35329 41.9974 7.68636C41.9974 6.0062 43.0947 4.82877 44.6361 4.842C46.1906 4.85523 47.2617 6.04589 47.2486 7.71282C47.2225 9.4062 46.1514 10.5572 44.61 10.5572Z"
-          fill="#29293F"
-        />
-        <path
-          d="M8.15156 2.13001C8.15156 2.13001 8.04706 2.0374 7.99481 1.99771C7.99481 1.99771 7.96869 1.97125 7.95562 1.97125C6.16603 0.529231 3.56654 0.502772 1.75082 2.05063C0.705801 2.92378 0.117977 4.15413 0.0134751 5.4374C-0.0910269 6.69421 0.27473 7.99071 1.13687 9.02262C2.87421 11.1262 5.97009 11.3907 8.034 9.63117L9.62765 8.28176L10.3461 7.6732C11.2866 6.87942 12.2663 6.46931 12.9456 6.35024C11.8091 5.2125 10.5159 4.16736 8.1385 2.13001"
-          fill="#92F19A"
-        />
-        <path
-          d="M13.0763 11.6287L10.2547 10.3719C10.8426 9.64422 11.339 8.83722 11.7439 7.96407C11.77 7.89792 11.8092 7.83177 11.8484 7.76562C11.4304 7.96407 11.0646 8.26835 10.7903 8.65201C10.2286 9.41932 9.58857 10.1205 8.87012 10.7158L11.4043 12.5018C12.7105 13.4147 14.5263 13.0178 15.3231 11.589C14.6438 11.9065 13.8339 11.9462 13.0894 11.6155"
-          fill="#00C890"
-        />
-        <path
-          d="M8.34749 1.24378C8.34749 1.24378 8.24299 1.15117 8.19074 1.11148C8.19074 1.11148 8.16461 1.08502 8.15155 1.08502C6.36195 -0.357 3.76247 -0.383459 1.94675 1.1644C0.901722 2.05078 0.326961 3.28113 0.222459 4.5644C0.117957 5.82121 0.483715 7.1177 1.34586 8.14961C3.0832 10.2531 6.17908 10.5177 8.24299 8.75817L9.83665 7.40876L10.5551 6.80019C11.4956 6.00642 12.4753 5.5963 13.1546 5.47724C12.0181 4.33949 10.7249 3.29436 8.34749 1.257"
-          fill="#00C890"
-        />
-        <path
-          d="M11.848 7.77909C12.253 7.58065 12.7102 7.48804 13.1674 7.52773C13.716 7.56742 14.2646 7.79232 14.7218 8.18921C15.6754 9.02267 15.9367 10.4382 15.3358 11.5627C15.3358 11.5627 15.3227 11.5892 15.3096 11.6024C15.9758 11.2849 16.5114 10.7028 16.7596 9.92228C17.1384 8.70516 16.6159 7.35575 15.5186 6.73396C14.9831 6.42968 14.4083 6.32384 13.8597 6.38999C12.9975 6.4826 12.266 7.02501 11.835 7.77909"
-          fill="#025376"
-        />
-        <path
-          d="M14.7351 8.18906C14.2779 7.79217 13.7292 7.56727 13.1806 7.52758C12.7234 7.48789 12.2662 7.5805 11.8613 7.77894C11.8221 7.84509 11.796 7.91123 11.7568 7.97738C11.3518 8.85053 10.8554 9.64431 10.2676 10.3851L13.0892 11.6419C13.8337 11.9727 14.6436 11.933 15.3229 11.6155C15.3229 11.6155 15.336 11.589 15.349 11.5758C15.9499 10.4513 15.6887 9.03575 14.7351 8.20228"
-          fill="#009F9E"
-        />
-      </svg>
-      <svg
-        aria-hidden="true"
-        className="h-[31px] w-[40px] sm:hidden"
-        viewBox="0 0 40 31"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M19.3185 5.03775C19.3185 5.03775 19.071 4.81838 18.9472 4.72437C18.9472 4.72437 18.8853 4.66169 18.8544 4.66169C14.6152 1.24586 8.4576 1.18318 4.15656 4.84972C1.68114 6.91802 0.288714 9.83245 0.0411725 12.8722C-0.206369 15.8493 0.660027 18.9204 2.70225 21.3648C6.81763 26.3475 14.1511 26.9743 19.04 22.8063L22.815 19.6099L24.5169 18.1683C26.7448 16.2881 29.0655 15.3166 30.6745 15.0345C27.9825 12.3395 24.9191 9.86378 19.2876 5.03775"
-          fill="#92F19A"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M30.9839 27.5385L24.3002 24.5614C25.6926 22.8378 26.8685 20.9262 27.8277 18.8579C27.8896 18.7012 27.9824 18.5445 28.0752 18.3878C27.0851 18.8579 26.2187 19.5787 25.5689 20.4875C24.2383 22.3051 22.7221 23.966 21.0203 25.3762L27.0232 29.6068C30.1175 31.7691 34.4185 30.829 36.306 27.4445C34.697 28.1966 32.7785 28.2906 31.0148 27.5071"
-          fill="#00C890"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M19.7826 2.9382C19.7826 2.9382 19.535 2.71883 19.4113 2.62482C19.4113 2.62482 19.3494 2.56214 19.3184 2.56214C15.0793 -0.853689 8.92168 -0.916365 4.62064 2.75017C2.14522 4.84981 0.78374 7.76424 0.536198 10.804C0.288656 13.7811 1.15505 16.8522 3.19727 19.2966C7.31266 24.2793 14.6461 24.9061 19.535 20.7381L23.3101 17.5417L25.0119 16.1001C27.2398 14.2198 29.5605 13.2484 31.1695 12.9663C28.4775 10.2713 25.4142 7.79557 19.7826 2.96954"
-          fill="#00C890"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M28.0752 18.4192C29.0344 17.9491 30.1174 17.7297 31.2004 17.8237C32.5 17.9178 33.7996 18.4505 34.8826 19.3906C37.1414 21.3649 37.7602 24.7181 36.3369 27.3818C36.3369 27.3818 36.3059 27.4445 36.275 27.4758C37.8531 26.7237 39.1217 25.3448 39.7096 23.4959C40.607 20.6128 39.3693 17.4164 36.7701 15.9435C35.5014 15.2227 34.1399 14.972 32.8403 15.1287C30.7981 15.3481 29.0653 16.6329 28.0442 18.4192"
-          fill="#025376"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M34.9136 19.3906C33.8306 18.4504 32.531 17.9177 31.2314 17.8237C30.1484 17.7297 29.0654 17.949 28.1062 18.4191C28.0133 18.5758 27.9514 18.7325 27.8586 18.8892C26.8994 20.9575 25.7236 22.8377 24.3311 24.5927L31.0148 27.5698C32.7785 28.3532 34.697 28.2592 36.306 27.5071C36.306 27.5071 36.3369 27.4444 36.3679 27.4131C37.7912 24.7494 37.1724 21.3962 34.9136 19.4219"
-          fill="#009F9E"
-        />
-      </svg>
-    </>
-  );
-};
+import * as React from "react";
+export const Logo = (props) =>
+(
+  <svg
+    id="Layer_1"
+    width="54"
+    height="58.15"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 216 236.2"
+    style={{
+      enableBackground: "new 0 0 216 236.2",
+    }}
+    xmlSpace="preserve"
+    {...props}
+  >
+    <style type="text/css">
+      {".st0 {fill: #00a7b6;}"}
+    </style>
+    <g className="st0">
+      <path
+        d="M216,14.4V0H0v14.4h72v14.4H0v14.4h72v14.4H0V72h72l0,72h14.4l0-72h14.4v72h14.4V72h14.4l0,72H144l0-72h72 V57.6h-72V43.2h72V28.8h-72V14.4H216z M100.8,57.6H86.4V43.2h14.4V57.6z M100.8,28.8H86.4V14.4h14.4V28.8z M115.2,14.4h14.4v14.4 h-14.4V14.4z M129.6,57.6h-14.4V43.2h14.4V57.6z"
+      />
+      <g>
+        <g className="st0">
+          <g className="st0">
+            <path
+              d="M51.4,182.5c13.8,0,22.6,9.1,22.6,23.1c0,13.9-8.9,23-22.6,23c-13.7,0-22.6-9.1-22.6-23 C28.9,191.6,37.8,182.5,51.4,182.5z M51.4,219.5c8.2,0,10.6-7,10.6-13.9c0-7-2.4-14-10.6-14c-8.1,0-10.6,7-10.6,14 C40.9,212.5,43.3,219.5,51.4,219.5z"
+            />
+            <path
+              d="M78.5,182.5h11.4v6.8H90c2.9-4.6,7.6-6.8,13-6.8c13.7,0,19.8,11.1,19.8,23.5c0,11.7-6.4,22.5-19.2,22.5 c-5.2,0-10.2-2.3-13.1-6.6h-0.2v14.3h-12V182.5z M110.9,205.6c0-6.9-2.8-14.1-10.5-14.1c-7.9,0-10.4,7-10.4,14.1 c0,7.1,2.7,13.9,10.5,13.9C108.4,219.5,110.9,212.7,110.9,205.6z"
+            />
+            <path
+              d="M149.5,182.5c13.8,0,22.6,9.1,22.6,23.1c0,13.9-8.9,23-22.6,23c-13.7,0-22.5-9.1-22.5-23 C126.9,191.6,135.8,182.5,149.5,182.5z M149.5,219.5c8.2,0,10.6-7,10.6-13.9c0-7-2.4-14-10.6-14c-8.1,0-10.6,7-10.6,14 C138.9,212.5,141.4,219.5,149.5,219.5z"
+            />
+          </g>
+          <path
+            d="M18,182.4h9.3v8.5H18v22.3c0,4.3,1.1,5.3,5.3,5.3c1.3,0,2.6-0.1,3.9-0.4v9.9c-2.1,0.4-4.9,0.4-7.4,0.4 c-7.7,0-14.5-1.8-14.5-10.9v-26.7H0v-8.5h5.3v-7.7H18V182.4z"
+          />
+        </g>
+        <path
+          d="M202.1,201.1c-6.8-1.6-13.6-2.2-13.6-6.5c0-3.6,4-4.1,6.7-4.1c3.6,0,6.7,0.9,7.8,4h11.5c-1.8-9.2-10-12-19-12 c-9.4,0-19,2.9-19,14c0,7.7,6.9,10.1,13.9,11.7c8.6,1.9,13.6,3.1,13.6,6.8c0,4.2-4.4,5.6-7.9,5.6c-4.1,0-7.9-1.6-8.9-5.4h-11.5 c1.5,10.1,10.8,13.4,20.3,13.4c10,0,19.9-3.7,19.9-15.2C216,205.2,209.2,202.7,202.1,201.1z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/src/components/ModeToggle.tsx b/src/components/ModeToggle.tsx
@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import { FaCloudMoon } from "react-icons/fa";
+import { FaSun } from "react-icons/fa";
+import { FaComputer } from "react-icons/fa6";
+
+const modeLabel = (mode) => {
+  switch (mode) {
+    case 0:
+      return 'light';
+    case 1:
+      return 'dark';
+    case 2:
+      return 'default';
+    default:
+      return 'default';
+  }
+};
+
+const setModeClass = (mode) => {
+  const isBrowser = typeof window !== 'undefined';
+  if (
+    isBrowser && (
+    localStorage.getItem('mode') == 1 ||
+    (localStorage.getItem('mode') == 2 &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches))
+  ) {
+    console.log('set to dark');
+    document.documentElement.classList.add('dark');
+  } else {
+    console.log('remove dark');
+    document.documentElement.classList.remove('dark');
+  }
+};
+
+export const ModeToggle: React.FC = () => {
+  // Initialize state with mode from localStorage if available, or default to 2 (System Default)
+  const [mode, setMode] = useState(() => {
+    const isBrowser = typeof window !== 'undefined';
+    if (isBrowser) {
+      var savedMode = localStorage.getItem('mode');
+    } else {
+      var savedMode = 2;
+    }
+    return savedMode !== null ? parseInt(savedMode, 10) : 2;
+  });
+
+  // Effect hook to save mode to localStorage whenever it changes
+  useEffect(() => {
+    console.log(modeLabel(mode));
+    localStorage.setItem('mode', mode);
+    setModeClass(mode);
+  }, [mode]);
+
+  return (
+    <div className="mode-toggle">
+      <div className={`indicator indicator-pos-${mode}`}></div>
+      <button className="mode-icon" onClick={() => setMode(0)}>
+        <FaSun />
+      </button>
+      <button className="mode-icon" onClick={() => setMode(1)}>
+        <FaCloudMoon />
+      </button>
+      <button className="mode-icon" onClick={() => setMode(2)}>
+        <FaComputer />
+      </button>
+    </div>
+  );
+};
+
+export default ModeToggle;