كيف تعمل الألوان وكيف يمكن تغييرها؟

pHneutre · 20 مارس 2025، 10:12ص

عذرًا على الموضوع العام، لكنني كنت أفكر في هذا الأمر ولا يمكنني العثور على برنامج تعليمي مناسب أو حتى شرح.

كلما احتجت إلى تغيير لون في أي مكان في Discourse، أتبع هذا المسار:

هل يتم إدارة اللون بواسطة مكون سمة؟ إذا لم يكن كذلك،
هل يبدو أنه تتم إدارته بواسطة /admin/customize/colors؟ إذا لم يكن كذلك،
افتح أدوات المطور وحاول العثور على CSS المطابق.

لكن بعد ذلك أضيع لأنني أجد أشياء مثل var(--primary-low) وليس لدي أي فكرة عن مكان تعريف هذه الأشياء، على الرغم من أنها تبدو مرتبطة بفكرة اللون الأساسي في /admin/customize/colors. لذا:

كيف يتم تعريف هذه الأشياء var()؟
ما هي الطريقة الموصى بها لتعديلها باستمرار؟

Canapin · 20 مارس 2025، 11:15ص

الألوان (محسوبة) هنا:

github.com/discourse/discourse

app/assets/stylesheets/common/foundation/color_transformations.scss

main

// standard color transformations, use these if possible, and add any new dark-light-diffs here
// any variables defined here can be added in theme color schemes
// all variables should have the !default flag

@use "sass:string";

// primary
$primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-low: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%) !default;
$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%) !default;
$primary-high: dark-light-diff($primary, $secondary, 30%, -25%) !default;
$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%) !default;

// primary-numbers
$primary-50: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-100: dark-light-diff($primary, $secondary, 94%, -80%) !default;
$primary-200: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-300: dark-light-diff($primary, $secondary, 80%, -60%) !default;
$primary-400: dark-light-diff($primary, $secondary, 70%, -45%) !default;

This file has been truncated. show original

متغيرات CSS معرفة هنا:

github.com/discourse/discourse

app/assets/stylesheets/color_definitions.scss

main

// This file maps all SCSS color variables to CSS custom properties.
// It is compiled to CSS separately from the rest of the app.
// The source variables come from color_transformations.scss and variables.scss
:root {
  color-scheme: #{schemeType()};

  --scheme-type: #{schemeType()};
  --primary: #{$primary};
  --secondary: #{$secondary};
  --tertiary: #{$tertiary};
  --quaternary: #{$quaternary};
  --header_background: #{$header_background};
  --header_primary: #{$header_primary};
  --highlight: #{$highlight};
  --danger: #{$danger};
  --success: #{$success};
  --love: #{$love};
  --d-selected: #{$selected};
  --d-hover: #{$hover};
  --always-black-rgb: 0, 0, 0;

This file has been truncated. show original

إذا كنت ترغب في تجاوز --primary-medium على سبيل المثال، يمكنك إضافة هذا إلى السمة الخاصة بك:

:root {
    --primary-high: red;
}

ومع ذلك، لا أعرف كيفية استخدام وظائف تحويل الألوان، والتي تحتاج إلى متغيرات SCSS.

أرى أن @import "common/foundation/variables"; غير مطلوب لأن “المتغيرات الأساسية والمتغيرات الخاصة بالسمات يتم حقنها الآن قبل تجميع أي ملف SCSS”، لكنني لم أتمكن من جعلها تعمل على الرغم من ذلك. سأمرر الميكروفون للمستخدمين الأكثر معرفة

ondrej · 20 مارس 2025، 1:13م

يمكنك التحقق من دليل الأسلوب

يمكنك أيضًا التحقق من /styleguide/atoms/colors للألوان. يجب عليك تمكينها في إعدادات موقعك عن طريق البحث عن ‘styleguide’

على سبيل المثال: https://meta.discourse.org/styleguide/atoms/colors

pHneutre · 20 مارس 2025، 1:24م

رائع، هذه أول مرة أسمع فيها عن دليل الأنماط، شكرًا لك.
إذًا، أفهم أن CSS المخصص هو الطريقة الوحيدة لتعديل هذه الأنماط، كما قال @Canapin، صحيح؟ ( للتأكيد إذا أردت)

awesomerobot · 20 مارس 2025، 1:37م

هذه الطريقة هي الأسهل على الأرجح، وستعمل مع أي من الألوان التي تم إنشاؤها تلقائيًا

ولكن يمكنك أيضًا تجاوز الألوان في ملف about.json الخاص بالمظهر كما هو موضح هنا Override values for auto-generated color variables

system · 19 أبريل 2025، 1:37م

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

الموضوع		الردود	مرات العرض
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	11859	9 يناير 2018
Referencing Discourse theme color variables in custom theme component? Support css	4	72	20 أبريل 2025
Styling Discourse with variables: Show & Tell Dev dev-news	1	166	5 أغسطس 2025
Reference for full color customization Dev	4	1308	14 فبراير 2023
Challenges creating a custom color palette Dev	8	149	29 يناير 2025

كيف تعمل الألوان وكيف يمكن تغييرها؟

الموضوعات ذات الصلة