Material Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.

Renk ve Tema

mdui, Material Design'ın 19 ana renk grubunu ve 16 vurgu rengi grubunu içerir. Tüm renkler (arka plan rengindeki metin rengi ve metin opaklığı dahil), resmi Material Design dokümantasyonuyla tutarlıdır.

İlgili Okumalar

Material Design yönergeleri: Stiller - Renk

Ana ve Vurgu renkleri

Material Design'daki renkler Ana (Primary) ve Vurgu (Accent) renkleri olarak ikiye ayrılır, her birinin çeşitli doygunluk seviyeleri vardır.

Dokümantasyonun geri kalanındaki CSS sınıf adlarında, renk adını belirtmek için [color], doygunluğu belirtmek için [degree] kullanılır.

Ana renk

Aşağıdakiler dahil 19 ana renk vardır:

Her ana rengin 10 doygunluk seviyesi vardır:

100

200

300

400

500

600

700

800

900

Vurgu rengi

Aşağıdakiler dahil 16 vurgu rengi vardır:

Her vurgu renginin 4 doygunluk seviyesi vardır:

a100

a200

a400

a700

Arka plan rengi

Arka plan rengi sınıf adı .mdui-color-[color]-[degree] şeklindedir. Arka plan rengini ayarlarken aynı zamanda metin rengini ve metin opaklığını da ayarlar.

Ayrıca ana ve vurgu renklerinin varsayılan arka plan rengi sınıfları vardır:

.mdui-color-[color], .mdui-color-[color]-500 ile eşdeğerdir.
.mdui-color-[color]-accent, .mdui-color-[color]-a200 ile eşdeğerdir.

Örnek

<div class="mdui-color-blue-200">mdui-color-blue-200</div>
<div class="mdui-color-blue">mdui-color-blue</div>
<div class="mdui-color-pink-accent">mdui-color-pink-accent</div>
<div class="mdui-color-pink-a200">mdui-color-pink-a200</div>

Kullanılabilir tüm arka plan rengi sınıfları aşağıdaki renk referans tablosunda listelenmiştir.

Metin rengi

Metin rengi sınıf adı .mdui-text-color-[color]-[degree] şeklindedir.

Ayrıca ana ve vurgu renklerinin varsayılan metin rengi sınıfları vardır:

.mdui-text-color-[color], .mdui-text-color-[color]-500 ile eşdeğerdir.
.mdui-text-color-[color]-accent, .mdui-text-color-[color]-a200 ile eşdeğerdir.

Örnek

<div class="mdui-text-color-blue-900">mdui-text-color-blue-900</div>
<div class="mdui-text-color-blue">mdui-text-color-blue</div>
<div class="mdui-text-color-blue-a200">mdui-text-color-blue-a200</div>
<div class="mdui-text-color-blue-accent">mdui-text-color-blue-accent</div>

Ayrıca mdui, opaklığa sahip siyah ve beyaz metin renkleri ile simge renkleri sunar.

.mdui-text-color-black-* açık renkli arka planlar içindir.
.mdui-text-color-white-* koyu renkli arka planlar içindir.

Örnek

Tema rengi

mdui bir tema özelliği sunar; body etiketine birkaç sınıf ekleyerek ana renk, vurgu rengi ve arka plan rengi dahil olmak üzere tema değiştirme işlevini gerçekleştirebilirsiniz.

mdui bileşenlerinin çoğunun varsayılan renkleri vardır. Tema renkleri ayarlandığında, bu bileşenler varsayılan renklerini tema renkleriyle değiştirecektir.

Ana renk

Ana rengi ayarlamak için body elemanına .mdui-theme-primary-[color] sınıfını ekleyin.

Sayfada aşağıdaki sınıfları kullanın; bu sınıfların renkleri body içindeki tema rengi değiştikçe değişecektir:

.mdui-color-theme
.mdui-color-theme-[degree]
.mdui-text-color-theme
.mdui-text-color-theme-[degree]

Vurgu rengi

Vurgu rengini ayarlamak için body elemanına .mdui-theme-accent-[color] sınıfını ekleyin.

