@theojs/lumen/theme/components-var.css

专为 VitePress 打造的主题美化与 Vue 扩展组件库

:root {
  /**
  * Default
  * -------------------------------------------------------------------------- */

  --iconify-defaultcolor: var(--vp-c-text-2);
  --component-bg: var(--vp-c-bg-alt);
  --i-mr: 0.25em;
  --promo-text-color: var(--vp-c-brand-1);
  --promo-text-weight: bold;
  --promo-title-color: linear-gradient(225deg, rgba(100, 108, 255, 1), rgba(176, 71, 255, 1), rgba(100, 108, 255, 1));
  --promo-title-weight: 600;

  /**
  * Component: Announcement
  * -------------------------------------------------------------------------- */
  --Announcement-bg: var(--vp-button-alt-bg);
  --Announcement-border: transparent;
  --Announcement-data: var(--vp-c-brand-1);
  --Announcement-bg-hover: var(--vp-button-alt-bg);
  --Announcement-border-hover: var(--vp-c-brand-1);
  --Announcement-transform-hover: none;
  --Announcement-transform-active: none;

  /**
  * Component: AsideLogo
  * -------------------------------------------------------------------------- */

  --AsideLogo-bg: var(--component-bg);
  --AsideLogo-border: transparent;
  --AsideLogo-name: linear-gradient(225deg, var(--vp-c-brand-1), var(--vp-c-brand-3), var(--vp-c-brand-1));
  --AsideLogo-promo: linear-gradient(225deg, rgba(100, 108, 255, 1), rgba(176, 71, 255, 1), rgba(100, 108, 255, 1));
  --AsideLogo-hide: var(--vp-c-text-2);
  --AsideLogo-info: var(--vp-c-text-2);
  --AsideLogo-name-bg-hover: var(--component-bg);
  --AsideLogo-name-border-hover: var(--vp-c-brand-1);
  --AsideLogo-promo-bg-hover: var(--component-bg);
  --AsideLogo-promo-border-hover: rgba(100, 108, 255, 1);
  --AsideLogo-transform-hover: none;
  --AsideLogo-transform-active: none;

  /**
  * Component: BoxCube
  * -------------------------------------------------------------------------- */

  --Boxcube-bg: var(--component-bg);
  --Boxcube-border: transparent;
  --Boxcube-name: inherit;
  --Boxcube-bg-hover: var(--component-bg);
  --Boxcube-border-hover: var(--vp-c-brand-1);
  --Boxcube-boxshadow-hover: none;
  --Boxcube-transform-hover: none;
  --Boxcube-transform-active: none;

  /**
  * Component: Links
  * -------------------------------------------------------------------------- */

  --Links-bg: var(--component-bg);
  --Links-border: transparent;
  --Links-name: inherit;
  --Links-desc: var(--vp-c-text-2);
  --Links-bg-hover: var(--component-bg);
  --Links-border-hover: var(--vp-c-brand-1);
  --Links-boxshadow-hover: none;
  --Links-transform-hover: none;
  --Links-transform-active: none;

  /**
  * Component: Card
  * -------------------------------------------------------------------------- */

  --Card-bg: var(--component-bg);
  --Card-border: transparent;
  --Card-name: inherit;
  --Card-desc: var(--vp-c-text-2);
  --Card-bg-hover: var(--component-bg);
  --Card-border-hover: var(--vp-c-brand-1);
  --Card-boxshadow-hover: none;
  --Card-transform-hover: none;
  --Card-transform-active: none;

  /**
  * Component: Pill
  * -------------------------------------------------------------------------- */

  --Pill-bg: var(--vp-code-bg);
  --Pill-border: transparent;
  --Pill-name: inherit;
  --Pill-bg-hover: var(--vp-code-bg);
  --Pill-border-hover: var(--vp-c-brand-1);
  --Pill-boxshadow-hover: none;
  --Pill-transform-hover: none;
  --Pill-transform-active: none;

  /**
  * Component: HomeFooter
  * -------------------------------------------------------------------------- */

  --HomeFooter-bg: var(--component-bg);
  --HomeFooter-link-hover: var(--vp-c-brand-1);

  /**
  * Component: HomeUnderline
  * -------------------------------------------------------------------------- */

  --HomeUnderline-bg: var(--vp-c-brand-1);

  /**
  * Home-links
  * -------------------------------------------------------------------------- */

  --Home-links-custom-brand: url('https://i.theojs.cn/logo/avatar-mini.webp');
  --Home-links-custom-alt: url('https://i.theojs.cn/logo/avatar-mini.webp');
  --Home-links-custom-brand-lumen: url('https://i.theojs.cn/logo/Lumen-Logo-mini.webp');
  --Home-links-custom-alt-lumen: url('https://i.theojs.cn/logo/Lumen-Logo-mini.webp');

  /**
  * waline-style     
  * https://waline.js.org/reference/client/style.html 
  * -------------------------------------------------------------------------- */

  /* 字体大小 */
  --waline-font-size: 1rem !important;

  /* 常规颜色 */
  --waline-white: var(--vp-c-white) !important;
  --waline-light-grey: var(--vp-c-text-1) !important;
  --waline-dark-grey: var(--vp-c-text-1) !important;

  /* 主题色 */
  --waline-theme-color: var(--vp-c-brand-1) !important;
  --waline-active-color: var(--vp-c-brand-3) !important;

  /* 布局颜色 */
  --waline-color: var(--vp-c-text-1) !important;
  --waline-bg-color: var(--vp-c-bg-alt) !important;
  --waline-bg-color-light: var(--vp-c-bg-elv) !important;
  --waline-bg-color-hover: var(--vp-c-bg-elv) !important;
  --waline-border-color: var(--vp-c-bg-elv) !important;
  --waline-disable-bg-color: var(--vp-c-bg-alt) !important;
  --waline-disable-color: var(--vp-c-text-3) !important;
  --waline-code-bg-color: var(--vp-c-bg-alt) !important;

  /* 特殊颜色 */
  --waline-bq-color: var(--vp-c-text-3) !important;

  /* 头像 */
  --waline-avatar-size: 3.25rem;
  --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);

  /* 徽章 */
  --waline-badge-color: #3498db;
  --waline-badge-font-size: 0.775em;

  /* 信息 */
  --waline-info-bg-color: var(--vp-c-bg-alt) !important;
  --waline-info-color: var(--vp-c-text-3) !important;
  --waline-info-font-size: 0.625em;

  /* 渲染选择 */
  --waline-border: 1px solid var(--waline-border-color);
  --waline-avatar-radius: 50%;
  --waline-box-shadow: none;
}

