黎明鬼テーマでサイドバーの背景色とリンクの色をカスタマイズできるようにする

Bloggerのテーマをカスタマイズに対応させる(リンク) からの続き

まぁこれまでも拡張しようと思えばできましたが、以前から覚醒版のプランがあったので

Code

   <Group description="Links" selector=".main-outer">
     <Variable name="link.color" description="Link Color" type="color" default="#0000ff" value="#0000ff"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#551a8b" value="#551a8b"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="#0000ff" value="#0000ff"/>
     <Variable name="link.active.color" description="Selected Color" type="color" default="#ff0000" value="#ff0000"/>
     <Variable name="sidebar.link.color" description="Sidebar Link Color" type="color" default="#0000ff" value="#0000ff"/>
   </Group>

   <Group description="Backgrounds" selector=".body-fauxcolumns-outer">
     <Variable name="sidebar.background.color" description="Sidebar Background" type="color" default="#f1f1f1" value="#f1f1f1"/>
   </Group>

赤字が更に変更を加えた部分

日本語のローカライズも問題ない様

追加CSS

#mySidebar {
  background-color: $(sidebar.background.color) !important;
}
#sidebar a {
  color: $(sidebar.link.color);
}
#sidebar a:visited {
  color: $(link.visited.color);
}
#sidebar a:active {
  color: $(link.active.color);
}

訪問済とアクティブは(将来的には)削除していいかもしれないが、「黎明鬼」テーマのコンセプトを反映した部分なので