Sayfada aşağıdaki sınıfları kullanın; bu sınıfların renkleri body içindeki tema rengi değiştikçe değişecektir:

.mdui-color-theme-accent
.mdui-color-theme-[degree]
.mdui-text-color-theme-accent
.mdui-text-color-theme-[degree]

Koyu arka plan teması

Bütün sayfayı (bileşenler dahil) koyu arka plana ayarlamak için body elemanına .mdui-theme-layout-dark sınıfını ekleyin.

Bütün sayfanın (bileşenler dahil) arka plan renginin işletim sistemi temasına göre otomatik olarak ayarlanması için body elemanına .mdui-theme-layout-auto sınıfını ekleyin.

Ayrıca sayfada aşağıdaki sınıfları kullanın; bu sınıfların renkleri tema rengine göre değişecektir (açık temada koyu, koyu temada açık görünür).

.mdui-text-color-theme-text
.mdui-text-color-theme-secondary
.mdui-text-color-theme-disabled
.mdui-text-color-theme-divider
.mdui-text-color-theme-icon
.mdui-text-color-theme-icon-disabled

Tema renklerini ayarlamak için sayfanın sağ üst köşesindeki simgesine tıklayabilirsiniz; aşağıdaki renk tablosundaki ana renk, vurgu rengi ve tema rengi buna göre değişecektir.

Primary (Ana renk)mdui-color-theme
mdui-color-theme-50
mdui-color-theme-100
mdui-color-theme-200
mdui-color-theme-300
mdui-color-theme-400
mdui-color-theme-500
mdui-color-theme-600
mdui-color-theme-700
mdui-color-theme-800
mdui-color-theme-900

Accent (Vurgu rengi)mdui-color-theme-accent
mdui-color-theme-a100
mdui-color-theme-a200
mdui-color-theme-a400
mdui-color-theme-a700
mdui-text-color-theme-text87%100%
mdui-text-color-theme-secondary54%70%
mdui-text-color-theme-disabled38%50%
mdui-text-color-theme-divider12%12%
mdui-text-color-theme-icon54%100%
mdui-text-color-theme-icon-disabled26%30%

Renk referans tablosu

red (Ana renk)mdui-color-red#F44336
mdui-color-red-50#FFEBEE
mdui-color-red-100#FFCDD2
mdui-color-red-200#EF9A9A
mdui-color-red-300#E57373
mdui-color-red-400#EF5350
mdui-color-red-500#F44336
mdui-color-red-600#E53935
mdui-color-red-700#D32F2F
mdui-color-red-800#C62828
mdui-color-red-900#B71C1C

red (Vurgu rengi)mdui-color-red-accent#FF5252
mdui-color-red-a100#FF8A80
mdui-color-red-a200#FF5252
mdui-color-red-a400#FF1744
mdui-color-red-a700#D50000

pink (Ana renk)mdui-color-pink#E91E63
mdui-color-pink-50#FCE4EC
mdui-color-pink-100#F8BBD0
mdui-color-pink-200#F48FB1
mdui-color-pink-300#F06292
mdui-color-pink-400#EC407A
mdui-color-pink-500#E91E63
mdui-color-pink-600#D81B60
mdui-color-pink-700#C2185B
mdui-color-pink-800#AD1457
mdui-color-pink-900#880E4F

pink (Vurgu rengi)mdui-color-pink-accent#FF4081
mdui-color-pink-a100#FF80AB
mdui-color-pink-a200#FF4081
mdui-color-pink-a400#F50057
mdui-color-pink-a700#C51162

purple (Ana renk)mdui-color-purple#9C27B0
mdui-color-purple-50#F3E5F5
mdui-color-purple-100#E1BEE7
mdui-color-purple-200#CE93D8
mdui-color-purple-300#BA68C8
mdui-color-purple-400#AB47BC
mdui-color-purple-500#9C27B0
mdui-color-purple-600#8E24AA
mdui-color-purple-700#7B1FA2
mdui-color-purple-800#6A1B9A
mdui-color-purple-900#4A148C

purple (Vurgu rengi)mdui-color-purple-accent#E040FB
mdui-color-purple-a100#EA80FC
mdui-color-purple-a200#E040FB
mdui-color-purple-a400#D500F9
mdui-color-purple-a700#AA00FF

