all repos — themeswitcher @ f2ba6cde56b3f567694d99a6794dea3a6be4c4ca 


        

        Peter Molnar github@petermolnar.net
        
Mon, 29 Apr 2019 08:28:18 +0000

        


        

        commit
        

          f2ba6cde56b3f567694d99a6794dea3a6be4c4ca
        
        

        


        
        

        parent
        

          f5818864c52b9b5f3fc387ea2a8e6202b725e1b9
        

        


        
        

          

          3 files changed,
          65 insertions(+),
          38 deletions(-)
          

          

            

            jump to
            
            
            
            
            
            
            
          

        

      

      

        
        
        
        
          

            

            
            
            
            M
            
          
          themeswitcher.css
          
            → 
            themeswitcher.css
          
          
            
@@ -1,12 +1,21 @@
+.theme input {
+  display: none;
+}
+
+.theme {
+  margin: 0 0.3em 0 0;
+}
+
 .theme input + label {
+  color: #f90;
+  cursor: pointer;
   border-bottom: 3px solid transparent;
+  padding-bottom: 0.1em;
+  margin-left:0.6em;
 }
 
+.theme input:hover + label,
 .theme input:checked + label {
-  border-bottom: 3px solid #ccc;
-}
-
-.theme,
-.theme input {
-  display: none;
+  border-bottom: 3px solid #eee;
+  color: #eee;
 }

          

          

        
          

            

            
            
            
            M
            
          
          themeswitcher.html
          
            → 
            themeswitcher.html
          
          
            
@@ -7,17 +7,16 @@ # alt CSS
 </style>
 
 
-<!-- include this into the <body> to have controls -->            
-<form class="theme" aria-hidden="true">
-    <span>
-        🔆
-    </span>
-    <span>
-        <input name="colorscheme" value="dark" id="darkscheme" type="radio">
-        <label for="darkscheme">dark</label>
-    </span>
-    <span>
-        <input name="colorscheme" value="light" id="lightscheme" type="radio">
-        <label for="lightscheme">light</label>
-    </span>
-</form>+<!-- example of container and sibling that will auto-include the theme form -->
+<div id="header-forms">
+    <!-- theme form will be inserted here if the selectors in the JS code below are unmodified -->
+    <form id="search" role="search" method="get" action="/search/">
+       <label for="qsub">
+            <input type="submit" value="search" id="qsub" name="qsub" />
+                <svg width="16" height="16">
+                    <use xlink:href="#icon-search"></use>
+                </svg>
+        </label>
+        <input type="search" placeholder="search..." value="" name="q" id="q" title="Search for:" />
+    </form>
+</div>

          

          

        
          

            

            
            
            
            M
            
          
          themeswitcher.js
          
            → 
            themeswitcher.js
          
          
            
@@ -1,7 +1,10 @@
 var DEFAULT_THEME = 'dark';
 var ALT_THEME = 'light';
 var STORAGE_KEY = 'theme';
-var colorscheme = document.getElementsByName('colorscheme');
+var theme_container = document.getElementById("header-forms");
+var theme_insbefore = document.getElementById("search");
+var colorscheme = [];
+var mql = window.matchMedia('(prefers-color-scheme: ' + ALT_THEME + ')');
 
 function indicateTheme(mode) {
     for(var i = colorscheme.length; i--; ) {

@@ -28,10 +31,8 @@ /* user wants == mql match => remove storage */
     if ((mode == DEFAULT_THEME && !mql.matches) || (mode == ALT_THEME && mql.matches)) {
         localStorage.removeItem(STORAGE_KEY);
     }
-    /* avoid needing cookie banners; besides, messages like this would make people understand that clicking on a thing 
-    might do something to their computer */
     else {
-        if(confirm("I\'ll need to store your theme of choice in your browser, in a place called localStorage.\n\nAre you OK with this?")) {
+        if(confirm("I\'ll need to store your choice in your browser, in a place called localStorage.\n\nAre you OK with this?")) {
             localStorage.setItem(STORAGE_KEY, mode);
         }
     }

@@ -55,25 +56,43 @@ applyTheme(mode);
     indicateTheme(mode);
 }
 
-/* at 2019-01 this only works in Dev Safari on Mojave */
-var mql = window.matchMedia('(prefers-color-scheme: ' + ALT_THEME + ')');
-autoTheme(mql);
-mql.addListener(autoTheme);
+function doTheme() {
+    var themeform = document.createElement('form');
+    themeform.className = "theme";
+    themeform.innerHTML='<svg width="16" height="16"><use xlink:href="#icon-contrast"></use></svg>';
+    theme_container.insertBefore(themeform, theme_insbefore);
+    var schemes = ["dark", "light"];
+    for (var i = 0; i < schemes.length; i++) {
+        var span = document.createElement('span');
+        themeform.appendChild(span);
+
+        var input = document.createElement('input');
+        input.name = 'colorscheme';
+        input.type = 'radio';
+        input.id = schemes[i] + input.name;
+        input.value = schemes[i];
+        span.appendChild(input);
+
+        var label = document.createElement('label');
+        label.htmlFor = input.id;
+        label.innerHTML = schemes[i];
+        span.appendChild(label);
+    }
+
+    colorscheme = document.getElementsByName('colorscheme');
+    for(var i = colorscheme.length; i--; ) {
+        colorscheme[i].onclick = setTheme;
+    }
+
+    autoTheme(mql);
+    mql.addListener(autoTheme);
+}
 
-/* only show controls if localstorage is available */
 var test = 'ping';
 try {
     localStorage.setItem(test, test);
     localStorage.removeItem(test);
-    /* add a listener for the controle */
-    for(var i = colorscheme.length; i--; ) {
-        colorscheme[i].onclick = setTheme;
-    }
-    /* show the control */
-    var themeforms = document.getElementsByClassName(STORAGE_KEY);
-    for(var i = themeforms.length; i--; ) {
-        themeforms[i].style.display = 'inline-block';
-    }
+    doTheme();
 } catch(e) {
     console.log('localStorage is not available, manual theme switching is disabled');
 }