لقد أضفنا مؤخرًا العديد من متغيرات CSS إلى Discourse. هذه المتغيرات تجعل تخصيص وتعديل جوانب واجهة المستخدم أسهل بكثير. للعديد من التغييرات، لن تحتاج بعد الآن إلى استهداف عناصر محددة جدًا في HTML، وبدلاً من ذلك يمكنك تغيير متغير فقط.
إذا كنت فضوليًا بشأن المتغيرات التي يمكن تغييرها، أقترح عليك استكشاف التطبيق باستخدام هذا التعبير العادي → --([a-zA-Z0-9\\-_]+):
إذا كنت تستخدم محرر أكواد وتبحث عن جميع حالات التعبير العادي أعلاه، يجب أن ترى شيئًا كهذا:
لقد استلهمت شخصيًا من shadcn/ui مؤخرًا وخاصة محرر السمات الذي أنشأوه → https://tweakcn.com/
باستخدام أنماطهم كمصدر إلهام، شرعت في رؤية مقدار ما يمكنني تغييره في واجهة المستخدم باستخدام المتغيرات فقط. إليك مثال على ما فعلته:
هذا قيد العمل وبعض المناطق ستحتاج إلى استهداف CSS أكثر تحديدًا لكي تعمل، ولكن الفكرة الأساسية هي أنه أصبح الآن أسهل بكثير إجراء تغييرات كهذه باستخدام متغيرات CSS الجديدة لدينا.
كان هذا التصميم ممكنًا باستخدام المتغيرات فقط. قمت بفصله إلى ملفين.
لوحة ألوان مبسطة
أردت أن أرى ما إذا كان بإمكاني التخلص من بعض الخطوات بين الألوان الأساسية والثانوية. أردت أيضًا الحد من كميات الألوان الثلاثية المتاحة لتبسيط لوحة الألوان الإجمالية.
:root {
--color-1: #e2ece6;
--base: oklch(from var(--color-1) l c h);
--step: 0.15;
/* Derived darker colors */
--color-2: oklch(from var(--base) calc(l - var(--step) * 0.25) c h);
--color-3: oklch(from var(--color-2) calc(l - var(--step) * 0.55) c h);
--color-4: oklch(from var(--color-3) calc(l - var(--step)) c h);
--color-5: oklch(from var(--color-4) calc(l - var(--step)) c h);
/* stylelint-disable-next-line hue-degree-notation */
--color-6: oklch(from var(--color-5) 0.35 c h);
/* accent colors */
// --accent-color-1: #0867f6;
--accent-color-1: oklch(from var(--color-1));
--accent-color-light: oklch(from var(--accent-color-1) calc(l * 1.25) c h);
--accent-color-lighter: oklch(from var(--accent-color-1) calc(l * 1.5) c h);
--accent-color-lightest: oklch(from var(--accent-color-1) calc(l * 1.75) c h);
--accent-color-darker: oklch(from var(--accent-color-1) calc(l * 0.5) c h);
/* Overwrite color mapping */
--header_primary: var(--color-6);
--header_background: var(--color-1);
--primary-very-low: var(--color-6);
--primary-low: var(--color-6);
--header_primary-low: var(--color-6);
--primary-low-mid: var(--color-6);
--header_primary-low-mid: var(--color-4);
--primary-medium: var(--color-6);
--primary-med-or-secondary-high: var(--color-6);
--primary-med-or-secondary-med: var(--color-6);
--header_primary-medium: var(--color-6);
--hljs-bg: var(--color-2);
--primary-high-or-secondary-low: var(--color-6);
--primary-high: var(--color-6);
--header_primary-high: var(--color-6);
--primary-very-high: var(--color-6);
--header_primary-very-high: var(--color-6);
--blend-primary-secondary-5: var(--color-2);
--d-hover: var(--color-3);
--mention-background-color: var(--color-4);
--link-color: rgb(196, 101, 0);
--primary-50: var(--color-6);
--primary-100: var(--color-6);
--primary-200: var(--color-6);
--primary-300: var(--color-6);
--primary-400: var(--color-6);
--primary-500: var(--color-6);
--primary-600: var(--color-6);
--primary-700: var(--color-6);
--primary-800: var(--color-6);
--primary-900: var(--color-6);
--primary: var(--color-6); /* Black */
--secondary: var(--color-1); /* White */
--secondary-rgb: var(--color-1);
--tertiary: var(--accent-color-1); /* Blue */
--tertiary-hover: var(--accent-color-darker);
--tertiary-medium: var(--accent-color-light);
--tertiary-med-or-tertiary: var(--accent-color-light);
--tertiary-med-or-tertiary-low: var(--accent-color-lighter);
--tertiary-very-low: var(--accent-color-lighter);
--tertiary-low: var(--accent-color-lighter);
--tertiary-25: var(--accent-color-lightest);
}
تصميم تجربة المستخدم
باستخدام هذه الأنماط، استخدمت العديد من المتغيرات المتاحة في النواة للحصول على السمة التي تراها أعلاه.
:root {
--d-max-width: unset;
--d-main-content-gap: 0;
/* sidebar edits */
--d-sidebar-background: var(--color-1);
--d-sidebar-admin-background: var(--color-1);
--d-sidebar-link-color: var(--color-6);
--d-sidebar-link-icon-color: var(--color-6);
--d-sidebar-header-color: var(--color-6);
--d-sidebar-header-icon-color: var(--color-6);
--d-sidebar-footer-fade: transparent;
--d-sidebar-active-background: rgb(0, 0, 0, 0.06125);
--d-sidebar-highlight-background: rgb(0, 0, 0, 0.06125);
--d-sidebar-highlight-color: var(--color-6);
--d-sidebar-width: 14rem;
--d-sidebar-row-height: 1.85rem;
--d-sidebar-row-horizontal-padding: 0.5rem;
--sidebar-section-wrapper-padding: 1rem 0.75rem 0.75rem;
--d-sidebar-border-color: var(--content-border-color);
--d-sidebar-section-border-color: transparent;
--d-sidebar-header-font-weight: 400;
--d-sidebar-active-font-weight: 600;
/* topic list */
--d-topic-list-header-font-size: var(--font-down-1);
--d-topic-list-header-text-color: var(--color-6);
--d-topic-list-header-data-padding-x: var(--space-2);
--d-topic-list-header-data-padding-y: var(--space-2);
--d-topic-list-margin-y: var(--space-4);
--title-color: var(--color-6);
--title-color--read: var(--color-6);
--d-table-border-top-height: 1px;
--topic-list-item-background-color--visited: var(--color-2);
--d-topic-list-avatar-size: 20px;
--topic-title-font-weight: 700;
--topic-title-font-weight--visited: 400;
--d-topic-list-data-padding-x: var(--space-4);
--d-topic-list-data-padding-y: var(--space-2);
--d-topic-list-metadata-top-space: var(--space-1);
--d-topic-list-data-padding-inline-start: var(--space-4);
--d-topic-list-data-padding-inline-end: var(--space-4);
--d-topic-list-likes-views-posts-width: 12%;
--d-topic-list-data-font-size: var(--font-down-1-rem);
/* nav */
--d-nav-font-size: var(--font-down-1);
--d-nav-bg-color--active: var(--color-6);
--d-nav-bg-color--hover: var(--d-hover);
--d-nav-color--active: var(--color-1);
--d-nav-color--hover: var(--color-6);
--d-nav-underline-height: 0;
--nav-horizontal-padding: var(--space-4);
--nav-space: 0;
/* categories */
--category-boxes-title-font-size: var(--font-up-3-rem);
--category-boxes-text-alignment: left;
--d-category-border-accent-width: 0px;
--d-category-border-box-width: 0px;
--d-category-box-background-color: var(--color-2);
--category-badge-title-color: var(--color-6);
--d-category-boxes-margin-top: var(--space-4);
--d-category-boxes-gap: var(--space-4);
--category-badge-size: var(--space-2);
--category-badge-border-radius: 50%;
--category-boxes-description-text-color: var(--color-6);
--d-categories-list-title-margin-bottom: var(--space-2);
/* tags */
--d-tag-horizontal-padding: var(--space-2);
--d-tag-border-radius: 4px;
--d-tag-font-weight: 500;
--d-tag-background-color: rgb(0, 0, 0, 0.1);
--tag-text-color: var(--color-6);
/* misc */
--onebox-shadow-color: var(--color-2);
--onebox-border-color: var(--content-border-color);
--d-border-radius: 8px;
--content-border-color: var(--color-3);
--main-outlet-padding-top: var(--space-4);
--base-font-size: 15px;
--topic-timeline-border-color: var(--color-6);
--d-header-padding-x: var(--space-4);
--d-input-focused-color: var(--color-6);
--d-button-default-text-color: var(--color-6);
--d-button-default-icon-color: var(--color-6);
--d-button-default-bg-color: transparent;
--d-button-default-bg-color--hover: var(--d-hover);
--d-button-default-text-color--hover: var(--color-6);
--d-button-default-icon-color--hover: var(---color-6);
--d-post-control-background--hover: var(--d-hover);
--d-post-control-create-icon-color: var(--color-6);
--d-button-primary-bg-color: var(--color-6);
--font-family: "Inter";
--list-container-padding-x: var(--space-4);
--list-container-topiclist-padding-x: 0em;
--badge-card-background-color: var(--color-2);
/* chat */
--d-chat-input-border-color: var(--content-border-color);
--d-chat-input-focused-shadow: 0 0 1px 0 var(--tertiary);
}
.wrap {
--d-wrap-padding-x: 0;
}
.navigation-container {
#create-topic {
--d-button-default-text-color: var(--color-1);
--d-button-default-icon-color: var(--color-1);
--d-button-default-bg-color: var(--color-6);
--d-button-default-bg-color--hover: black;
}
}
.new-main-title-data .topic-list-data:first-of-type,
.new-main-title-data .topic-list-data:last-of-type {
--d-topic-list-data-padding-y: 0;
--d-topic-list-data-padding-x: 0;
--d-topic-list-data-padding-inline-start: 0;
}
دعنا نستخدم هذا الموضوع لمشاركة الأمثلة ورموز متغيرات CSS لإظهار ما هو ممكن 