deep-purple (Ana renk)mdui-color-deep-purple#673AB7
mdui-color-deep-purple-50#EDE7F6
mdui-color-deep-purple-100#D1C4E9
mdui-color-deep-purple-200#B39DDB
mdui-color-deep-purple-300#9575CD
mdui-color-deep-purple-400#7E57C2
mdui-color-deep-purple-500#673AB7
mdui-color-deep-purple-600#5E35B1
mdui-color-deep-purple-700#512DA8
mdui-color-deep-purple-800#4527A0
mdui-color-deep-purple-900#311B92

deep-purple (Vurgu rengi)mdui-color-deep-purple-accent#7C4DFF
mdui-color-deep-purple-a100#B388FF
mdui-color-deep-purple-a200#7C4DFF
mdui-color-deep-purple-a400#651FFF
mdui-color-deep-purple-a700#6200EA

indigo (Ana renk)mdui-color-indigo#3F51B5
mdui-color-indigo-50#E8EAF6
mdui-color-indigo-100#C5CAE9
mdui-color-indigo-200#9FA8DA
mdui-color-indigo-300#7986CB
mdui-color-indigo-400#5C6BC0
mdui-color-indigo-500#3F51B5
mdui-color-indigo-600#3949AB
mdui-color-indigo-700#303F9F
mdui-color-indigo-800#283593
mdui-color-indigo-900#1A237E

indigo (Vurgu rengi)mdui-color-indigo-accent#536DFE
mdui-color-indigo-a100#8C9EFF
mdui-color-indigo-a200#536DFE
mdui-color-indigo-a400#3D5AFE
mdui-color-indigo-a700#304FFE

blue (Ana renk)mdui-color-blue#2196F3
mdui-color-blue-50#E3F2FD
mdui-color-blue-100#BBDEFB
mdui-color-blue-200#90CAF9
mdui-color-blue-300#64B5F6
mdui-color-blue-400#42A5F5
mdui-color-blue-500#2196F3
mdui-color-blue-600#1E88E5
mdui-color-blue-700#1976D2
mdui-color-blue-800#1565C0
mdui-color-blue-900#0D47A1

blue (Vurgu rengi)mdui-color-blue-accent#448AFF
mdui-color-blue-a100#82B1FF
mdui-color-blue-a200#448AFF
mdui-color-blue-a400#2979FF
mdui-color-blue-a700#2962FF

light-blue (Ana renk)mdui-color-light-blue#03A9F4
mdui-color-light-blue-50#E1F5FE
mdui-color-light-blue-100#B3E5FC
mdui-color-light-blue-200#81D4FA
mdui-color-light-blue-300#4FC3F7
mdui-color-light-blue-400#29B6F6
mdui-color-light-blue-500#03A9F4
mdui-color-light-blue-600#039BE5
mdui-color-light-blue-700#0288D1
mdui-color-light-blue-800#0277BD
mdui-color-light-blue-900#01579B

light-blue (Vurgu rengi)mdui-color-light-blue-accent#40C4FF
mdui-color-light-blue-a100#80D8FF
mdui-color-light-blue-a200#40C4FF
mdui-color-light-blue-a400#00B0FF
mdui-color-light-blue-a700#0091EA

cyan (Ana renk)mdui-color-cyan#00BCD4
mdui-color-cyan-50#E0F7FA
mdui-color-cyan-100#B2EBF2
mdui-color-cyan-200#80DEEA
mdui-color-cyan-300#4DD0E1
mdui-color-cyan-400#26C6DA
mdui-color-cyan-500#00BCD4
mdui-color-cyan-600#00ACC1
mdui-color-cyan-700#0097A7
mdui-color-cyan-800#00838F
mdui-color-cyan-900#006064

cyan (Vurgu rengi)mdui-color-cyan-accent#18FFFF
mdui-color-cyan-a100#84FFFF
mdui-color-cyan-a200#18FFFF
mdui-color-cyan-a400#00E5FF
mdui-color-cyan-a700#00B8D4

