oleg
/
Puppertino
mirror of https://github.com/codedgar/Puppertino.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Dark Mode - 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/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" />
    <link rel="stylesheet" type="text/css" href="doc.css" />
    <meta
      name="description"
      content="This is the documentation for Dark Mode on the Puppertino Framework, a framework that mimics Apple's design, woof!"
    />
    <link rel="icon" type="image/png" href="../landing-images/doggo.png" />
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-176821843-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-176821843-1');
    </script>
  </head>
  <body class="p-layout">
    <div class="route">
      <a
        href="https://codedgar.github.io/Puppertino/"
        class="p-btn p-btn-scope p-btn-scope-unactive"
        >Puppertino</a
      >
      <p>/</p>
      <a href="index.html" class="p-btn p-btn-scope p-btn-scope-unactive"
        >Examples</a
      >
      <p>/</p>
      <a href="dark_mode.html" class="p-btn p-btn-scope">Dark Mode</a>
    </div>
    <h1>Dark Mode</h1>
    <div class="master">
      <p>
        Dark Mode it's not new to Apple's design system, and it has been something we've been wanting to add since the first version of Puppertino. And this is now a strong part of Puppertino, to use Dark Mode, you will need to get the  
        <a
          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/dark_mode.css"
          target="_blank"
          >CSS of Dark Mode</a
        >
        or
        <a
          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/newfull.css"
          target="_blank"
          >download the full CSS</a
        >
      </p>

      <div class="talk-about-it">
        <h2>About Dark Mode.</h2>
        <p>
          Dark mode it's pretty straight forward to use. And it comes in two flavors, automatic and manual toggling. The automatic toggling uses the <code class="code">media-prefers-scheme</code> to get the user's desired theme and apply automatically. Of course, this doesn't work in some (mosts) of Linux Operating systems, and that's what the manual version is aimed for. It's also really useful if you want your users to select their own theme.

          <br>
          <br>
          This is how it looks on practice (All current components support dark mode):
        </p>

        <div class="content_smol ">
          <div class="mw-450 p-dark-mode dark_theme">
              <div class="p-mobile-tabs-content">
                <div class="p-mobile-tabs--content active" id="demo4">
                  <h1 style="color: #fff;">Dark theme</h1>
                  <a href="#" class="p-btn p-prim-col">Primary</a>
                  <a href="#" class="p-btn">Second</a>
                  <input
                  type="email"
                  class="p-form-text"
                  placeholder="Normal validated input (email)"
                  />
                  </div>
                
                <div class="p-mobile-tabs">
                <div>
                  <a href="#" class="active" data-p-mobile-toggle="#demo1">
                    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                    Home
                  </a>
                </div>
              </div>
              </div>

          </div>
          <div class="mw-450">
              <div class="p-mobile-tabs-content">
                <div class="p-mobile-tabs--content active" id="demo1">
                  <h1>Default theme</h1>
                  <a href="#" class="p-btn p-prim-col">Primary</a>
                  <a href="#" class="p-btn">Second</a>
                  <input
                  type="email"
                  class="p-form-text"
                  placeholder="Normal validated input (email)"
                  />
                </div>
                
                <div class="p-mobile-tabs">
                <div>
                  <a href="#" class="active" data-p-mobile-toggle="#demo1">
                    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                    Home
                  </a>
                </div>
              </div>
              </div>

          </div>
        </div>
        
        <p>You can experience the Dark Mode in all of the Puppertino's website by clicking <a href="#" class="p-btn p-prim-col" id="the_button">This button</a></p>
        <p>Usage:</p>
        <div class="code">
          <pre>
				<code class="html">
&#60;body class="p-auto-dark-mode">&#60;/body> &#60;!-- Automatic -->
&#60;body class="p-dark-theme">&#60;/body> &#60;!-- Manual -->
				</code>
			</pre>
        </div>
      </div>

      <div class="talk-about-it" id="modifier">
        <h2>How to use manual.</h2>
        <p>
          <h3>Getting Started</h3>
          <p><strong>1. Initializing PuppertinoThemeMan</strong></p>
          <p>To get started, initialize <code class="code">PuppertinoThemeMan</code> by calling the <code class="code">init()</code> function. This setup allows you to customize theme behavior, including auto-detection based on system preferences.</p>
          <div class="code">
          <pre>
<code class="js">
  puppertinoThemeMan.init({
    autoDetect: true, // Automatically detect system theme
    darkThemeClass: 'p-dark-mode' // Your custom dark theme class (optional)
  });  
</code>
        </pre>
      </div>
      <h3>Options:</h3>
      <ul>
        <li>
          <strong>autoDetect:</strong> Enable automatic detection of the system's preferred color scheme. If set to true, <code class="code">PuppertinoThemeMan</code> will adjust based on the system's light or dark mode.
        </li>
        <li>
          <strong>darkThemeClass:</strong> Define the class name for the dark mode (defaults to <strong>p-dark-mode</strong>). Customize this if you’re using a different class for your dark theme styles.
        </li>
      </ul>
      <h3>
        2. Toggling Themes
      </h3>
      <p>Easily switch between light and dark themes using the <code class="code">toggle()</code> function. This function will apply the correct theme class and store the user’s selection for future visits.</p>
      <div class="code">
        <pre>
<code>
  puppertinoThemeMan.toggle();
</code>
      </pre>
    </div>
    <p>When this function is called, PuppertinoThemeMan will:</p>
    <ul>
      <li>Add or remove the dark theme class from the document’s body.</li>
      <li>Save the user’s selection in <code class="code">localStorage</code> to remember the preference across sessions.</li>
    </ul>

    <h3>3. System Theme Auto-Detection</h3>
    <p>If enabled in the <code class="code">init()</code> options, PuppertinoThemeMan can automatically switch to light or dark mode based on the user’s system preferences. This ensures a seamless experience aligned with the user’s device settings.</p>
    <ul>
      <li>The detection is powered by the prefers-color-scheme media query.</li>
      <li>PuppertinoThemeMan will listen for changes to this setting and adjust the theme accordingly.</li>
    </ul>
    <h3>4. Consistency Across Tabs</h3>
    <p>PuppertinoThemeMan synchronizes theme changes across multiple tabs. If a user changes their theme in one tab, the new theme will automatically apply to all open tabs in the same browser.
      <br><br>
      No extra configuration is needed—this behavior is built into PuppertinoThemeMan, ensuring a unified user experience.
      </p>
    <h3>5. Checking the Current Theme</h3>
    <p>You can check whether the dark theme is active by using the isDarkThemeActive() function. This function returns true if the dark theme is currently applied.</p>
    <div class="code">
      <pre>
<code>
  const isDarkMode = puppertinoThemeMan.isDarkThemeActive();
</code>
    </pre>
  </div>
  <p>This allows you to tailor additional features based on the active theme.</p>
    </div>
      <div class="talk-about-it" id="modifier">
        <h2>Under the hood.</h2>
        <p>
          How does this all work? Simple, Puppertino is based on CSS variables, and when you toggle this class you are basically overriding all the colors in CSS variables for the dark themed ones, making it really easy to change all the colors, and also create your own themes if you need to do so. Keep in mind that some variables have been reused to cut down sizes.
        </p>
      </div>

    </div>
 
</body>
  <script
    type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"
  ></script>
  <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();
      puppertinoThemeMan.toggle();
    });
  </script>
</html>