.dark {
  /**
  * Default
  * -------------------------------------------------------------------------- */

  --promo-title-color: linear-gradient(225deg, rgba(120, 200, 255, 1), rgba(255, 130, 255, 1), rgba(120, 200, 255, 1));

  /**
  * Component: AsideLogo
  * -------------------------------------------------------------------------- */
  --AsideLogo-promo: linear-gradient(225deg, rgba(120, 200, 255, 1), rgba(255, 130, 255, 1), rgba(120, 200, 255, 1));

  /**
  * waline-style     
  * https://waline.js.org/reference/client/style.html 
  * -------------------------------------------------------------------------- */

  /* 常规颜色 */
  --waline-white: var(--vp-c-brand-text) !important;
  --waline-light-grey: var(--vp-c-text-1) !important;
  --waline-dark-grey: var(--vp-c-text-1) !important;

  /* 布局颜色 */
  --waline-color: var(--vp-c-text-1) !important;
  --waline-bg-color: var(--vp-c-bg-alt) !important;
  --waline-bg-color-light: var(--vp-c-bg-elv) !important;
  --waline-bg-color-hover: var(--vp-c-bg-elv) !important;
  --waline-border-color: var(--vp-c-bg-elv) !important;
  --waline-disable-bg-color: var(--vp-c-bg-elv) !important;
  --waline-disable-color: var(--vp-c-text-3) !important;
  --waline-code-bg-color: var(--vp-c-bg-alt) !important;

  /* 特殊颜色 */
  --waline-bq-color: var(--vp-c-text-3) !important;

  /* 其他颜色 */
  --waline-info-bg-color: var(--vp-c-bg-elv) !important;
  --waline-info-color: var(--vp-c-text-3) !important;
}