teal (Ana renk)mdui-color-teal#009688
mdui-color-teal-50#E0F2F1
mdui-color-teal-100#B2DFDB
mdui-color-teal-200#80CBC4
mdui-color-teal-300#4DB6AC
mdui-color-teal-400#26A69A
mdui-color-teal-500#009688
mdui-color-teal-600#00897B
mdui-color-teal-700#00796B
mdui-color-teal-800#00695C
mdui-color-teal-900#004D40

teal (Vurgu rengi)mdui-color-teal-accent#64FFDA
mdui-color-teal-a100#A7FFEB
mdui-color-teal-a200#64FFDA
mdui-color-teal-a400#1DE9B6
mdui-color-teal-a700#00BFA5

green (Ana renk)mdui-color-green#4CAF50
mdui-color-green-50#E8F5E9
mdui-color-green-100#C8E6C9
mdui-color-green-200#A5D6A7
mdui-color-green-300#81C784
mdui-color-green-400#66BB6A
mdui-color-green-500#4CAF50
mdui-color-green-600#43A047
mdui-color-green-700#388E3C
mdui-color-green-800#2E7D32
mdui-color-green-900#1B5E20

green (Vurgu rengi)mdui-color-green-accent#69F0AE
mdui-color-green-a100#B9F6CA
mdui-color-green-a200#69F0AE
mdui-color-green-a400#00E676
mdui-color-green-a700#00C853

light-green (Ana renk)mdui-color-light-green#8BC34A
mdui-color-light-green-50#F1F8E9
mdui-color-light-green-100#DCEDC8
mdui-color-light-green-200#C5E1A5
mdui-color-light-green-300#AED581
mdui-color-light-green-400#9CCC65
mdui-color-light-green-500#8BC34A
mdui-color-light-green-600#7CB342
mdui-color-light-green-700#689F38
mdui-color-light-green-800#558B2F
mdui-color-light-green-900#33691E

light-green (Vurgu rengi)mdui-color-light-green-accent#B2FF59
mdui-color-light-green-a100#CCFF90
mdui-color-light-green-a200#B2FF59
mdui-color-light-green-a400#76FF03
mdui-color-light-green-a700#64DD17

lime (Ana renk)mdui-color-lime#CDDC39
mdui-color-lime-50#F9FBE7
mdui-color-lime-100#F0F4C3
mdui-color-lime-200#E6EE9C
mdui-color-lime-300#DCE775
mdui-color-lime-400#D4E157
mdui-color-lime-500#CDDC39
mdui-color-lime-600#C0CA33
mdui-color-lime-700#AFB42B
mdui-color-lime-800#9E9D24
mdui-color-lime-900#827717

lime (Vurgu rengi)mdui-color-lime-accent#EEFF41
mdui-color-lime-a100#F4FF81
mdui-color-lime-a200#EEFF41
mdui-color-lime-a400#C6FF00
mdui-color-lime-a700#AEEA00

yellow (Ana renk)mdui-color-yellow#FFEB3B
mdui-color-yellow-50#FFFDE7
mdui-color-yellow-100#FFF9C4
mdui-color-yellow-200#FFF59D
mdui-color-yellow-300#FFF176
mdui-color-yellow-400#FFEE58
mdui-color-yellow-500#FFEB3B
mdui-color-yellow-600#FDD835
mdui-color-yellow-700#FBC02D
mdui-color-yellow-800#F9A825
mdui-color-yellow-900#F57F17

yellow (Vurgu rengi)mdui-color-yellow-accent#FFFF00
mdui-color-yellow-a100#FFFF8D
mdui-color-yellow-a200#FFFF00
mdui-color-yellow-a400#FFEA00
mdui-color-yellow-a700#FFD600

amber (Ana renk)mdui-color-amber#FFC107
mdui-color-amber-50#FFF8E1
mdui-color-amber-100#FFECB3
mdui-color-amber-200#FFE082
mdui-color-amber-300#FFD54F
mdui-color-amber-400#FFCA28
mdui-color-amber-500#FFC107
mdui-color-amber-600#FFB300
mdui-color-amber-700#FFA000
mdui-color-amber-800#FF8F00
mdui-color-amber-900#FF6F00

