Add dark mode

src/assets/style/custom.scss

@@ -8,6 +8,7 @@ body {
   font-family: "Roboto", sans-serif;
   margin: 0;
   padding: 0;
+  @apply dark:bg-gray-900 dark:text-gray-200 transition-colors duration-200;
 }
 
 .container {
@@ -21,11 +22,16 @@ body {
   font-size: 14px;
 }
 
+.ui-icon-button {
+  @apply inline-flex h-10 w-10 items-center justify-center rounded border border-gray-300 text-gray-700 transition-colors hover:border-jfrog-green hover:bg-gray-100 hover:text-jfrog-green dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-jfrog-green;
+}
+
 h1 {
   font-size: 28px;
   line-height: 1.285;
   padding-bottom: 1rem;
   color: black;
+  @apply dark:text-gray-100 transition-colors duration-200;
   @media (min-width: #{$md}) {
     font-size: 36px;
     line-height: 1.16;
@@ -37,12 +43,94 @@ h2 {
   line-height: 1.285;
   padding-bottom: .5rem;
   color: black;
+  @apply dark:text-gray-100 transition-colors duration-200;
   @media (min-width: #{$md}) {
     font-size: 32px;
     line-height: 1.16;
   }
 }
 
+.green,
+.green-dark {
+  @apply dark:text-jfrog-green transition-colors duration-200;
+}
+
+.single-post-content a,
+.latest-posts-single-post-content a,
+.latest-posts a,
+section.report a {
+  @apply dark:text-blue-400 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content a:visited,
+.single-post-content a:visited {
+  @apply dark:text-purple-400 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content table th,
+.single-post-content table th {
+  @apply dark:bg-gray-800 dark:text-gray-100 dark:border-gray-600 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content table td,
+.single-post-content table td {
+  @apply dark:border-gray-600 dark:text-gray-200 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content table tr:nth-child(even),
+.single-post-content table tr:nth-child(even) {
+  @apply dark:bg-gray-800 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content table tr:hover,
+.single-post-content table tr:hover {
+  @apply dark:bg-gray-700 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content code:not(pre code) {
+  @apply dark:bg-gray-800 dark:text-red-300 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content h6 {
+  @apply dark:text-gray-300 transition-colors duration-200;
+}
+
+.latest-posts {
+  @apply dark:bg-gray-900 transition-colors duration-200;
+}
+
+.latest-posts .container {
+  @apply dark:bg-gray-800 dark:border-gray-700 transition-colors duration-200;
+  border: 1px solid transparent; /* default border */
+}
+
+.latest-posts .container h1 {
+  @apply dark:text-gray-50 transition-colors duration-200;
+}
+
+.latest-posts .green {
+  @apply dark:text-jfrog-green transition-colors duration-200;
+}
+
+.latest-posts-single-post-content {
+  @apply dark:text-gray-200 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content h2,
+.latest-posts-single-post-content h3,
+.latest-posts-single-post-content h4,
+.latest-posts-single-post-content h5 {
+  @apply dark:text-jfrog-green transition-colors duration-200;
+}
+
+.latest-posts-single-post-content hr {
+  @apply dark:border-gray-600 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content blockquote {
+  @apply dark:bg-gray-900 dark:text-gray-300 transition-colors duration-200;
+}
+
 .green-radial-gradient {
   background: radial-gradient(84.94% 84.94% at 50% 76.92%, #2A972F 38.14%, #40BE46 89.06%);
 }
@@ -81,4 +169,3 @@ pre {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-

src/components/Banner.vue

@@ -25,11 +25,6 @@
 import BannerButton from './BannerButton.vue'
 export default {
   name: 'banner',
-  data() {
-    return {
-      bannerClass: `sr-banner px-5 py-2 text-center bg-center bg-cover text-white bg-${this.color}`,
-    }
-  },
   props: {
     color: {
       type: String,
@@ -65,6 +60,10 @@ export default {
     },
   },
   computed: {
+    bannerClass() {
+      const darkThemeClass = this.color === 'jfrog-green' ? ' dark:bg-green-700' : ''
+      return `sr-banner px-5 py-2 text-center bg-center bg-cover text-white bg-${this.color}${darkThemeClass}`
+    },
     dateString: function () {
       if(this.date){
       const d = new Date(this.date)

src/components/BannerButton.vue

@@ -14,11 +14,6 @@
 
 <script>
 export default {
-  data() {
-    return {
-      buttonClass: `banner-button inline-block text-${this.textColor} bg-${this.bgColor} px-4 py-6 lg:py-3`
-    }
-  },
   props: {
     link: Object,
     default() {
@@ -50,6 +45,12 @@ export default {
       default: 'See All Vulnerabilities'
     }
   },
+  computed: {
+    buttonClass() {
+      const darkThemeClass = this.bgColor === 'jfrog-green' ? ' dark:bg-green-700' : ''
+      return `banner-button inline-block text-${this.textColor} bg-${this.bgColor}${darkThemeClass} px-4 py-6 lg:py-3 transition-colors`
+    }
+  }
 }
 </script>
 

src/components/BannerSmall.vue

@@ -13,11 +13,6 @@
 
 export default {
   name: 'BannerSmall',
-  data() {
-    return {
-      bannerClass: `sr-banner sr-banner-small px-5 py-2 text-center bg-center bg-cover text-white bg-${this.color}`,
-    }
-  },
   props: {
     color: {
       type: String,
@@ -32,6 +27,12 @@ export default {
       default: 'Vulnerabilities discovered'
     },
   },
+  computed: {
+    bannerClass() {
+      const darkThemeClass = this.color === 'jfrog-green' ? ' dark:bg-green-700' : ''
+      return `sr-banner sr-banner-small px-5 py-2 text-center bg-center bg-cover text-white bg-${this.color}${darkThemeClass}`
+    }
+  }
 }
 </script>
 

src/components/Button.vue

@@ -21,10 +21,12 @@
   .sr-button {
     background-color: $green;
     color: white;
+    @apply dark:bg-green-700;
     border-radius: 4px;
     transition: all 0.32s ease;
     &:hover {
       background-color: $bright-green;
+      @apply dark:bg-green-600;
     }
   }
 </style>

src/components/CVEBlogPreview.vue

@@ -11,7 +11,7 @@
 
     <div class="py-3 sm:px-5 sm:py-0">
       <div class="text-sm font-bold leading-4 text-jfrog-green uppercase cve-date" v-html="postObj.publish"> </div>
-      <div class="text-sm  leading-4 text-black cve-title" >
+      <div class="text-sm  leading-4 text-black dark:text-gray-100 cve-title" >
         <span class="textMaxLine" v-html="postObj.title"></span>
       </div>
     </div>
@@ -91,6 +91,7 @@ export default {
       }
       .list-split{
         border-bottom: 0.5px solid #000000;
+        @apply dark:border-gray-500;
         height: 0.5px;
         width: 100%;
 
@@ -107,6 +108,7 @@ export default {
       }
       .list-split{
         border-right: 0.5px solid #000000;
+        @apply dark:border-gray-500;
         height: 2.75rem;
       }
     }

src/components/DarkModeToggle.vue

@@ -0,0 +1,60 @@
+<template>
+  <button
+    type="button"
+    class="theme-toggle ui-icon-button"
+    :aria-pressed="isDark ? 'true' : 'false'"
+    aria-label="Toggle dark mode"
+    title="Toggle dark mode"
+    @click="toggle"
+  >
+    <svg
+      v-if="!isDark"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+    <svg
+      v-else
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+    </svg>
+  </button>
+</template>
+
+<script>
+import { themeState, themeMutations } from "~/theme.js";
+
+export default {
+  name: "DarkModeToggle",
+  computed: {
+    isDark() {
+      return themeState.isDark;
+    }
+  },
+  methods: {
+    toggle() {
+      themeMutations.toggle();
+    },
+  },
+};
+</script>

src/components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="py-4 main-footer bg-black">
+  <footer class="py-4 main-footer bg-black dark:bg-gray-950">
     <div class="container mx-auto px-2">
       <div class="flex w-full justify-center flex-col sm:flex-row sm:justify-between items-center flex-wrap gap-4">
         <div class="left">

src/components/Header.vue

@@ -1,19 +1,18 @@
 <template>
-  <header class="py-2 main-header">
+  <header class="py-2 main-header dark:bg-gray-900">
     <div class="container mx-auto px-2">
       <div class="flex w-full justify-between items-center">
-        <div class="left">
-          <div class="flex items-center gap-2">
+        <div class="left flex-1 min-w-0">
+          <div class="flex min-w-0 items-center gap-2">
             <JFrogLogo />
-            <span class="site-name small">{{ $static.metadata.siteName }}</span>
+            <span class="site-name small truncate dark:text-gray-200">{{ $static.metadata.siteName }}</span>
           </div>
         </div>
-        <div class="right">
+        <div class="right flex-shrink-0">
           <div class="hidden sm:block desktop-menu-wrapper">
             <TopMenu />
           </div>
-          <div class="sm:hidden flex item-center mobile-menu-wrapper gap-2">
-
+          <div class="sm:hidden flex mobile-menu-wrapper items-center">
             <!-- to be enabled in the feature -->
             <button v-if="false" class="search px-1">
               <g-image
@@ -25,13 +24,24 @@
 
             <button
               @click="isShowMobileMenu = true"
-              class="show-menu-hamburger px-1"
+              class="show-menu-hamburger ui-icon-button"
+              type="button"
+              aria-label="Open menu"
+              aria-haspopup="dialog"
+              :aria-expanded="isShowMobileMenu ? 'true' : 'false'"
             >
-              <g-image
-                src="~/assets/img/buttons/hamburger.svg"
-                :immediate="true"
-                alt="Menu"
-              />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="22"
+                height="16"
+                viewBox="0 0 22 16"
+                fill="none"
+                aria-hidden="true"
+              >
+                <path d="M0 1C0 0.447715 0.447715 0 1 0H21C21.5523 0 22 0.447715 22 1C22 1.55228 21.5523 2 21 2H1C0.447716 2 0 1.55228 0 1Z" fill="currentColor"/>
+                <path d="M0 8C0 7.44772 0.447715 7 1 7H21C21.5523 7 22 7.44772 22 8C22 8.55228 21.5523 9 21 9H1C0.447716 9 0 8.55228 0 8Z" fill="currentColor"/>
+                <path d="M0 15C0 14.4477 0.447715 14 1 14H21C21.5523 14 22 14.4477 22 15C22 15.5523 21.5523 16 21 16H1C0.447716 16 0 15.5523 0 15Z" fill="currentColor"/>
+              </svg>
             </button>
 
           </div>
@@ -67,7 +77,7 @@ export default {
   components: {
     JFrogLogo,
     TopMenu,
-    MobileMenu
+    MobileMenu,
   }
 }
 </script>
@@ -77,6 +87,17 @@ export default {
   .main-header {
     border-bottom: 1px solid $border-gray;
   }
+  html.dark .main-header {
+    border-bottom-color: #475569;
+  }
+  .site-name {
+    max-width: 11rem;
+  }
+  @media (min-width: #{$sm}) {
+    .site-name {
+      max-width: none;
+    }
+  }
   .mobile-menu {
     transition: opacity .5s;
   }