/* assets/css/theme.css */ /* 1) تعريف المتغيرات الافتراضية */ :root { --bg-page: #ffffff; --bg-panel: #fff; --text-color: #000000; --link-color: #4a90e2; --secondary-text: #5cbbdc; } /* 2) الوضع الليلي (عند إضافة الصنف dark-mode على ) */ body.dark-mode { --bg-page: #373737; --bg-panel: #2e2e2e; --text-color: #ffffff; --link-color: #ffa500; --secondary-text: #fff; } /* 3) تطبيق المتغيرات على العناصر */ body { background: var(--bg-page); color: var(--text-color); transition: background 0.3s, color 0.3s; } a, h1 a, h2 a, h3 a { color: var(--link-color); } header, .forum-sections, .sidebar-box, .admin-container, .thread-wrapper { background: var(--bg-panel); } .post-date, .stats-text, .secondary-text { color: var(--secondary-text); } /* 4) زرّ التبديل */ .theme-toggle { position: fixed; bottom: 20px; right: 20px; width: 48px; height: 48px; background: #f1c40f; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.3); z-index: 1000; } .theme-toggle i { font-size: 24px; color: #373737; transition: transform 0.3s; } /* 5) تعديل الأيقونة في الوضع الليلي */ body.dark-mode .theme-toggle { background: #27ae60; } body.dark-mode .theme-toggle i { color: #ffffff; transform: rotate(180deg); }