amber (Vurgu rengi)mdui-color-amber-accent#FFD740
mdui-color-amber-a100#FFE57F
mdui-color-amber-a200#FFD740
mdui-color-amber-a400#FFC400
mdui-color-amber-a700#FFAB00

orange (Ana renk)mdui-color-orange#FF9800
mdui-color-orange-50#FFF3E0
mdui-color-orange-100#FFE0B2
mdui-color-orange-200#FFCC80
mdui-color-orange-300#FFB74D
mdui-color-orange-400#FFA726
mdui-color-orange-500#FF9800
mdui-color-orange-600#FB8C00
mdui-color-orange-700#F57C00
mdui-color-orange-800#EF6C00
mdui-color-orange-900#E65100

orange (Vurgu rengi)mdui-color-orange-accent#FFAB40
mdui-color-orange-a100#FFD180
mdui-color-orange-a200#FFAB40
mdui-color-orange-a400#FF9100
mdui-color-orange-a700#FF6D00

deep-orange (Ana renk)mdui-color-deep-orange#FF5722
mdui-color-deep-orange-50#FBE9E7
mdui-color-deep-orange-100#FFCCBC
mdui-color-deep-orange-200#FFAB91
mdui-color-deep-orange-300#FF8A65
mdui-color-deep-orange-400#FF7043
mdui-color-deep-orange-500#FF5722
mdui-color-deep-orange-600#F4511E
mdui-color-deep-orange-700#E64A19
mdui-color-deep-orange-800#D84315
mdui-color-deep-orange-900#BF360C

deep-orange (Vurgu rengi)mdui-color-deep-orange-accent#FF6E40
mdui-color-deep-orange-a100#FF9E80
mdui-color-deep-orange-a200#FF6E40
mdui-color-deep-orange-a400#FF3D00
mdui-color-deep-orange-a700#DD2C00

brown (Ana renk)mdui-color-brown#795548
mdui-color-brown-50#EFEBE9
mdui-color-brown-100#D7CCC8
mdui-color-brown-200#BCAAA4
mdui-color-brown-300#A1887F
mdui-color-brown-400#8D6E63
mdui-color-brown-500#795548
mdui-color-brown-600#6D4C41
mdui-color-brown-700#5D4037
mdui-color-brown-800#4E342E
mdui-color-brown-900#3E2723

grey (Ana renk)mdui-color-grey#9E9E9E
mdui-color-grey-50#FAFAFA
mdui-color-grey-100#F5F5F5
mdui-color-grey-200#EEEEEE
mdui-color-grey-300#E0E0E0
mdui-color-grey-400#BDBDBD
mdui-color-grey-500#9E9E9E
mdui-color-grey-600#757575
mdui-color-grey-700#616161
mdui-color-grey-800#424242
mdui-color-grey-900#212121

blue-grey (Ana renk)mdui-color-blue-grey#607D8B
mdui-color-blue-grey-50#ECEFF1
mdui-color-blue-grey-100#CFD8DC
mdui-color-blue-grey-200#B0BEC5
mdui-color-blue-grey-300#90A4AE
mdui-color-blue-grey-400#78909C
mdui-color-blue-grey-500#607D8B
mdui-color-blue-grey-600#546E7A
mdui-color-blue-grey-700#455A64
mdui-color-blue-grey-800#37474F
mdui-color-blue-grey-900#263238

mdui-color-black#000000
mdui-color-white#FFFFFF
mdui-color-transparenttransparent

CSS Sınıf Listesi

Temayı ayarla

Sınıf Adı	Açıklama
`.mdui-theme-primary-[color]`	Temadaki ana rengi ayarlar (`<body>` elemanına eklenir).
`.mdui-theme-accent-[color]`	Temadaki vurgu rengini ayarlar (`<body>` elemanına eklenir).
`.mdui-theme-layout-dark`	Koyu temayı ayarlar (`<body>` elemanına eklenir).

Arka plan rengi

