Fandom Developers Wiki
Advertisement

Colors, Fandom ortamında renkleri işlemek için bir kitaplıktır. Bu kütüphane iki amaca hizmet eder:

  1. geçerli sayfadaki en önemli renklerin bir listesini sağlar, böylece eklentinizin görünümünü ana bilgisayar vikinin renk şemasına kolayca uyarlayabilirsiniz ve
  2. renkleri işlemek için bir dizi işlev sağlar, böylece ana bilgisayar vikinin renk şemasının üzerine kendi renk şemanızı oluşturabilirsiniz.

Not: Bu kitaplık, JavaScript geliştiricileri tarafından kullanılmak içindir. Bir betik yazmıyorsanız, bu kitaplık sizin için hiçbir işe yaramaz. Renkler hakkında daha fazla bilgi edinmek için renklerle ilgili yardım sayfasına göz atmak isteyebilirsiniz.

Renkler[]

  • dev.colors.fandom.body#f6f6f6içerik arka planı için$body
  • dev.colors.fandom.page#ffffffmadde arka planı için$page
  • dev.colors.fandom.menu#404a57menü/düğme ögeleri için$menu
  • dev.colors.fandom.header#404a57başlık için$header
  • dev.colors.fandom.link#009bbebağlantılar için$content link
  • dev.colors.fandom.split#bacdd8bölünmüş arka planlar için$split
  • dev.colors.fandom.contrast#ffffffmenü/düğme metni için$contrast
  • dev.colors.fandom.text#3a3a3amadde metin için$text
  • dev.colors.fandom.border#cccccckenarlık/ayırıcı rengi için$border
  • dev.colors.fandom.gradient#6b7b91menü/element etkileşimi için$gradient


Renkleri uygulama[]

Yukarıdaki renkleri kullanmanın en kolay yolu, normal CSS yazmak, ancak normal olanlar yerine sözde renkleri kullanmaktır:

a { color: $link; }

Tüm bu kuralları bir dizeye ekleyin ve ardından onu dev.colors.css() ögesine iletin. dev.colors.css() tüm sözde değerleri değiştirir ve stil sayfasını belge başlığına ekler:

Örnek 1:

dev.colors.css('a { color: $link; }');

Kendi sözde değerlerini eklemek için isteğe bağlı ikinci bir parametre kullanabilirsiniz. Kendi değerlerinizin adının önüne $ işareti koymanız gerektiğini unutmayın:

Örnek 2:

dev.colors.css('a { color: $link; background: $myBackGround; }', {
    myBackGround: 'black'
});

Parlaklık ve Karanlık[]

Fandom'daki çeşitli renk şemaları için tasarlamanın önemli bir parçası, şemanın parlak mı yoksa karanlık mı olduğunu belirlemektir. dev.colors bunun için bir yöntem sunar, ancak daha da önemlisi: Gövde etiketine iki sınıf ekler:

  1. .menu-dark veya .menu-bright – menü ve düğmelerin arka planının koyu veya parlak olmasına bağlı olarak
  2. .page-dark veya .page-bright – madde alanının arka planının koyu veya parlak olmasına bağlı olarak

Renkleri Manipüle Etme[]

Rengi işlemek için önce bir renk nesnesi oluşturmanız gerekir. dev.colors üç Fabrika sağlar:

// ayrıştırma, bir dizeden renkli bir nesne oluşturmanıza olanak tanır:
var red = dev.colors.parse('#FF0000');
var red = dev.colors.parse('#F00');
var red = dev.colors.parse('rgb(255, 0, 0)');
var red = dev.colors.parse('red');

// dev.colors.fandom değerleri de dizelerdir:
var body = dev.colors.parse(dev.colors.fandom.body);

// fromRgb, RGB değerlerini sayısal olarak ayarlamanıza olanak tanır (değerler 0 ile 255 arasında olmalıdır):
var red = dev.colors.fromRgb(255, 0, 0);

// fromHsl, HSL renk modelini kullanmanızı sağlar (değerler 0 ile 1 arasında olmalıdır):
var red = dev.colors.fromHsl(0, 1, 1);

Bir renkli nesneye sahip olduğunuzda onu değiştirebilirsiniz:

// yüzde 20 kırmızı açık:
var lightRed = red.lighten(20);

