Menentukan dan Menerapkan Tema UI Menggunakan Perpustakaan CSS-In-JS MIMCSS

UI Theming secara dinamik mengubah gaya visual laman web, dicontohkan oleh ciri -ciri seperti Mode Dark. Pengguna menukar tema melalui kawalan UI atau memanfaatkan pilihan warna peringkat OS. Bagi pemaju, alat peringatan yang cekap harus memudahkan definisi tema dan aplikasi runtime. Artikel ini meneroka MIMCSS, perpustakaan CSS-in-JS, dan pendekatan yang unik untuk bertemakan menggunakan warisan kelas.

Pendedahan penuh: Saya pengarang MIMCSS. Walaupun ini mungkin kelihatan promosi diri, saya percaya kaedah peringatan MIMCSS adalah inovatif dan memberi perhatian.

Strategi mereka

Web UI Styling menghubungkan elemen HTML ke entiti CSS (kelas, ID). Mengubahsuai perwakilan visual melibatkan:

1. Mengubah Elemen HTML Element CSS Selectors (Nama Kelas, IDS).
2. Mengubah gaya CSS untuk elemen sambil mengekalkan pemilih.

Definisi tema biasanya melibatkan entiti gaya yang lebih sedikit daripada elemen HTML yang merujuknya, terutamanya dengan widget kompleks. Oleh itu, perubahan gaya tema umumnya lebih cekap daripada mengubahsuai banyak atribut kelas elemen HTML.

CSS Theming

CSS tradisional menggunakan gaya gaya alternatif:

<link href="default.css" rel="stylesheet" title="Gaya lalai" type="text/css">
<link href="fancy.css" rel="alternate stylesheet" title="Mewah" type="text/css">
<link href="basic.css" rel="alternate stylesheet" title="Asas" type="text/css">

Hanya satu stylesheet yang aktif; Pelayar menawarkan UI untuk pemilihan tema. Nama peraturan yang sama (nama kelas) merentasi stylesheets adalah penting:

 / * default.css */
