Switching headers' color

[stdword]

inspired by this post & this one

Steps

1. Create 🏛template (use copy button in the top right corner):

   - template:: switch header color
     template-list-as:: template
     template-shortcut:: 
     template-version:: 1
     plugin-version:: 4.2.0
     link:: [Showroom](https://github.com/stdword/logseq13-full-house-plugin/discussions/49)
     arg-toggle-color:: 
     - ```javascript
       ``{
         // do not modify block's content
         blocks.skip()
       
         var colors = ['yellow', 'red', 'pink', 'green', 'blue', 'purple', 'gray']
         var current = c.currentBlock.props['background-color']
         if (current)
             current = current.toLowerCase()
       
         if (c.args['toggle-color']) {
             colors = c.args['toggle-color'].toLowerCase()
             if (colors.includes(', '))
                 colors = colors.split(', ').map(c => c.trim())
             else
                 colors = [colors]
             colors = colors.map(c => {
                 if (c.startsWith('\\#'))
                     c = c.slice(1)
                 if (/^(?:[0-9a-f]{3}){1,2}$/i.test(c))
                     return '#' + c
                 return c
             })
         }
       
         var nextIndex = 0
         if (!current)
             nextIndex = 0
         else if (current && !colors.includes(current))
             nextIndex = null
         else {
             nextIndex = colors.indexOf(current) + 1
             if (nextIndex >= colors.length)
                 nextIndex = null
         }
       
         var next = nextIndex === null ? null : colors[nextIndex]
         
         const selected = (await logseq.Editor.getSelectedBlocks()) ?? [c.currentBlock]
         for (const uuid of selected.map(b => b.uuid))
             await logseq.Editor.upsertBlockProperty(uuid, 'background-color', next)
       
         if (cursor.selection())
             if (next) {
                 var [ color ] = dev.cssVars([`--ls-highlight-color-${next}`])
                 color = dev.color(color)
                 logseq.UI.showMsg(`[:p "Background color has been changed to " [:font {:color "${color}"} "${next}"]]`, ' success')
             }
             else
                 logseq.UI.showMsg(`[:p "Background color has been " [:i "removed"]]`, 'success')
       }``
       ```

2. Reload the application (⌘R or Ctrl+R for Win) to register shortcut command
3. Got to Settings → Keymap (g s)
4. Bind any shortcut you want for command «Insert 🏛️template: "color header"»
5. Reload the application again (⌘R or Ctrl+R for Win) to register just chosen shortcut
6. In the block Edit Mode or in the block Selection Mode use chosen shortcut to cycle through all available header colors

Configuring

Defining your own sequence of colors

Use property arg-toggle-color:: for that. You can specify the colors in any available in CSS form.

arg-toggle-color:: green, red
arg-toggle-color:: green
arg-toggle-color:: rgb(128,128,128), c5def5, \#777, black, hsl(0,50%,50%)

Note: Color values yellow, red, pink, green, blue, purple, gray are predefined by your current theme.
Note: To use color in HEX format do not specify hash sign «#» OR escape it «#» to prevent it act as Logseq tag reference.
Note: Use colon WITH space «,␣» to specify several colors (ex: red,␣green) and colon WITHOUT space «,» to separate one color parts (ex: rgb(128,128,128)).

Set different shortcuts for different colors

1. Fill property arg-toggle-color with first color (ex: arg-toggle-color:: green)
2. Create another 🏛️template (ex: for red color):

   - template:: switch header color (red)
     template-list-as:: template
     template-shortcut:: 
     arg-toggle-color:: red
     - ``{ blocks.skip() }``
       ``await layout('switch header color')``

3. Reload the application (⌘R or Ctrl+R for Win) to register shortcut command
4. Got to Settings → Keymap (g s)
5. Bind any shortcut you want for command «Insert 🏛️template: "color header (red)"»
6. Reload the application again (⌘R or Ctrl+R for Win) to register just chosen shortcut
7. Now, you can use two different shortcuts to set the exact header color

Additional info

• Logseq v0.10.9
• ☕️ BuJo Theme
• → discuss.logseq.com