// kırmızıyı yüzde 20 oranında desatürasyon:
var paleRed = red.saturate(-20);

// tamamlayıcı rengi elde etmek için tonu 180 derece döndürün:
var cyan = red.rotate(180);

// iki rengi karıştırın:
var orange = red.mix('yellow');

Renkleri olumsuzlaştırma[]

dev.colors, renkleri olumsuzlamak için iki işleve sahiptir: complement() ve invert(). Her ikisi de matematiksel olarak basit olsa da renkler üzerindeki etkilerini görselleştirmek biraz zor:

  • invert(), RGB renk uzayına etki ettiği için bir rengin tonunu, doygunluğunu ve açıklığını olumsuzlar:
  • complement() yalnızca tonu olumsuzlar. Doygunluk ve hafiflik değişmeden kalır: . En belirgin sonuç, complement() ögesi yalnızca renkleri etkilemesidir. Beyaz, siyah ve aradaki herhangi bir gri ton (görünüşte) değişmeden kalır.

Birkaç örnekler:

ters tamamlayıcı ters tamamlayıcı ters tamamlayıcı
red
white
orchid
lime
black
pink
blue
gray
indigo
cyan
lightgray
khaki
yellow
darkgray
brown
magenta
beige
peru
springgr.

Renkli Nesneleri Dizelere Dönüştürme[]

Beğendiğiniz renkleri karıştırıp eşleştirdiğinizde, bunları CSS'de kullanabilmek için tekrar dizelere dönüştürmek isteyeceksiniz:

console.log("red: " + red.hex()); // "red: #FF000"
console.log("red: " + red.rgb()); // "red: rgb(255, 0, 0)"
console.log("red: " + red.hsl()); // "hsl: hsl(0, 100%, 100%)"

// altıgen biçimi varsayılandır:
console.log("red: " + red); // "red: #FF0000"

Kenar Koşulları[]

HSL renk alanı, görsel etkisi olmayan değişikliklere izin verir:

  • Bir rengin doygunluğu 0 ise, ton değişikliğinin artık görsel bir etkisi olmaz. Renk gri bir ton olarak kalacak
  • Bir rengin açıklığı 0 ise, ne ton değişikliği ne de doygunluk değişikliği görsel bir etki yaratmaz. Renk siyah kalacaktır.

Bu kitaplık, etkisi olmayan değerleri filtrelemez ve atmaz.

Aşağıdaki yöntemler HSL renk uzayını kullanır:

  • Color.rotate
  • Color.hue
  • Color.saturate
  • Color.saturation
  • Color.lighten
  • Color.lightness
  • Color.complement

Kaynak[]

dev.colors yöntemleri[]

dev.colors.parse(color)
Bir renk dizesini bir Color nesnesine ayrıştırır.
Parametreler
  1. color: dize
Döndürür
Yeni Color nesnesi
Atar
Dize ayrıştırılamıyorsa veya değerler sınırların dışındaysa hata
Örnekler
var red   = dev.colors.parse('#FF0000'),
    green = dev.colors.parse('#0F0'),
    blue  = dev.colors.parse('rgb(0, 0, 255)'),
    white = dev.colors.parse('white'),
    page  = dev.colors.parse(dev.colors.fandom.page);
dev.colors.fromRgb(red, green, blue)
Sayısal RGB değerlerinden bir Color nesnesi oluşturur.
Parametreler
  1. red: 0 ile 255 arasındaki sayı
  2. green: 0 ile 255 arasındaki sayı
  3. blue: 0 ile 255 arasındaki sayı
Döndürür
Yeni Color nesnesi
Atar
Parametreler sayı değilse veya sınırların dışındaysa hata
Örnekler
var red = dev.colors.fromRgb(255, 0, 0);
dev.colors.fromHsl(hue, saturation, lightness)
HSL değerlerinden bir Color nesnesi oluşturur.
Parametreler
  1. hue: 0 ile 1 arasındaki sayı
  2. saturation: 0 ile 1 arasındaki sayı
  3. lightness: 0 ile 1 arasındaki sayı