.element {color: #fff; }

/ * asas.css */
.element {color: #333; }

Switching Stylesheets tidak memerlukan perubahan HTML; Pelayar mengira semula gaya berdasarkan perintah cascading. Walau bagaimanapun, sokongan penyemak imbas untuk gaya alternatif adalah terhad.

CSS-in-JS Theming

Banyak perpustakaan CSS-in-JS mengendalikan mereka secara berbeza. Perpustakaan berintegrasi reaksi (contohnya, komponen gaya) sering menggunakan API ThemeProvider dan konteks API atau komponen withTheme yang lebih tinggi, mencetuskan semula perubahan semula pada perubahan tema. Perpustakaan rangka kerja-agnostik menggunakan kaedah proprietari, jika penangkapan juga disokong. Ramai yang mengutamakan scoping CSS, mencipta nama kelas yang unik; Perubahan tema memerlukan pengubahsuaian HTML.

MIMCSS: Pendekatan yang berbeza

MIMCSS menggabungkan kekuatan gaya alternatif dan CSS-in-JS. Ia mencerminkan pendekatan stylesheet alternatif dengan pelbagai variasi gaya dan identik entiti CSS yang dinamakan. Ia juga menawarkan pengaturcaraan berorientasikan objek dan keselamatan jenis jenis, bersama-sama dengan keupayaan dinamik CSS-in-JS.

Asas MIMCSS

MIMCSS menggunakan kelas TypeScript untuk mewakili stylesheets. Peraturan ditakrifkan sebagai sifat kelas:

 import * sebagai CSS dari "MIMCSS";

Mystyles kelas memanjangkan css.styledefinition {
  signifikan = ini $ kelas ({color: "oren", fontstyle: "italic"});
  kritikal = ini. $ id ({color: "merah", fontweight: 700});
}

Sintaks MIMCSS menyerupai CSS, walaupun lebih banyak verbose. Ia menyokong pelbagai peraturan CSS (kelas, ID, tag, kerangka utama, dll.). Selepas menentukan kelas definisi gaya, aktifkannya:

 biarkan gaya = css.activate (mistik);

Ini menghasilkan peraturan CSS di DOM. Gaya Rujukan dalam HTML:

 render () {
  kembali (
    <div>
      <p classname="{styles.significant.name}">Penting</p>
      <p id="{styles.critical.name}">Kritikal</p>
    </div>
  );
}

Nyahaktif Gaya apabila tidak lagi diperlukan:

 css.deactivate (gaya);

MIMCSS menghasilkan nama kelas dan ID yang unik (misalnya, MyStyles_significant dalam pembangunan, n2 dalam pengeluaran).

Warisan Definisi Gaya

Warisan memudahkan mereka:

 asas kelas memanjangkan css.styledefinition {pad = this. $ class ({padding: 4}); }
kelas yang diperolehi memanjangkan asas {pad = this. $ class ({padding: 8}); }
biarkan derived = css.activate (diperoleh);

derived.pad.name menghasilkan Base_pad , tetapi gaya adalah { padding: 8px } . Nama itu diwarisi, tetapi gaya ditindih. Kelas yang diperolehi semula menggunakan semula nama yang sama tetapi gunakan gaya yang berbeza.

Mimcss Theming

MIMCSS Theming menggunakan kelas pengisytiharan tema yang menentukan peraturan CSS, dan pelbagai kelas pelaksanaan yang mewarisi dan mengatasi peraturan ini. Ini mencerminkan pendekatan stylesheet alternatif.

Contoh: Tema mentakrifkan bentuk sempadan:

 Kelas BordertHeme memanjangkan Css.TheMedefinition {Bordershape = this. $ class (); }

Kelas SquareDebertheme memanjangkan Bordertheme {
  Bordershape = ini. $ kelas ({Border: ["nipis", "pepejal", "hijau"], borderinlinestartwidth: "tebal"});
}

Kelas Roundbordertheme memanjangkan Bordertheme {
  Bordershape = ini $ kelas ({sempadan: ["medium", "pepejal", "biru"], BorderRadius: 8});
}

Aktifkan tema:

 Let Tema: BordertHeme = CSS.Activate (SquareDebertheme);

Hanya satu tema dari kelas pengisytiharan tertentu yang boleh aktif pada satu masa.

Merujuk tema MIMCSS

Tema sering menentukan unsur -unsur yang boleh diguna semula (warna, saiz, fon). Sifat tersuai CSS sangat sesuai:

 Kelas ColorTheme memanjangkan CSS.TheMedefinition {
  bgColor = this. $ var ("warna");
  frcolor = ini $ var ("warna");
}

CLASS LightTheme memanjangkan ColorTheme {
  bgColor = this. $ var ("warna", "putih");
  frcolor = ini $ var ("warna", "hitam");
}

Kelas Darktheme memanjangkan ColorTheme {
  bgColor = this. $ var ("warna", "hitam");
  frcolor = ini $ var ("warna", "putih");
}

Ciri -ciri tema rujukan dalam Definisi Gaya:

 Mystyles kelas memanjangkan css.styledefinition {
  tema = ini $ penggunaan (colorTheme);
  container = this. $ class ({color: this.theme.frcolor, deartlyColor: this.theme.bgcolor});
}

Ini menjana CSS menggunakan sifat tersuai ( var(--bgColor) ). Komponen dihancurkan dari pelaksanaan tema tertentu, yang membolehkan peruntukan tema luaran. MIMCSS juga membolehkan mengatasi penjanaan nama dalaman untuk sifat tersuai untuk memadankan sistem sedia ada seperti reka bentuk bahan.

Pelbagai tema di satu halaman

Hanya satu pelaksanaan tema setiap kelas pengisytiharan boleh aktif serentak. Walau bagaimanapun, untuk memaparkan pelbagai tema bersebelahan, menggunakan refinisi harta tanah berasaskan CSS yang berasaskan peraturan:

 Mystyles kelas memanjangkan css.styledefinition {
  tema = ini $ penggunaan (colorTheme);
  blok = ini $ kelas ({latar belakangColor: this.theme.bgcolor, color: this.theme.frcolor});
  top = this. $ class ({"": this.block, "-": [lightTheme]});
  bawah = ini $ kelas ({"": this.block, "-": [Darktheme]});
}

The Operator menggabungkan nama kelas, dan -- mentakrifkan semula sifat tersuai berdasarkan tema yang ditentukan.

Kesimpulan

Teming berasaskan warisan MIMCSS menawarkan pendekatan yang unik, menggabungkan fungsi stylesheet alternatif dengan fleksibiliti CSS-in-JS dan keselamatan jenis TypeScript. Ia memudahkan pengurusan tema dan membolehkan aplikasi runtime yang cekap tanpa mengubah HTML. Terokai dokumentasi dan taman permainan MIMCSS untuk maklumat lanjut. Maklum balas adalah dialu -alukan!

Atas ialah kandungan terperinci Menentukan dan Menerapkan Tema UI Menggunakan Perpustakaan CSS-In-JS MIMCSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!