/** * ArkaService WordPress Theme - Dark Mode Styles * * This file contains dark mode specific styles and overrides. * Dark mode is activated by adding data-theme="dark" to the element. * * Usage: * - Toggle dark mode via JavaScript: document.documentElement.setAttribute('data-theme', 'dark') * - Toggle light mode via JavaScript: document.documentElement.setAttribute('data-theme', 'light') * - Or remove attribute: document.documentElement.removeAttribute('data-theme') */ [data-theme="dark"] { color-scheme: dark; } [data-theme="dark"] body { background-color: var(--color-bg); color: var(--color-text); } [data-theme="dark"] .card { background-color: var(--color-bg-secondary); border-color: var(--color-border); } [data-theme="dark"] .card__header { border-bottom-color: var(--color-border); } [data-theme="dark"] .card__footer { border-top-color: var(--color-border); } [data-theme="dark"] .form__input, [data-theme="dark"] .form__textarea, [data-theme="dark"] .form__select { background-color: var(--color-bg-tertiary); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .form__input:focus, [data-theme="dark"] .form__textarea:focus, [data-theme="dark"] .form__select:focus { border-color: var(--color-primary); background-color: var(--color-bg-secondary); } [data-theme="dark"] .form__input::placeholder, [data-theme="dark"] .form__textarea::placeholder { color: var(--color-text-tertiary); } [data-theme="dark"] .form__label { color: var(--color-text); } [data-theme="dark"] .button--outline { border-color: var(--color-border-dark); color: var(--color-text); } [data-theme="dark"] .button--outline:hover:not(:disabled) { background-color: var(--color-bg-tertiary); border-color: var(--color-primary); color: var(--color-primary); } [data-theme="dark"] .table { border-color: var(--color-border); } [data-theme="dark"] .table th { background-color: var(--color-bg-tertiary); color: var(--color-text); } [data-theme="dark"] .table td { border-bottom-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .table tr:hover { background-color: var(--color-bg-tertiary); } [data-theme="dark"] .alert--info { background-color: rgba(59, 130, 246, 0.15); border-color: var(--color-info); color: var(--color-info-light); } [data-theme="dark"] .alert--success { background-color: rgba(16, 185, 129, 0.15); border-color: var(--color-success); color: var(--color-success-light); } [data-theme="dark"] .alert--warning { background-color: rgba(245, 158, 11, 0.15); border-color: var(--color-warning); color: var(--color-warning-light); } [data-theme="dark"] .alert--danger { background-color: rgba(239, 68, 68, 0.15); border-color: var(--color-danger); color: var(--color-danger-light); } [data-theme="dark"] .badge--primary { background-color: rgba(59, 130, 246, 0.2); color: var(--color-primary-light); } [data-theme="dark"] .badge--success { background-color: rgba(16, 185, 129, 0.2); color: var(--color-success-light); } [data-theme="dark"] .badge--warning { background-color: rgba(245, 158, 11, 0.2); color: var(--color-warning-light); } [data-theme="dark"] .badge--danger { background-color: rgba(239, 68, 68, 0.2); color: var(--color-danger-light); } [data-theme="dark"] .badge--info { background-color: rgba(6, 182, 212, 0.2); color: var(--color-info-light); } [data-theme="dark"] .dropdown__menu { background-color: var(--color-bg-secondary); border-color: var(--color-border); } [data-theme="dark"] .dropdown__item:hover { background-color: var(--color-bg-tertiary); } [data-theme="dark"] .dropdown__divider { background-color: var(--color-border); } [data-theme="dark"] .breadcrumb__item { color: var(--color-text-secondary); } [data-theme="dark"] .breadcrumb__item--active { color: var(--color-text); } [data-theme="dark"] .breadcrumb__separator { color: var(--color-text-tertiary); } [data-theme="dark"] .tabs { border-bottom-color: var(--color-border); } [data-theme="dark"] .tabs__item { color: var(--color-text-secondary); } [data-theme="dark"] .tabs__item:hover { color: var(--color-primary-light); } [data-theme="dark"] .tabs__item--active { color: var(--color-primary-light); border-bottom-color: var(--color-primary-light); } [data-theme="dark"] .pagination__item { background-color: var(--color-bg-secondary); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .pagination__item:hover { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } [data-theme="dark"] .pagination__item--active { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } [data-theme="dark"] .modal__content { background-color: var(--color-bg-secondary); border-color: var(--color-border); } [data-theme="dark"] .modal__header { border-bottom-color: var(--color-border); } [data-theme="dark"] .modal__footer { border-top-color: var(--color-border); } [data-theme="dark"] .modal__backdrop { background-color: rgba(0, 0, 0, 0.75); } [data-theme="dark"] .tooltip__content { background-color: var(--color-gray-700); color: var(--color-gray-900); } [data-theme="dark"] .divider { background-color: var(--color-border); } [data-theme="dark"] .divider-vertical { background-color: var(--color-border); } [data-theme="dark"] .empty-state__icon { color: var(--color-text-tertiary); } [data-theme="dark"] .empty-state__description { color: var(--color-text-secondary); } [data-theme="dark"] .avatar { background-color: var(--color-bg-tertiary); } [data-theme="dark"] .progress { background-color: var(--color-bg-tertiary); } [data-theme="dark"] .spinner { border-color: var(--color-border); border-top-color: var(--color-primary); } [data-theme="dark"] .loading-overlay { background-color: rgba(0, 0, 0, 0.85); } [data-theme="dark"] .border { border-color: var(--color-border); } [data-theme="dark"] .border-2 { border-color: var(--color-border); } [data-theme="dark"] .border-t { border-top-color: var(--color-border); } [data-theme="dark"] .border-b { border-bottom-color: var(--color-border); } [data-theme="dark"] .bg-white { background-color: var(--color-bg); } [data-theme="dark"] .bg-gray-50 { background-color: var(--color-gray-50); } [data-theme="dark"] .bg-gray-100 { background-color: var(--color-gray-100); } [data-theme="dark"] a { color: var(--color-primary-light); } [data-theme="dark"] a:hover { color: var(--color-primary); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--color-text); } [data-theme="dark"] code { background-color: var(--color-bg-tertiary); color: var(--color-primary-light); padding: 0.125rem 0.25rem; border-radius: var(--radius-sm); } [data-theme="dark"] pre { background-color: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-md); overflow-x: auto; } [data-theme="dark"] pre code { background-color: transparent; padding: 0; } [data-theme="dark"] blockquote { border-right: 4px solid var(--color-border-dark); padding-right: var(--spacing-md); color: var(--color-text-secondary); font-style: italic; } [data-theme="dark"] hr { border-color: var(--color-border); } [data-theme="dark"] input[type="checkbox"], [data-theme="dark"] input[type="radio"] { border-color: var(--color-border); background-color: var(--color-bg-tertiary); } [data-theme="dark"] input[type="checkbox"]:checked, [data-theme="dark"] input[type="radio"]:checked { background-color: var(--color-primary); border-color: var(--color-primary); } [data-theme="dark"] select { background-color: var(--color-bg-tertiary); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] select option { background-color: var(--color-bg-secondary); color: var(--color-text); } [data-theme="dark"] input[type="file"]::file-selector-button { background-color: var(--color-bg-tertiary); border: 1px solid var(--color-border); color: var(--color-text); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); cursor: pointer; } [data-theme="dark"] input[type="file"]::file-selector-button:hover { background-color: var(--color-bg-secondary); } [data-theme="dark"] input[type="range"] { background-color: var(--color-bg-tertiary); } [data-theme="dark"] input[type="range"]::-webkit-slider-thumb { background-color: var(--color-primary); } [data-theme="dark"] input[type="range"]::-moz-range-thumb { background-color: var(--color-primary); } [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="time"], [data-theme="dark"] input[type="datetime-local"] { background-color: var(--color-bg-tertiary); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); } [data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } [data-theme="dark"] ::-webkit-scrollbar-track { background-color: var(--color-bg-secondary); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: var(--color-bg-tertiary); border-radius: var(--radius-md); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: var(--color-border-dark); } [data-theme="dark"] ::selection { background-color: var(--color-primary); color: var(--color-white); } [data-theme="dark"] ::-moz-selection { background-color: var(--color-primary); color: var(--color-white); } [data-theme="dark"] img { opacity: 0.9; } [data-theme="dark"] img:hover { opacity: 1; } [data-theme="dark"] .skeleton { background: linear-gradient(90deg, var(--color-gray-200) 25%, var(--color-gray-100) 50%, var(--color-gray-200) 75%); background-size: 200% 100%; } [data-theme="dark"] .skeleton-project-card, [data-theme="dark"] .skeleton-bid-card, [data-theme="dark"] .skeleton-user-card, [data-theme="dark"] .skeleton-stat-card, [data-theme="dark"] .skeleton-list-item, [data-theme="dark"] .skeleton-notification, [data-theme="dark"] .skeleton-transaction, [data-theme="dark"] .skeleton-rating, [data-theme="dark"] .skeleton-category-card, [data-theme="dark"] .skeleton-profile-header, [data-theme="dark"] .skeleton-search-result { background-color: var(--color-bg-secondary); border-color: var(--color-border); } [data-theme="dark"] .skeleton-project-card__footer, [data-theme="dark"] .skeleton-profile-header__stats { border-top-color: var(--color-border); } [data-theme="dark"] .skeleton-wallet-card { background: linear-gradient(135deg, var(--color-gray-200) 0%, var(--color-gray-300) 100%); } [data-theme="dark"] .skeleton-wallet-card__label, [data-theme="dark"] .skeleton-wallet-card__amount, [data-theme="dark"] .skeleton-wallet-card__button { background: rgba(255, 255, 255, 0.05); } .dark-mode-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; user-select: none; } .dark-mode-toggle__switch { position: relative; width: 48px; height: 24px; background-color: var(--color-gray-300); border-radius: var(--radius-full); transition: background-color var(--transition-base); } [data-theme="dark"] .dark-mode-toggle__switch { background-color: var(--color-primary); } .dark-mode-toggle__slider { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; background-color: var(--color-white); border-radius: var(--radius-full); transition: transform var(--transition-base); } [data-theme="dark"] .dark-mode-toggle__slider { transform: translateX(-24px); } .dark-mode-toggle__icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; } .dark-mode-toggle__icon--sun { color: var(--color-warning); } .dark-mode-toggle__icon--moon { color: var(--color-info); } [data-theme="dark"] .dark-mode-toggle__icon--sun { opacity: 0.5; } [data-theme="dark"] .dark-mode-toggle__icon--moon { opacity: 1; } .dark-mode-toggle__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: #111827; --color-bg-secondary: #1f2937; --color-bg-tertiary: #374151; --color-text: #f9fafb; --color-text-secondary: #d1d5db; --color-text-tertiary: #9ca3af; --color-border: #374151; --color-border-dark: #4b5563; } } @media (max-width: 768px) { .dark-mode-toggle { gap: var(--spacing-xs); } .dark-mode-toggle__label { display: none; } } @media print { [data-theme="dark"] { --color-bg: #ffffff; --color-bg-secondary: #f9fafb; --color-bg-tertiary: #f3f4f6; --color-text: #111827; --color-text-secondary: #6b7280; --color-text-tertiary: #9ca3af; --color-border: #e5e7eb; --color-border-dark: #d1d5db; } [data-theme="dark"] body { background-color: white; color: black; } [data-theme="dark"] .card { background-color: white; border-color: #e5e7eb; } }