Skip to content
Lauren J Weber edited this page Nov 5, 2022 · 7 revisions

Xenon.CommonColored

Provides the base/standard layout's for 'side-bar' type layouts

  • Titles
  • Creeds
  • Hymns
  • Hymn Number Cues

The layout uses macros to easily allow coloring to match with the appropriate season of the Church year The following outlines the colors used for each season:

For reference: LCMS Church Year Colors Meaning

Macros

  • color-main (main color- i.e. sidebar etc.)
  • color-alt (alternate color- currently unused, indented as complementary to main)
  • color-sub (subdued accent color- typically a light grey)
  • text-main (main text color- typically white)
  • text-alt (colored text- typically should match or pair with theme color-main)
  • text-sub (text color where text-main won't provide contrast, typically dark gray)

Purple

Theme:

452351 #ff452351

Use:

#var("Xenon.CommonColored@color-main", ```"#ff452351"```)
#var("Xenon.CommonColored@text-alt", ```"#ff452351"```)

Green

Theme:

#298f45 #ff298f45

Use:

#var("Xenon.CommonColored@color-main", ```"#ff298f45"```)
#var("Xenon.CommonColored@text-alt", ```"#ff298f45"```)

Dark Gray (Replaces Black)

Theme:

#141417 #ff141417

#373737 #ff373737

Use:

#var("Xenon.CommonColored@color-main", ```"#ff141417"```)
#var("Xenon.CommonColored@text-alt", ```"#ff373737"```)

Yellow (Replaces White/Gold)

Is the Easter variation, recommended to change the pale-pink to a pale-blue if used in winter/Christmas

Theme:

#ffebaf #ffffebaf

#474747 #ff474747

#f9ceee #fff9ceee

Use:

#var("Xenon.CommonColored@color-main", ```"#ffffebaf"```)
#var("Xenon.CommonColored@color-sub", ```"#fff9ceee"```)
#var("Xenon.CommonColored@text-main", ```"#ff474747"```)
#var("Xenon.CommonColored@text-alt", ```"#fff9ceee"```)
#var("Xenon.CommonColored@text-sub", ```"#ff474747"```)

Red

Theme:

#ff92162b

Use:

#var("Xenon.CommonColored@color-main", ```"#ff92162b"```)
#var("Xenon.CommonColored@text-alt", ```"#ff92162b"```)

All Saints' Day

Gold / light blue

Use:

#var("Xenon.CommonColored@color-main", ```"#ffffebaf"```)
#var("Xenon.CommonColored@color-alt", ```"#FFCC00FF"```)
#var("Xenon.CommonColored@color-sub", ```"#ff88eeff"```)
#var("Xenon.CommonColored@text-main", ```"#ff474747"```)
#var("Xenon.CommonColored@text-alt", ```"#ff88eeff"```)
#var("Xenon.CommonColored@text-sub", ```"#ff474747"```)