博客-主题颜色变量命名规则和最佳实践

2019-07-01

颜色角色
1. Primary
2. Secondary
3. Tertiary
4. Error
5. Surface
6. Outline
名称
1. —border-color
2. —color-bg
主题

	.light{
		--color-bg: #fbfbfd; #参考苹果https://www.icloud.com/
		--color-primary-text: #1d1d1f;
		--color-secondary-text: #1d1d1f;
		--webdev-text-text-1: #202124;
	    --webdev-text-text-2: #3c4043;
	    --webdev-text-text-3: #80868b;
		--color-link: #0071eb
		--color-secondary: #2ecc71;
	    --color-accent: #e74c3c;
		--color-primary: #3498db;
	}
	.dark {
		
	}
	:root {
			--font-stack: "Proxima Nova", "Helvetica Neue", "Helvetica", "Segoe UI", "Nimbus Sans L", "Liberation Sans", "Open Sans", FreeSans, Arial, sans-serif;
		 --font-stack-monospace: "Courier New", Courier, "Lucida Console", Monaco,           monospace;
	}

方案一

/* 颜色变量 */
:root {
    --color-primary: #3498db;
    --color-secondary: #2ecc71;
    --color-accent: #e74c3c;
    --color-background: #ecf0f1;
    --color-text: #2c3e50;
}
/* 字体变量 */
:root {
    --font-family-sans: 'Helvetica Neue', Arial, sans-serif;
    --font-family-serif: 'Georgia', Times, serif;
    --font-size-base: 16px;
    --font-size-large: 1.25em;
    --font-size-small: 0.875em;
}
/* 间距变量 */
:root {
    --spacing-small: 8px;
    --spacing-medium: 16px;
    --spacing-large: 24px;
}

/* 边框变量 */
:root {
    --border-radius: 4px;
    --border-width: 1px;
    --border-color: #bdc3c7;
}

方案二

:root {
	--primary-text-color: var(--light-theme-text-color);
    --primary-background-color: var(--light-theme-background-color);
    --secondary-text-color: var(--light-theme-secondary-color);
    --disabled-text-color: var(--light-theme-disabled-color);
    --divider-color: var(--light-theme-divider-color);
    --error-color: #dd2c00;
    --primary-color: #3f51b5;
    --light-primary-color: #c5cae9;
    --dark-primary-color: #303f9f;
    --accent-color: #ff4081;
    --light-accent-color: #ff80ab;
    --dark-accent-color: #f50057;
    --light-theme-background-color: #fff;
    --light-theme-base-color: #000;
    --light-theme-text-color: #212121;
    --light-theme-secondary-color: #737373;
    --light-theme-disabled-color: #9b9b9b;
    --light-theme-divider-color: #dbdbdb;
    --dark-theme-background-color: #212121;
    --dark-theme-base-color: #fff;
    --dark-theme-text-color: #fff;
    --dark-theme-secondary-color: #bcbcbc;
    --dark-theme-disabled-color: #646464;
    --dark-theme-divider-color: #3c3c3c;
    --text-primary-color: var(--dark-theme-text-color);
    --default-primary-color: var(--primary-color);
}

方案三

:root {
    --color-bg: #ffffff;
    --color-bg-offset: #f7f7f9;
    --color-text: #373a3c;
    --color-text-offset: #818a91;
    --color-border: #eceeef;
    --color-primary: #ff335f;
    --color-primary-offset: #ff1447;
    --color-secondary: #43a9a3;
}

方案四slack

:root {
    --article-theme-primary: #4a154b;
    --article-theme-secondary: #fff;
    --font-family-default: 'Slack-Circular-Pro', 'Helvetica Neue', Helvetica, 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-family-display: 'Slack-Larsseit', 'Helvetica Neue', Helvetica, 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-family-heading: 'Slack-Larsseit', 'Helvetica Neue', Helvetica, 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-family-body: 'Slack-Circular-Pro', 'Helvetica Neue', Helvetica, 'Segoe UI', Tahoma, Arial, sans-serif;
}

方案discord

:root {
    --brand: #5865f2;
    --brand-gradient: linear-gradient(90deg,#8ea1e1,#7289da);
    --greyple: #99aab5;
    --dark-not-black: #2c2f33;
    --focus-border: #00b0f4;
    --status-green: #43b581;
    --text-link: #00b0f4;
    --off-white: #f6f6f6;
    --white: #fff;
    --not-quite-black: #23272a;
    --not-quite-black-rgb: 35, 39, 42;
    --black: #000;
    --ekko-red: #de2761;
    --page-max-width: 1260px;
    --page-max-width-med: 1024px;
    --num-grid-columns: 4;
    --page-gutter: 24px;
    --section-spacing: 56px;
}
:root {
    --font-headline: "ABC Ginto Nord", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Symbols";
    --font-clan-body: Fraunces, "gg sans", serif, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Symbols";
    --font-clan-signature: Corinthia, "gg sans", cursive, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Symbols";
}
:root, :root:lang(bg), :root:lang(el), :root:lang(ru), :root:lang(uk) {
    --font-primary: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Symbols";
    --font-display: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Symbols";
    --font-code: "gg mono", "Source Code Pro", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}
:root {
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-56: 56px;
    --spacing-64: 64px;
    --spacing-72: 72px;
    --spacing-80: 80px;
    --spacing-96: 96px;
    --radius-none: 0px;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-xxl: 32px;
    --radius-round: 2147483647px;
}

参考

语义化命名确保变量名称清晰地表示其用途和含义。例如，primary-color 比 color1 更具描述性。
使用前缀使用前缀区分不同类别的变量。例如，颜色变量可以用 color- 前缀，字体变量可以用 font- 前缀。
命名规范可以使用 kebab-case（短横线连接）或 camelCase（驼峰命名法）。
可扩展性设计变量名时，考虑未来可能的扩展。例如，使用 primary-color, secondary-color, accent-color 等，而不仅仅是 main-color。 https://x.com/settings/display

https://www.joshwcomeau.com/css/understanding-layout-algorithms/ https://mxb.dev/blog/color-theme-switcher/ https://m2.material.io/design/color/dark-theme.html#usage