/srv/null-src/srv/posts/javascript-css-settings/example.php.html

  1 <!DOCTYPE html>
  2 <html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#">
  3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4 <head>
  5   <meta name="title" content="JavaScript Theme Switcher
  6   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  7   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0 ">
  8   <title>[null] JavaScript Theme Switcher - EXAMPLE</title>
  9 </head>
 10 
 11 
 12 <!-- CSS styles/themes. -->
 13 <style>
 14   .dark {
 15     background-color: #363636;
 16     color: #FFFFFF;
 17   }
 18   .light {
 19     background-color: #f2f2f2;
 20     color: #444444;
 21   }
 22   .high-contrast-dark {
 23     background-color: #000000;
 24     color: #FFFFFF;
 25   }
 26   .high-contrast-light {
 27     background-color: #FFFFFF;
 28     color: #000000;
 29   }
 30 </style>
 31 
 32 
 33 <!-- Start body, theme is applied to this element. -->
 34 <body>
 35 
 36 
 37   <!-- Start PHP script to read values from the form. -->
 38   <?php
 39     // Get the value of "theme" from the form and load it into the $THEME variable.
 40     $THEME = htmlspecialchars($_POST['theme']);
 41     // If the form was posted and "theme" is set. 
 42     if (isset($_POST['theme'])) {
 43       // Set the value of "theme-example" to localStorage with the content from the "$THEME" variable. 
 44       echo "<script>localStorage.setItem('theme-example', '$THEME');</script>";
 45     }
 46   ?>
 47 
 48 
 49   <!-- Start JavaScript -->
 50   <script>
 51     // Get the value of "theme" from localStorage and load it into the "thememode" variable.
 52     var thememode = localStorage.getItem("theme-example");
 53     
 54     // Set the list of themes to the "themes" contant. 
 55     // This list will be used to clear all applied themes before setting a new theme. 
 56     const themes = ["dark", "light", "high-contrast-dark", "high-contrast-light"];
 57 
 58     // Swtich for applying themes.
 59     switch(thememode) {
 60       case "Dark":
 61         document.body.classList.remove(...themes);
 62         document.body.classList.add('dark');
 63         break;
 64       case "Light":
 65         document.body.classList.remove(...themes);
 66         document.body.classList.add('light');
 67         break;
 68       case "High Contrast Dark":
 69         document.body.classList.remove(...themes);
 70         document.body.classList.add('high-contrast-dark');
 71         break;
 72       case "High Contrast Light":
 73         document.body.classList.remove(...themes);
 74         document.body.classList.add('high-contrast-light');
 75         break;
 76       default:
 77         localStorage.setItem('theme-example', 'Dark'); 
 78         document.body.classList.remove(...themes);
 79         document.body.classList.add('dark');
 80     }
 81   </script>
 82 
 83 
 84   <!-- main HTML -->
 85   <h1 class=pagename>JavaScript Theme Switcher Example</h1>
 86     <!-- Form to select themes, this form posts into the same page it resides in. -->
 87     <form action="/posts/javascript-css-settings/example.php" method="POST">
 88       <select id=theme name=theme>
 89         <!-- Use PHP and JavaScript to load the currently applied theme into the first drop-down option. -->
 90         <option value="<?php echo "<script>document.write(localStorage.getItem('theme-example'));</script>"; ?>"><?php echo "<script>document.write(localStorage.getItem('theme-example'));</script>"; ?></option>
 91         <option value"Dark">Dark</option>
 92         <option value"Light">Light</option>
 93         <option value"High Contrast Dark">High Contrast Dark</option>
 94         <option value"High Contrast Light">High Contrast Light</option>
 95       </select>
 96       <!-- Save and Apply "Submit" button. -->
 97       <input id=submit type="submit" value="Save and Apply" />
 98     </form>
 99   </body>
100 </html>