diffusers-gallery

Running

App Files Files Community

radames commited on Feb 25, 2023

Commit

00d5466

1 Parent(s): 33b5c38

simple dark mode

Browse files

Files changed (1) hide show

index.html +12 -12

index.html CHANGED Viewed

@@ -57,9 +57,9 @@
       totalPages: -1,
       buttonClass(attr, filter) {
         if (this[attr] === filter) {
-          return "bg-black shadow-lg text-white"
         }
-        return "text-gray-600 hover:bg-gray-200 hover:text-gray-800"
       },
       async filterModels(style) {
         this.filter = style
@@ -105,41 +105,41 @@
   </script>
 </head>
-<body class="pb-10 pt-5 bg-gray-100 relative">
   <section class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mx-auto relative"
     x-data="modelsData">
     <div class="col-span-2 md:col-span-1 flex items-center gap-2 row-start-1">
-      <h1 class="mr-auto text-lg font-semibold">Diffusers Models Gallery</h1>
     </div>
     <div class="col-span-2 md:col-span-3 flex items-center gap-2 flex flex-wrap lg-auto">
       <div class="flex text-xs gap-2">
-        <span class="px-3 py-1 font-thin">sort by</span>
         <button :class="buttonClass('sort', 'trending')" class="px-2 md:px-3 py-1 rounded-full text"
           @click="sortModels('trending')">Trending</button>
         <button :class="buttonClass('sort', 'recent')"
-          class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
           @click="sortModels('recent')">Recent</button>
         <button :class="buttonClass('sort', 'likes')"
-          class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
           @click="sortModels('likes')">Most
           Likes</button>
       </div>
       <div class="flex text-xs gap-2">
-        <span class="px-2 md:px-3 py-1 font-thin"> style</span>
         <button :class="buttonClass('filter', 'all')" class="px-2 md:px-3 py-1 rounded-full"
           @click="filterModels('all')">All</button>
         <button :class="buttonClass('filter', 'anime')"
-          class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
           @click="filterModels('anime')">Anime</button>
         <button :class="buttonClass('filter', '3d')"
-          class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
           @click="filterModels('3d')">3D</button>
         <button :class="buttonClass('filter', 'realistic')"
-          class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
           @click="filterModels('realistic')">Realistic</button>
         <button :class="buttonClass('filter', 'nsfw')"
-          class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
           @click="filterModels('nsfw')">18+</button>
       </div>
     </div>

       totalPages: -1,
       buttonClass(attr, filter) {
         if (this[attr] === filter) {
+          return "bg-black dark:bg-white shadow-lg text-white dark:text-black"
         }
+        return "text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800"
       },
       async filterModels(style) {
         this.filter = style
   </script>
 </head>
+<body class="pb-10 pt-5 bg-gray-100 dark:bg-gray-900 relative">
   <section class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mx-auto relative"
     x-data="modelsData">
     <div class="col-span-2 md:col-span-1 flex items-center gap-2 row-start-1">
+      <h1 class="mr-auto text-lg font-semibold dark:text-white ">Diffusers Models Gallery</h1>
     </div>
     <div class="col-span-2 md:col-span-3 flex items-center gap-2 flex flex-wrap lg-auto">
       <div class="flex text-xs gap-2">
+        <span class="md:px-3 py-1 font-thin dark:text-white">sort by</span>
         <button :class="buttonClass('sort', 'trending')" class="px-2 md:px-3 py-1 rounded-full text"
           @click="sortModels('trending')">Trending</button>
         <button :class="buttonClass('sort', 'recent')"
+          class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
           @click="sortModels('recent')">Recent</button>
         <button :class="buttonClass('sort', 'likes')"
+          class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
           @click="sortModels('likes')">Most
           Likes</button>
       </div>
       <div class="flex text-xs gap-2">
+        <span class="md:px-3 py-1 font-thin dark:text-white"> style</span>
         <button :class="buttonClass('filter', 'all')" class="px-2 md:px-3 py-1 rounded-full"
           @click="filterModels('all')">All</button>
         <button :class="buttonClass('filter', 'anime')"
+          class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
           @click="filterModels('anime')">Anime</button>
         <button :class="buttonClass('filter', '3d')"
+          class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
           @click="filterModels('3d')">3D</button>
         <button :class="buttonClass('filter', 'realistic')"
+          class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
           @click="filterModels('realistic')">Realistic</button>
         <button :class="buttonClass('filter', 'nsfw')"
+          class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
           @click="filterModels('nsfw')">18+</button>
       </div>
     </div>