10:["$","main",null,{"className":"flex flex-col justify-center items-center relative mx-auto w-full slide-in-up","children":["$","$21",null,{"fallback":["$","div",null,{"className":"flex flex-col relative items-center justify-start md:justify-center h-auto gap-4 w-11/12 md:w-full mx-auto max-w-screen-xl p-4 md:p-0","children":[["$","div",null,{"data-loaded":"$undefined","className":"group overflow-hidden bg-content3 dark:bg-content2 before:opacity-100 before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:border-t before:border-content4/30 before:bg-gradient-to-r before:from-transparent before:via-content4 dark:before:via-default-700/10 before:to-transparent after:opacity-100 after:absolute after:inset-0 after:-z-10 after:bg-content3 dark:after:bg-content2 data-[loaded=true]:!bg-transparent data-[loaded=true]:before:opacity-0 data-[loaded=true]:before:animate-none data-[loaded=true]:after:opacity-0 transition-background !duration-300 before:transition-opacity before:!duration-300 relative md:mt-2 md:flex w-[220px] h-[25px] rounded-full z-10","children":["$","div",null,{"className":"opacity-0 group-data-[loaded=true]:opacity-100 transition-opacity motion-reduce:transition-none !duration-300","children":["$","div",null,{"className":" w-full h-full rounded-[12px] z-10 bg-default-300"}]}]}],["$","div",null,{"className":"flex flex-col justify-around md:justify-center items-center w-full gap-4 md:mx-auto","children":["$","div",null,{"className":"flex flex-row justify-start w-full md:justify-center items-center mx-auto gap-[40px]","children":[["$","div",null,{"data-loaded":"$undefined","className":"group overflow-hidden bg-content3 dark:bg-content2 before:opacity-100 before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:border-t before:border-content4/30 before:bg-gradient-to-r before:from-transparent before:via-content4 dark:before:via-default-700/10 before:to-transparent after:opacity-100 after:absolute after:inset-0 after:-z-10 after:bg-content3 dark:after:bg-content2 data-[loaded=true]:!bg-transparent data-[loaded=true]:before:opacity-0 data-[loaded=true]:before:animate-none data-[loaded=true]:after:opacity-0 transition-background !duration-300 before:transition-opacity before:!duration-300 relative hidden md:flex w-[298px] md:w-[318px] md:h-[448px] h-[398px] rounded-[12px] z-10","children":["$","div",null,{"className":"opacity-0 group-data-[loaded=true]:opacity-100 transition-opacity motion-reduce:transition-none !duration-300","children":["$","div",null,{"className":" w-full h-full rounded-[12px] z-10 bg-default-300"}]}]}],["$","div",null,{"data-loaded":"$undefined","className":"group overflow-hidden bg-content3 dark:bg-content2 before:opacity-100 before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:border-t before:border-content4/30 before:bg-gradient-to-r before:from-transparent before:via-content4 dark:before:via-default-700/10 before:to-transparent after:opacity-100 after:absolute after:inset-0 after:-z-10 after:bg-content3 dark:after:bg-content2 data-[loaded=true]:!bg-transparent data-[loaded=true]:before:opacity-0 data-[loaded=true]:before:animate-none data-[loaded=true]:after:opacity-0 transition-background !duration-300 before:transition-opacity before:!duration-300 relative flex w-[298px] md:w-[318px] md:h-[448px] h-[398px] rounded-[12px] z-10 mx-auto","children":["$","div",null,{"className":"opacity-0 group-data-[loaded=true]:opacity-100 transition-opacity motion-reduce:transition-none !duration-300","children":["$","div",null,{"className":" w-full h-full rounded-[12px] z-10 bg-default-300"}]}]}],["$","div",null,{"data-loaded":"$undefined","className":"group overflow-hidden bg-content3 dark:bg-content2 before:opacity-100 before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:border-t before:border-content4/30 before:bg-gradient-to-r before:from-transparent before:via-content4 dark:before:via-default-700/10 before:to-transparent after:opacity-100 after:absolute after:inset-0 after:-z-10 after:bg-content3 dark:after:bg-content2 data-[loaded=true]:!bg-transparent data-[loaded=true]:before:opacity-0 data-[loaded=true]:before:animate-none data-[loaded=true]:after:opacity-0 transition-background !duration-300 before:transition-opacity before:!duration-300 relative hidden md:flex w-[298px] md:w-[318px] md:h-[448px] h-[398px] rounded-[12px] z-10","children":["$","div",null,{"className":"opacity-0 group-data-[loaded=true]:opacity-100 transition-opacity motion-reduce:transition-none !duration-300","children":["$","div",null,{"className":" w-full h-full rounded-[12px] z-10 bg-default-300"}]}]}]]}]}],["$","div",null,{"data-loaded":"$undefined","className":"group overflow-hidden bg-content3 dark:bg-content2 before:opacity-100 before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:border-t before:border-content4/30 before:bg-gradient-to-r before:from-transparent before:via-content4 dark:before:via-default-700/10 before:to-transparent after:opacity-100 after:absolute after:inset-0 after:-z-10 after:bg-content3 dark:after:bg-content2 data-[loaded=true]:!bg-transparent data-[loaded=true]:before:opacity-0 data-[loaded=true]:before:animate-none data-[loaded=true]:after:opacity-0 transition-background !duration-300 before:transition-opacity before:!duration-300 flex relative md:mt-2 md:hidden w-full md:w-[40%] h-[45px] rounded-full z-10 max-w-[450px]","children":["$","div",null,{"className":"opacity-0 group-data-[loaded=true]:opacity-100 transition-opacity motion-reduce:transition-none !duration-300","children":["$","div",null,{"className":" w-full h-full rounded-[12px] z-10 bg-default-300"}]}]}],["$","div",null,{"className":"hidden md:flex flex-row gap-4 justify-end items-center w-full","children":[["$","div",null,{"data-loaded":"$undefined","className":"group overflow-hidden bg-content3 dark:bg-content2 before:opacity-100 before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:border-t before:border-content4/30 before:bg-gradient-to-r before:from-transparent before:via-content4 dark:before:via-default-700/10 before:to-transparent after:opacity-100 after:absolute after:inset-0 after:-z-10 after:bg-content3 dark:after:bg-content2 data-[loaded=true]:!bg-transparent data-[loaded=true]:before:opacity-0 data-[loaded=true]:before:animate-none data-[loaded=true]:after:opacity-0 transition-background !duration-300 before:transition-opacity before:!duration-300 relative md:mt-2 md:flex w-[40px] h-[40px] rounded-full z-10","children":["$","div",null,{"className":"opacity-0 group-data-[loaded=true]:opacity-100 transition-opacity motion-reduce:transition-none !duration-300","children":["$","div",null,{"className":" w-full h-full z-10 bg-default-300"}]}]}],["$","div",null,{"data-loaded":"$undefined","className":"group overflow-hidden bg-content3 dark:bg-content2 before:opacity-100 before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:border-t before:border-content4/30 before:bg-gradient-to-r before:from-transparent before:via-content4 dark:before:via-default-700/10 before:to-transparent after:opacity-100 after:absolute after:inset-0 after:-z-10 after:bg-content3 dark:after:bg-content2 data-[loaded=true]:!bg-transparent data-[loaded=true]:before:opacity-0 data-[loaded=true]:before:animate-none data-[loaded=true]:after:opacity-0 transition-background !duration-300 before:transition-opacity before:!duration-300 relative md:mt-2 md:flex w-[40px] h-[40px] rounded-full z-10","children":["$","div",null,{"className":"opacity-0 group-data-[loaded=true]:opacity-100 transition-opacity motion-reduce:transition-none !duration-300","children":["$","div",null,{"className":" w-full h-full z-10 bg-default-300"}]}]}]]}]]}],"children":["$","$L22",null,{"posts":[{"id":"8b9cb8db-4655-4b37-9afd-853f0ce198b0","title":"Next.js Dark & Light Mode Switch con Tailwind CSS","slug":"nextjs-dark--light-mode-switch-con-tailwind-css","description":"Un enfoque sencillo para implementar un interruptor de tema claro y oscuro en Next.js, utilizando Tailwind CSS. Ideal para agregar funcionalidades de personalización de tema en aplicaciones web modernas.","content":"$23","cover_image":"https://res.cloudinary.com/dzxm6bybj/image/upload/v1700559547/230shots_so_luvxoe.png","social_image":"https://res.cloudinary.com/dzxm6bybj/image/upload/v1700559547/230shots_so_luvxoe.png","canonical_url":"https://placidovenegas.dev/blog/next.js-dark-&-light-mode-switch-con-tailwind-css","author_id":"f71d44a9-5185-45e8-94f6-47b08b25a3e8","created_at":"2023-11-21T09:39:10.374863+00:00","edited_at":null,"crossposted_at":null,"published_at":null,"last_comment_at":"2024-10-26T22:05:21.313342+00:00","reading_time_minutes":0,"comments_count":10,"public_reactions_count":2,"positive_reactions_count":0,"category_id":"2574b4de-296d-468e-afba-1443a1ebea44","title_es":"Next.js Dark & Light Mode Switch con Tailwind CSS","content_es":"$24","status":"active","description_es":null,"accumulated_reading_time_seconds":10352,"cover_image_home":"https://res.cloudinary.com/dzxm6bybj/image/upload/v1700559707/300shots_so_n7ihy8.png","white_letter":true,"tags":[{"id":"56aba1dc-99e3-4be9-8f05-9ed284b0c49d","name":"css","color":"#FF6347"},{"id":"5a3a1a80-fd15-4270-bad0-0e42e90c8088","name":"javascript","color":"#ECC94B"},{"id":"d39ef43e-b949-475a-83a8-7f67ae6422f8","name":"tutorial","color":"#48BB78"},{"id":"59625980-7b92-47df-be7c-bc234d3cafac","name":"react","color":"#61DBFB"},{"id":"f3d93ce2-a775-4d11-945b-43845e0a6ff6","name":"nextjs","color":"#3776AB"}],"user":{"avatar_url":"https://avatars.githubusercontent.com/u/52011301?v=4","full_name":"placido venegas"},"posts_categories":{"name":"Tutorials"},"comments":[{"id":"39f75861-dd83-477e-9f74-bb10ea15b327","content":"

","author_id":"f71d44a9-5185-45e8-94f6-47b08b25a3e8","created_at":"2024-01-11T12:02:46.032633+00:00","parent_comment_id":null,"user":{"avatar_url":"https://avatars.githubusercontent.com/u/52011301?v=4","full_name":"placido venegas"}},{"id":"5e1a76be-bdd0-4e14-b946-dbf86b21b21d","content":"

","author_id":"f71d44a9-5185-45e8-94f6-47b08b25a3e8","created_at":"2024-01-11T12:04:06.449182+00:00","parent_comment_id":null,"user":{"avatar_url":"https://avatars.githubusercontent.com/u/52011301?v=4","full_name":"placido venegas"}},{"id":"545249f0-2be6-4ed2-b92e-72faa049fe1d","content":"

Ugu

","author_id":"f71d44a9-5185-45e8-94f6-47b08b25a3e8","created_at":"2024-01-11T12:06:53.87478+00:00","parent_comment_id":"5e1a76be-bdd0-4e14-b946-dbf86b21b21d","user":{"avatar_url":"https://avatars.githubusercontent.com/u/52011301?v=4","full_name":"placido venegas"}},{"id":"aa99a396-fa27-4033-bb82-8f5d270cecb0","content":"

@placido venegas prueba

","author_id":"f71d44a9-5185-45e8-94f6-47b08b25a3e8","created_at":"2024-01-11T12:35:35.067593+00:00","parent_comment_id":"39f75861-dd83-477e-9f74-bb10ea15b327","user":{"avatar_url":"https://avatars.githubusercontent.com/u/52011301?v=4","full_name":"placido venegas"}},{"id":"de80c31b-a635-4f4a-82b3-53d8806e36b6","content":"

das

","author_id":"f71d44a9-5185-45e8-94f6-47b08b25a3e8","created_at":"2024-01-11T12:38:01.790855+00:00","parent_comment_id":"39f75861-dd83-477e-9f74-bb10ea15b327","user":{"avatar_url":"https://avatars.githubusercontent.com/u/52011301?v=4","full_name":"placido venegas"}},{"id":"616a6efb-a940-4497-ad6b-39f9b6a8e46b","content":"asd","author_id":"f71d44a9-5185-45e8-94f6-47b08b25a3e8","created_at":"2024-01-11T13:13:29.411939+00:00","parent_comment_id":null,"user":{"avatar_url":"https://avatars.githubusercontent.com/u/52011301?v=4","full_name":"placido venegas"}},{"id":"50b0d77f-9c09-4e0e-b6cf-3ba30357aba8","content":"sads","author_id":"f71d44a9-5185-45e8-94f6-47b08b25a3e8","created_at":"2024-04-08T11:48:06.25476+00:00","parent_comment_id":null,"user":{"avatar_url":"https://avatars.githubusercontent.com/u/52011301?v=4","full_name":"placido venegas"}},{"id":"19884707-bd03-4d2c-8ab6-a64e3d2cdc8d","content":" @placido venegas asd ","author_id":"f71d44a9-5185-45e8-94f6-47b08b25a3e8","created_at":"2024-04-08T11:48:17.164927+00:00","parent_comment_id":"39f75861-dd83-477e-9f74-bb10ea15b327","user":{"avatar_url":"https://avatars.githubusercontent.com/u/52011301?v=4","full_name":"placido venegas"}},{"id":"893f0458-2145-472a-8df4-298baa05b64b","content":"Super profesional en lo suyo y su seña de identidad es hacer las cosas hechas de corazón. Un encanto de hombre. Suerte en tus proyectos futuros que se que es maravilloso y exitoso. ","author_id":"f71d44a9-5185-45e8-94f6-47b08b25a3e8","created_at":"2024-10-18T21:41:53.210244+00:00","parent_comment_id":null,"user":{"avatar_url":"https://avatars.githubusercontent.com/u/52011301?v=4","full_name":"placido venegas"}},{"id":"dc6c10cf-15ff-41a7-b5bf-0f0c659274c6","content":"Frhh","author_id":"f71d44a9-5185-45e8-94f6-47b08b25a3e8","created_at":"2024-10-26T22:05:21.313342+00:00","parent_comment_id":null,"user":{"avatar_url":"https://avatars.githubusercontent.com/u/52011301?v=4","full_name":"placido venegas"}}],"reactions":[{"reaction_type":"love","created_at":"2024-10-26T22:05:13.664352+00:00","user":{"avatar_url":"https://avatars.githubusercontent.com/u/52011301?v=4","full_name":"placido venegas"}},{"reaction_type":"love","created_at":"2023-11-21T17:01:11.523302+00:00","user":{"avatar_url":"https://lh3.googleusercontent.com/a/ACg8ocJbjOAg-Oqx7L3SjTFeHylzSDmKBduMhaOxSEBt21jwgkA=s96-c","full_name":"placisalo"}}]}]}]}]}]