استخراج مظهر من أي موقع

أعجبك موقع؟ اسحب مظهره إلى تطبيقك

هذا التطبيق التجريبي مبني بالكامل على متغيّرات Theme Kit — لا لون واحد مكتوب بشكل صلب. اضغط أحد المظاهر أدناه، أو استخرج مظهرًا من أي موقع بأداة الاستخراج، وشاهد كل شيء يتغيّر فورًا.

بدون إعادة بناء · بدون مكتبات

ثلاث خطوات للتركيب

الشرط الوحيد: أن يقرأ تطبيقك ألوانه من متغيّرات CSS.

1 · ضع الملفين

انسخ theme-engine.css وtheme-engine.js إلى مشروعك (واللوحة اختيارية).

<link rel="stylesheet" href="theme-kit/theme-engine.css">
<script src="theme-kit/theme-engine.js"></script>

2 · اربط أسماءك

إن كان تطبيقك يستعمل --card أو --ink، مرّرها في aliases بدل إعادة كتابة الأنماط.

ThemeKit.config({
  aliases: {
    '--tk-surface': '--card',
    '--tk-ink': '--ink',
    '--tk-accent': '--brand'
  }
})

3 · شغّل

boot() يطبّق المظهر المحفوظ عند الإقلاع، وmount() يضيف اللوحة العائمة.

ThemeKit.boot()
ThemeWidget.mount()

مظاهر مستوردة من مواقع حقيقية

قيمٌ استخرجتها أداة الاستخراج من صفحات حقيقية — اضغط وجرّب.

لاستخراج مظهر موقع آخر: افتحه ← الكونسول ← ألصق theme-extract.js ← انسخ JSON ← استورده من اللوحة.

الرموز التي يكتبها المحرّك

كل ما تحته سطر يتغيّر لحظيًا — لا شيء مكتوب بشكل صلب.

خلفية الصفحة

--tk-bg · --tk-bg-image

سطح البطاقات

--tk-surface · --tk-glass

الألوان الأساسية

--tk-accent · -2 · -soft

النصّ والحدود

نص على سطح
--tk-ink · --tk-muted · --tk-line

جرّب الاستخراج على هذه الصفحة

نفس الملف الذي ستشغّله على أي موقع — هنا يقرأ هذه الصفحة ويعطيك JSON.

// اضغط «استخرج الآن» ليظهر المظهر المستخرج من هذه الصفحة