Sınıf Adı	Açıklama
`.mdui-color-[color]`	Belirtilen ana rengin arka plan rengini ayarlar.
`.mdui-color-[color]-accent`	Belirtilen vurgu renginin arka plan rengini ayarlar.
`.mdui-color-[color]-[degree]`	Belirtilen renk ve doygunlukta arka plan rengini ayarlar.
`.mdui-color-theme`	body içinde tanımlanan ana renk temasına göre arka plan rengini ayarlar.
`.mdui-color-theme-accent`	body içinde tanımlanan vurgu rengi temasına göre arka plan rengini ayarlar.
`.mdui-color-theme-[degree]`	body içinde tanımlanan ana veya vurgu rengi temasına göre belirtilen doygunlukta arka plan rengini ayarlar.
`.mdui-color-black`	Saf siyah arka plan rengini ayarlar.
`.mdui-color-white`	Saf beyaz arka plan rengini ayarlar.
`.mdui-color-transparent`	Şeffaf arka plan rengini ayarlar.

Metin rengi

Sınıf Adı	Açıklama
`.mdui-text-color-[color]`	Belirtilen ana rengin metin rengini ayarlar.
`.mdui-text-color-[color]-accent`	Belirtilen vurgu renginin metin rengini ayarlar.
`.mdui-text-color-[color]-[degree]`	Belirtilen renk ve doygunlukta metin rengini ayarlar.
`.mdui-text-color-theme`	body içindeki ana renk temasına göre metin rengini ayarlar.
`.mdui-text-color-theme-accent`	body içindeki vurgu rengi temasına göre metin rengini ayarlar.
`.mdui-text-color-theme-[degree]`	body içindeki ana veya vurgu rengine göre belirtilen doygunlukta metin rengini ayarlar.

Açık renkli arka planlarda kullanılan koyu metin rengi:

Sınıf Adı	Açıklama
`.mdui-text-color-black`	Saf siyah metin rengini ayarlar.
`.mdui-text-color-black-text`	Ana metnin rengini ayarlar.
`.mdui-text-color-black-secondary`	İkincil metnin rengini ayarlar.
`.mdui-text-color-black-disabled`	Devre dışı durumdaki metin rengini ayarlar.
`.mdui-text-color-black-divider`	Ayırıcı çizgi rengini ayarlar.
`.mdui-text-color-black-icon`	Simge rengini ayarlar.
`.mdui-text-color-black-icon-disabled`	Devre dışı durumdaki simge rengini ayarlar.

Koyu renkli arka planlarda kullanılan açık metin rengi:

Sınıf Adı	Açıklama
`.mdui-text-color-white`	Saf beyaz metin rengini ayarlar.
`.mdui-text-color-white-text`	Ana metnin rengini ayarlar.
`.mdui-text-color-white-secondary`	İkincil metnin rengini ayarlar.
`.mdui-text-color-white-disabled`	Devre dışı durumdaki metin rengini ayarlar.
`.mdui-text-color-white-divider`	Ayırıcı çizgi rengini ayarlar.
`.mdui-text-color-white-icon`	Simge rengini ayarlar.
`.mdui-text-color-white-icon-disabled`	Devre dışı durumdaki simge rengini ayarlar.

Tema rengine göre değişen koyu veya açık metin rengi:

Sınıf Adı	Açıklama
`.mdui-text-color-theme-text`	Ana metnin rengini ayarlar. Varsayılan olarak koyu, koyu temada açıktır.
`.mdui-text-color-theme-secondary`	İkincil metnin rengini ayarlar. Varsayılan olarak koyu, koyu temada açıktır.
`.mdui-text-color-theme-disabled`	Devre dışı durumdaki metin rengini ayarlar. Varsayılan olarak koyu, koyu temada açıktır.
`.mdui-text-color-theme-divider`	Ayırıcı çizgi rengini ayarlar. Varsayılan olarak koyu, koyu temada açıktır.
`.mdui-text-color-theme-icon`	Simge rengini ayarlar. Varsayılan olarak koyu, koyu temada açıktır.
`.mdui-text-color-theme-icon-disabled`	Devre dışı durumdaki simge rengini ayarlar. Varsayılan olarak koyu, koyu temada açıktır.

0.4.3'ten 1.0.0'a Yükseltme

Roboto Yazı Tipi