Theme CSS variables

tenman

emulsion theme theme.jsonで定義されているデフォルト値 一覧
emulsion 2.7.6 +

color

--wp--custom--color--banner-bgrgba(0,0,0,.1)
--wp--custom--color--banner-text#000000

Comments

--wp--custom--color--comments-bgrgba(0,0,0,.1)

relate post

--wp--custom--color--relate-posts-bgrgba(0,0,0,.15)

Unknown Background Color

--wp--custom--color--unknown-bg#f8f8ff
別のテーマなどで設定した色をテーマ内で適用できない場合に代替として使用される色

Dark Mode background color

--wp--custom--color--dark-mode-bg#1b262c
ダークモードが有効な場合の背景色　dark mode – Emulsion Theme

Width

emulsion 2.7.6 Units have been unified to rem except for some properties such as borders

--wp--custom--width--aligncenter32.5rem (520px)
--wp--custom--width--floatcalc(50% – 1.5rem)
--wp--custom--width--thumbnail-floatcalc(50% – 1.5rem – 182px)
--wp--custom--width--content45rem (720px)
--wp--custom--width--wide57.5rem (920px)
--wp--custom--width--full100%
--wp--custom--width--sidebar25rem (400px)
--wp--custom--width--limit100rem (1600px)

fonts

Font size

You can make simple adjustments by changing the root font size without having to fine-tune each one individually.

Example

:root{
	font-size:20px;
}

--wp--preset--font-size--small0.8125rem (13px)
--wp--preset--font-size--normal1rem (16px)
--wp--preset--font-size--medium1.25rem (20px)
--wp--preset--font-size--large1.5rem (24px)
--wp--preset--font-size--extra-large2rem (32px)
--wp--preset--font-size--x-large2.625rem(42px)
--wp--preset--font-size--huge3rem (48px)

Font family

--wp--preset--font-family--system-font-apple-system,BlinkMacSystemFont,”Segoe
 UI”,Roboto,Oxygen-Sans,Ubuntu,Cantarell,”Helvetica Neue”,sans-serif;
--wp--preset--font-family--heading“Hoefler Text”,”Baskerville Old Face”,Garamond,”Times New Roman”,serif;
--wp--preset--font-family--serif“Hoefler Text”,”Baskerville Old Face”,Garamond,”Times New Roman”,serif
--wp--preset--font-family--monospaceMenlo, Consolas, “DejaVu Sans Mono”, monospace
--wp--preset--font-family--dancing-script“Dancing Script”,”Comic Sans MS”, cursive
--wp--preset--font-family--yu-gothic“Segoe UI”,”Yu Gothic Medium”,”YuGothic”,”Hiragino Kaku Gothic Pro”,”San Francisco”,Roboto, sans-serif
--wp--preset--font-family--ryeRye,sans-serif
--wp--preset--font-family--yomogiyomogi,”Comic Sans MS”, cursive

Line height

--wp--custom--line-height--common1.5
--wp--custom--line-height--meta1.5
--wp--custom--line-height--heading1.15

Font weight

--wp--custom--font-weight--common400
--wp--custom--font-weight--meta400
--wp--custom--font-weight--heading700

Text transform

--wp--custom--text-transform--commonnone
--wp--custom--text-transform--metanone
--wp--custom--text-transform--headinguppercase

spacing

Margin

--wp--custom--margin--top1.5rem
--wp--custom--margin--rightauto
--wp--custom--margin--bottom1.5rem
--wp--custom--margin--leftauto
--wp--custom--margin--block1.5rem auto
--wp--custom--margin--container0 auto
--wp--custom--margin--alignleft.75rem .75rem .75rem .75rem
--wp--custom--margin--alignright.75rem .75rem .75rem .75rem
--wp--custom--margin--start-contentmax(1px, var(–wp–custom–margin–start-content));
--wp--custom--margin--start-widemax(1px, var(–wp–custom–margin–start-wide));
--wp--custom--margin--gap.75rem

Padding

--wp--custom--padding--top0
--wp--custom--padding--right0.75rem
--wp--custom--padding--bottom0
--wp--custom--padding--left0.75rem
--wp--custom--padding--content0.75rem
--wp--custom--padding--block0 1.5rem
--wp--custom--padding--container0
--wp--preset--spacing--400.75rem
--wp--preset--spacing--501.5rem
--wp--preset--spacing--602.25rem
--wp--preset--spacing--703rem

Border

--wp--custom--border--common-stylesolid
--wp--custom--border--common-color#ccc
--wp--custom--border--common-width1px
--wp--custom--border--radius5px
--wp--custom--border--commonvar(–wp–custom–border–common-width) var(–wp–custom–border–common-style) var(–wp–custom–border–common-color)

blocks

excerpt

--wp--custom--max-height--excerpt-lines4
概要文の表示行数
--wp--custom--color--featured-image-bgrgba(0,0,0,.05)

Button

--wp--custom--color--button-bg#32373c
--wp--custom--color--button-text#ffffff

Block code

--wp--custom--color--code-tag-bg#f8f8ff
--wp--custom--color--code-tag-text#000000
--wp--custom--tab-size--default2rem

Table

Mixed colors when stripes are specified in block style variations

--wp--custom--color--stripergba(0,0,0,.1)

pallets

Color pallets

Style variations rewrite this palette.

--wp--preset--color--base#ffffffbackground color
--wp--preset--color--contrast#000000text color
--wp--preset--color--primary#333333link color
--wp--preset--color--secondary#a22041
--wp--preset--color--tertiary#8ea729
--wp--preset--color--complementary#160385

Heading color pallete, Paragraph color pallet

Block palette colors added by the theme will not change color

--wp--preset--color--emulsion-black#000000
--wp--preset--color--emulsion-white#ffffff
--wp--preset--color--emulsion-muted#ecf0f1
--wp--preset--color--emulsion-alert#ED4F32
--wp--preset--color--emulsion-warning#EDE04D
--wp--preset--color--emulsion-notice#4bb1cf

height

Min height

--wp--custom--min-height--default0
--wp--custom--min-height--eighth12.5vh
--wp--custom--min-height--quarter25vh
--wp--custom--min-height--harf50vh
--wp--custom--min-height--3-quarters75vh
--wp--custom--min-height--full100vh

Max height

--wp--custom--max-height--default0
--wp--custom--max-height--eighth12.5vh
--wp--custom--max-height--quarter25vh
--wp--custom--max-height--harf50vh
--wp--custom--max-height--3-quarters75vh
--wp--custom--max-height--full100vh
--wp--custom--max-height--post-featured-image75vh
--wp--custom--max-height--excerpt-lines4

marker

Unordered list marker

--wp--custom--marker--ul-list-styledisc
--wp--custom--marker--ul-contentunset
--wp--custom--marker--colorvar(–wp–preset–color–contrast)
emulsion 2.8.8~

Additional CSS

body{
--wp--custom--marker--ul-content:"\2713";
}