Puppertino Siberian Tweaks

README.md

@@ -24,7 +24,7 @@ Welcome to **Puppertino**! This framework brings the macOS look and feel to your
 To integrate Puppertino into your project, simply include the full.css file in your HTML head tag:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/full.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css">
 ```
 ### Customize your setup
 If you only need specific components, you can import them individually to reduce file size. Here’s how you can include only the buttons:
@@ -57,13 +57,18 @@ If you can't find a component that you want, you can always [create an issue](ht
 
 ## Examples and templates
 
-Find all the documentation, examples, and list of components and how to use them
-at https://codedgar.github.io/Puppertino/.
+Find detailed examples and templates to help you get started quickly with Puppertino.
+
+Explore the examples at [Puppertino Examples](https://codedgar.github.io/Puppertino/examples/).
 
 ## License
 
 Puppertino is open-source and available under the [open-source MIT license](https://github.com/codedgar/Puppertino/blob/master/LICENSE), allowing you to freely use and modify the framework for your projects.
 
+## Contributing
+
+We welcome contributions! If you’d like to contribute to Puppertino, check out the [Contribution Guidelines](https://github.com/codedgar/Puppertino/blob/master/CONTRIBUTING.md) to learn how to get involved.
+
 ## About the creator
 
 Puppertino was developed by [Edgar Pérez](https://codedgar.com/), a web developer passionate about creating clean, elegant web experiences. As the framework continues to evolve, more features and components will be added—so stay tuned for regular updates!

docs/examples/actions.html

@@ -7,7 +7,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"
@@ -209,20 +209,7 @@
  
 </body>
 
-  <script defer>
-    function retrieve_theme(){
-      let theme = localStorage.getItem('puppertino_theme');
-      if(theme != null){
-        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
-      }
-    }
-
-    window.addEventListener("storage",function(){
-      retrieve_theme();
-    },false);
-
-    retrieve_theme();
-   </script>
+  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
   <script
     type="text/javascript"
     src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"

docs/examples/buttons.html

@@ -9,7 +9,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"
@@ -267,20 +267,7 @@
  
 </body>
 
-  <script defer>
-    function retrieve_theme(){
-      let theme = localStorage.getItem('puppertino_theme');
-      if(theme != null){
-        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
-      }
-    }
-
-    window.addEventListener("storage",function(){
-      retrieve_theme();
-    },false);
-
-    retrieve_theme();
-   </script>
+  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
   <script
     type="text/javascript"
     src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"

docs/examples/color_palette.html

@@ -12,7 +12,7 @@
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
     
-    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -477,20 +477,7 @@
  
 </body>
 
-  <script defer>
-    function retrieve_theme(){
-      let theme = localStorage.getItem('puppertino_theme');
-      if(theme != null){
-        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
-      }
-    }
-
-    window.addEventListener("storage",function(){
-      retrieve_theme();
-    },false);
-
-    retrieve_theme();
-   </script>
+  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
   <script type="text/javascript">
     var color_base = document.querySelectorAll(".color_base");
     for (var item of color_base) {

docs/examples/dark_mode.html

@@ -8,7 +8,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -215,29 +215,11 @@
   <script defer>
     hljs.initHighlightingOnLoad();
   </script>
+  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
   <script defer>
     document.querySelector('#the_button').addEventListener('click',function(e){
       e.preventDefault();
-      let theme = localStorage.getItem('puppertino_theme');
-      if (theme == 'p-dark-mode') {
-        localStorage.setItem('puppertino_theme','default');
-      }else{
-        localStorage.setItem('puppertino_theme','p-dark-mode');
-      }
-      retrieve_theme();
+      puppertinoThemeMan.toggle();
     });
-
-    function retrieve_theme(){
-      let theme = localStorage.getItem('puppertino_theme');
-      if(theme != null){
-        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
-      }
-    }
-
-    window.addEventListener("storage",function(){
-      retrieve_theme();
-    },false);
-
-    retrieve_theme();
   </script>
 </html>

docs/examples/forms.html

@@ -5,7 +5,7 @@
 	<title>Forms - Puppertino Framework</title>
 	<link href="https://rsms.me/inter/inter.css" rel="stylesheet">
     <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css"> -->
-    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     
   	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   	<meta http-equiv="x-ua-compatible" content="ie=edge">
@@ -489,20 +489,7 @@
  
 </body>
 
-  <script defer>
-    function retrieve_theme(){
-      let theme = localStorage.getItem('puppertino_theme');
-      if(theme != null){
-        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
-      }
-    }
-
-    window.addEventListener("storage",function(){
-      retrieve_theme();
-    },false);
-
-    retrieve_theme();
-   </script>
+  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
   <script
     type="text/javascript"
     src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"

docs/examples/getting-started.html

@@ -8,7 +8,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -91,20 +91,7 @@
  
 </body>
 
-  <script defer>
-    function retrieve_theme(){
-      let theme = localStorage.getItem('puppertino_theme');
-      if(theme != null){
-        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
-      }
-    }
-
-    window.addEventListener("storage",function(){
-      retrieve_theme();
-    },false);
-
-    retrieve_theme();
-   </script>
+  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
   <script
     type="text/javascript"
     src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"

docs/examples/icons.html

@@ -12,7 +12,7 @@
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
     
-    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -90,18 +90,5 @@
  
 </body>
 
-  <script defer>
-    function retrieve_theme(){
-      let theme = localStorage.getItem('puppertino_theme');
-      if(theme != null){
-        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
-      }
-    }
-
-    window.addEventListener("storage",function(){
-      retrieve_theme();
-    },false);
-
-    retrieve_theme();
-   </script>
+  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
 </html>

docs/examples/index.html

@@ -12,7 +12,7 @@
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
     
-    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -168,18 +168,5 @@
  
 </body>
 
-  <script defer>
-    function retrieve_theme(){
-      let theme = localStorage.getItem('puppertino_theme');
-      if(theme != null){
-        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
-      }
-    }
-
-    window.addEventListener("storage",function(){
-      retrieve_theme();
-    },false);
-
-    retrieve_theme();
-   </script>
+  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
 </html>

docs/examples/layout.html

@@ -11,7 +11,7 @@
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
     
-    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -119,18 +119,5 @@
  
 </body>
 
-  <script defer>
-    function retrieve_theme(){
-      let theme = localStorage.getItem('puppertino_theme');
-      if(theme != null){
-        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
-      }
-    }
-
-    window.addEventListener("storage",function(){
-      retrieve_theme();
-    },false);
-
-    retrieve_theme();
-   </script>
+  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
 </html>

docs/examples/modals.html

@@ -8,7 +8,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -248,20 +248,7 @@
  
 </body>
 
-  <script defer>
-    function retrieve_theme(){
-      let theme = localStorage.getItem('puppertino_theme');
-      if(theme != null){
-        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
-      }
-    }
-
-    window.addEventListener("storage",function(){
-      retrieve_theme();
-    },false);
-
-    retrieve_theme();
-   </script>
+  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino/src/js/modals.js"></script>
   <script
     type="text/javascript"

docs/examples/segmented_controls.html

@@ -8,7 +8,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -258,20 +258,7 @@
  
 </body>
 
-  <script defer>
-    function retrieve_theme(){
-      let theme = localStorage.getItem('puppertino_theme');
-      if(theme != null){
-        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
-      }
-    }
-
-    window.addEventListener("storage",function(){
-      retrieve_theme();
-    },false);
-
-    retrieve_theme();
-   </script>
+  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
   <script
     type="text/javascript"
     src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"

docs/examples/shadows.html

@@ -12,7 +12,7 @@
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
     
-    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -210,20 +210,7 @@
  
 </body>
 
-  <script defer>
-    function retrieve_theme(){
-      let theme = localStorage.getItem('puppertino_theme');
-      if(theme != null){
-        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
-      }
-    }
-
-    window.addEventListener("storage",function(){
-      retrieve_theme();
-    },false);
-
-    retrieve_theme();
-   </script>
+  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
   <script
     type="text/javascript"
     src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"

docs/examples/tabs.html

@@ -7,7 +7,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"
@@ -238,20 +238,7 @@
  
 </body>
 
-  <script defer>
-    function retrieve_theme(){
-      let theme = localStorage.getItem('puppertino_theme');
-      if(theme != null){
-        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
-      }
-    }
-
-    window.addEventListener("storage",function(){
-      retrieve_theme();
-    },false);
-
-    retrieve_theme();
-   </script>
+  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
   <script
     type="text/javascript"
     src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"