Döndürür
Yeni Color nesnesi
Atar
Parametreler sayı değilse veya sınırların dışındaysa hata
Örnekler
var red = dev.colors.fromHsl(0, 1, 1);
dev.colors.css(styles)
Sözde değerleri değiştirdikten sonra belge başlığına CSS dizesi ekler.
Parametreler
  1. styles: CSS'ye ayrıştırılabilen dize
dev.colors.css(styles, custom)
Sözde değerleri değiştirdikten sonra belge başlığına CSS dizesi ekler.
Parametreler
  1. styles: CSS'ye ayrıştırılabilen dize
  2. custom: anahtar olarak sözde değerlere ve değer olarak gerçek değerlere sahip nesne

Color Nesnelerin Yöntemleri[]

Color.rotate(degree)
Bir rengin tonu döndürür.
Parametreler
  1. degree: -360 ile 360 arasındaki sayı
Döndürür
Yeni Color nesnesi
Atar
Bağımsız değişken sayı değilse veya sınırların dışındaysa hata
Örnekler
var magenta = dev.colors.parse('lime').rotate(180);
var blue = blue.rotate(360).rotate(-360);  // no change!
Color.saturate(percentage)
Bir rengi doyurur (pozitif değerler) veya desatüre eder (negatif değerler).
Parametreler
  1. percentage: -100 ile 100 arasındaki sayı
Döndürür
Yeni Color nesnesi
Atar
Bağımsız değişken sayı değilse veya sınırların dışındaysa hata
Örnekler
var paleBlue = dev.colors.parse('blue').saturate(-10);
Color.lighten(percentage)
Bir rengi açar (pozitif değerler) veya koyulaştırır (negatif değerler).
Parametreler
  1. percentage: -100 ile 100 arasındaki sayı
Döndürür
Yeni Color nesnesi
Atar
Bağımsız değişken sayı değilse veya sınırların dışındaysa hata
Örnekler
var darkBlue = dev.colors.parse('blue').lighten(-10);
Color.mix(otherColor)
İki rengi (eşdeğer SASS işlevi gibi) eşit oranda (50-50) karıştırır.
Parametreler
  1. otherColor: Color nesnesine ayrıştırılabilen renk nesnesi veya dizesi
Döndürür
Yeni Color nesnesi
Atar
İlk bağımsız değişken bir Color nesnesi değilse veya ayrıştırılamıyorsa hata
Örnekler
var orange = yellow.mix('red');
Color.mix(otherColor, percentage)
Nesnenin geçerli rengiyle ikinci bir rengi karıştırır. Verilen ağırlık değeri, mevcut rengin oranını/baskınlığını saptırır. Mevcut renge karşı 50'nin altındaki değerler, 50'nin üzerindeki değerler lehtedir.
Parametreler
  1. otherColor: Color nesnesine ayrıştırılabilen renk nesnesi veya dizesi
  2. percentage: 0 ile 100 arasındaki sayı
Döndürür
Yeni Color nesnesi
Atar
İlk bağımsız değişken bir Color nesnesi değilse veya ayrıştırılamıyorsa hata
Örnekler
var sunYellow = yellow.mix('red', 80);
Color.invert()
Bir rengi tersine çevirir (yukarıdaki renkleri olumsuzlaştırma ile ilgili bölüme bakın).
Döndürür
Yeni Color nesnesi
Color.complement()
Bir rengi tamamlar (yukarıdaki renkleri olumsuzlaştırma ile ilgili bölüme bakın).
Döndürür
Yeni Color nesnesi
Color.isBright()
Bir rengin parlak mı yoksa koyu mu olduğunu kontrol eder (parlaklık).
Döndürür
boole
Örnekler
console.log(dev.colors.parse('lightgray').isBright());  // true
console.log(dev.colors.parse('darkgray').isBright());   // false
Color.isColor()
Bu rengin gri ton olup olmadığını kontrol eder, yani doygunluk ve hafiflik sıfırdan büyüktür.
Döndürür
boole
Örnekler
console.log(dev.colors.parse('white').isColor());  // false
console.log(dev.colors.parse('orange').isColor()); // true
Color.red()
Renge karıştırılan kırmızı spektrum miktarını alır.
Döndürür
0 ile 255 arasındaki sayı
Örnekler
alert(dev.colors.parse('red').red()); // 255
Color.red(value)
Renge karıştırılan kırmızı spektrum miktarını ayarlar.
Parametreler
  1. value: 0 ile 255 arasındaki sayı
