Theme Kit
ملفان بلا أي مكتبة

محرّك واحد يتحكّم في مظهر أي تطبيق

خلفية التطبيق، خلفية كل عنصر على حدة، الخطوط وأحجامها، سماكة الحدود ولونها، الاستدارة، الظلال وسرعة الحركة — كل ذلك من لوحة واحدة، دون تعديل مكوّنات تطبيقك. المحرّك يكتب رموز CSS على جذر الصفحة، ويكتب قاعدة واحدة لكل عنصر تختاره بنفسك.

اعرض طريقة التركيب

يعمل مع React · Vue · Svelte · Angular · HTML عادي · حتى قوالب WordPress

ثلاث خطوات

كيف تطبّقه على أي تطبيق

لا يوجد «كود خاص» لكل تطبيق. الشيء الوحيد المطلوب أن يقرأ تطبيقك ألوانه من متغيّرات CSS — وهو ما تفعله معظم التطبيقات الحديثة أصلًا. وإن لم يكن، فسطران في ملف الأنماط يكفيان.

1

انسخ الملفين

ضع theme-engine.js وtheme-engine.css في مشروعك. الثاني يعرّف القيم الافتراضية ويربط body بالرموز.

2

اربط رموزك

إن كان تطبيقك يستعمل أسماء أخرى مثل --paper أو --forest، مرّرها في aliases فتُكتب القيمة نفسها لها.

3

شغّل اللوحة

سطر واحد: ThemeWidget.mount(). تظهر زر دائري في الزاوية، ومنه يخصّص المستخدم كل شيء، ويُحفظ اختياره تلقائيًا.

الكود كاملًا

هذا كل ما تحتاجه في صفحة HTML عادية:

<!-- 1) في <head> -->
<link rel="stylesheet" href="theme-engine.css">
<link rel="stylesheet" href="theme-widget.css">   <!-- لو أردت اللوحة -->

<!-- 2) قبل </body> -->
<script src="theme-engine.js"></script>
<script src="theme-widget.js"></script>
<script>
  // اربط أسماء متغيّرات تطبيقك الحالية برموز المحرّك (اختياري)
  ThemeKit.config({
    storageKey: 'myapp.theme',
    aliases: { '--tk-bg': '--paper', '--tk-accent': '--forest', '--tk-ink': '--ink' }
  });

  ThemeKit.boot();        // يطبّق المظهر المحفوظ عند الإقلاع
  ThemeWidget.mount();    // الزر واللوحة — احذفه إن أردت واجهتك الخاصة
</script>
لماذا يعمل على أي تطبيق؟ لأن المحرّك لا يعرف مكوّناتك ولا يعدّلها. يكتب قيمًا على <html> فتقرأها أنماطك، ويكتب قواعد عناصر بمحدّدات يبنيها من الصفحة نفسها.
تجربة حيّة

تطبيق صغير لا يعرف شيئًا عن المحرّك

ما تراه أدناه مبنيّ بأنماطه الخاصة فقط. اضغط الزر الدائري في الزاوية، غيّر الخلفية والألوان، ثم استعمل «التقاط عنصر» واضغط على أي بطاقة أو شريط هنا — سيُصبغ وحده.

app.example.com/dashboard
لوحة المشاريع · ١٤ مهمّة اليوم مباشر
مشاريع نشطة
٢٤
+٣ هذا الأسبوع
مكتملة
١١٨
٩٢٪ في الموعد
متأخرة
٣
تحتاج مراجعة
ن مراجعة تصنيف المفردات اليوم
س تحديث شاشة الإعدادات غدًا
م تصدير تقرير الأسبوع مكتمل

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

إن أردت استعمال القيم مباشرة في أنماطك، هذه هي الأسماء. كلها على :root، وتتغيّر فورًا عند أي تعديل.

المتغيّرماذا يمثّليُستعمل في
--tk-bg · --tk-bg-imageخلفية التطبيق (لون + صورة متدرّجة)body
--tk-surface · --tk-surface-2سطح البطاقات واللوحاتالبطاقات، الألواح
--tk-glassتدرّج زجاجي شفّاف للسطحالأشرطة العلوية
--tk-ink · --tk-mutedالنصّ الأساسي والثانويكل النصوص
--tk-accent · --tk-accent-2اللون الرئيسي والثانوي (يُعدّل سطوعه تلقائيًا)الأزرار، الروابط
--tk-line · --tk-bwلون الحدود وسماكتهاالفواصل والإطارات
--tk-radius · --tk-radius-lgالاستدارة (مشتقّة بثلاث درجات)كل العناصر
--tk-shadow-1 · --tk-shadow-2ظلال محسوبة من شدّة الظل المختارةالبطاقات، القوائم
--tk-font-ui · --tk-fsخط الواجهة ومعامل حجم الخطhtml, body
--tk-dur · --tk-easeمدّة الحركة ومنحناهاكل transition

داخل React أو Vue

لا شيء يتغيّر: المحرّك ملف عادي. استدعِه مرة واحدة بعد أول رسم، ثم اقرأ المظهر من الحالة إن احتجت إظهار القيم في واجهتك. لا يوجد سياق (context) ولا مزوّد (provider) ولا إعادة رسم لكل تغيير. 

import { useEffect } from 'react'
import ThemeKit from './theme-kit/theme-engine.js'

export default function App() {
  useEffect(() => {
    ThemeKit.boot({ storageKey: 'myapp.theme' })
  }, [])

  return <Routes />
}

عنصر واحد بمفرده

هذه هي الميزة التي تجعله يعمل على أي واجهة: لا تحتاج إلى إضافة صنف (class) لأي شيء. المحرّك يبني محدّدًا ثابتًا من العنصر نفسه (وسمه + صنفه + موقعه بين إخوته)، ويكتب له قاعدة واحدة. 

// برمجيًا، دون اللوحة
const el = document.querySelector('.hero-card')
ThemeKit.elements.add(ThemeKit.selectorFor(el), {
  bg: '#0e4a38', bgAlpha: 0.9,
  text: '#ffffff', radius: 24,
  shadow: 'strong'
})
يُخزَّن المحدّد لا الموقع، فيبقى التخصيص صالحًا بعد إعادة الرسم والتنقّل. ولو تغيّر صنف العنصر في تحديث لاحق للتطبيق، احذف السطر من اللوحة وأعد التقاطه.