Döndürür
Yeni Color nesnesi
Atar
Bağımsız değişken sayı değilse veya sınırların dışındaysa hata
Örnekler
var white = cyan.red(255);
Color.green()
Renge karıştırılan yeşil spektrum miktarını alır.
Döndürür
0 ile 255 arasındaki sayı
Örnekler
alert(dev.colors.parse('red').green()); // 0
Color.green(value)
Renge karıştırılan yeşil spektrum miktarını ayarlar.
Parametreler
  1. value: 0 ile 255 arasındaki sayı
Döndürür
Yeni Color nesnesi
Atar
Bağımsız değişken sayı değilse veya sınırların dışındaysa hata
Örnekler
var white = magenta.green(255);
Color.blue()
Renge karıştırılan mavi spektrum miktarını alır.
Döndürür
0 ile 255 arasındaki sayı
Örnekler
alert(dev.colors.parse('red').blue()); // 0
Color.blue(value)
Renge karıştırılan mavi spektrum miktarını ayarlar.
Parametreler
  1. value: 0 ile 255 arasındaki sayı
Döndürür
Yeni Color nesnesi
Atar
Bağımsız değişken sayı değilse veya sınırların dışındaysa hata
Örnekler
var white = yellow.blue(255);
Color.hue()
Bir rengin tonu değerini alır.
Döndürür
0 ile 1 arasındaki sayı
Örnekler
alert(dev.colors.parse('white').hue()); // 0
Color.hue(value)
Bir rengin tonu değerini ayarlar.
Parametreler
  1. value: 0 ile 1 arasındaki sayı
Döndürür
Yeni Color nesnesi
Atar
Bağımsız değişken sayı değilse veya sınırların dışındaysa hata
Örnekler
var red = cyan.hue(0);
Color.saturation()
Gets the saturation of a color.
Döndürür
0 ile 1 arasındaki sayı
Örnekler
alert(dev.colors.parse('white').saturation()); // 0
Color.saturation(value)
Bir rengin doygunluk değerini ayarlar.
Parametreler
  1. value: 0 ile 1 arasındaki sayı
Döndürür
Yeni Color nesnesi
Atar
Bağımsız değişken sayı değilse veya sınırların dışındaysa hata
Örnekler
var white = red.saturation(0);
Color.lightness()
Bir rengin hafiflik (parlaklık) değerini alır.
Döndürür
0 ile 1 arasındaki sayı
Örnekler
alert(dev.colors.parse('white').lightness()); // 1
Color.lightness(value)
Bir rengin hafiflik (parlaklık) değerini ayarlar.
Parametreler
  1. value: 0 ile 1 arasındaki sayı
Döndürür
Yeni Color nesnesi
Atar
Bağımsız değişken sayı değilse veya sınırların dışındaysa hata
Örnekler
var black = red.lightness(0);
Color.rgb()
Color nesnesini RGB biçiminde bir dizeye dönüştürür.
Döndürür
dize
Örnekler
alert('Blue is: ' + dev.colors.parse('blue').rgb()); // Blue is: rgb(0, 0, 255)
Color.hsl()
Color nesnesini HSL biçiminde bir dizeye dönüştürür.
Döndürür
dize
Örnekler
alert('Blue is: ' + dev.colors.parse('blue').hsl());
// Blue is: hsl(240, 100%, 50%)
Color.hex()
Color nesnesini onaltılı biçimde bir dizeye dönüştürür. Bu yöntem, Color nesnesinin toString() yöntemi olarak iki katına çıktığı için az çok gereksizdir. JavaScript'in dönüştürmeyi yapmasına izin verdiğinizde, dolaylı olarak Color.hex ile çağırırsınız.
Döndürür
dize
Örnekler
alert('Blue is: ' + dev.colors.parse('blue').hex()); // Blue is: #0000FF
Color.toString()
toString() standart bir JavaScript işlevidir. Bu, Color.hex için bir takma addır ve renk nesnesi örneklerinizi birleştirildiğinde otomatik olarak onaltılı forma dönüştürür.
Döndürür
dize
Örnekler
alert('Blue is: ' + dev.colors.parse('blue')); // Blue is: #0000ff
Advertisement