UNPKG

@scalar/themes

Version:

the default CSS variables for all Scalar packages

github.com/scalar/scalar

scalar/scalar

5 lines (4 loc) • 5.17 kB
1
2
3
4
5
const keplerTheme = "/* basic theme */\n.light-mode {\n --scalar-color-1: #1b1b1b;\n --scalar-color-2: #757575;\n --scalar-color-3: #8e8e8e;\n --scalar-color-accent: #7070ff;\n\n --scalar-background-1: #fff;\n --scalar-background-2: #f6f6f6;\n --scalar-background-3: #e7e7e7;\n --scalar-background-accent: #7070ff1f;\n\n --scalar-border-color: rgba(0, 0, 0, 0.1);\n\n --scalar-code-language-color-supersede: var(--scalar-color-3);\n}\n.dark-mode {\n --scalar-color-1: #f7f8f8;\n --scalar-color-2: rgb(180, 188, 208);\n --scalar-color-3: #b4bcd099;\n --scalar-color-accent: #828fff;\n\n --scalar-background-1: #000212;\n --scalar-background-2: #0d0f1e;\n --scalar-background-3: #232533;\n --scalar-background-accent: #8ab4f81f;\n\n --scalar-border-color: #313245;\n --scalar-code-language-color-supersede: var(--scalar-color-3);\n}\n/* Document Sidebar */\n.light-mode .t-doc__sidebar {\n --scalar-sidebar-background-1: var(--scalar-background-1);\n --scalar-sidebar-item-hover-color: currentColor;\n --scalar-sidebar-item-hover-background: var(--scalar-background-2);\n --scalar-sidebar-item-active-background: var(--scalar-background-accent);\n --scalar-sidebar-border-color: var(--scalar-border-color);\n --scalar-sidebar-color-1: var(--scalar-color-1);\n --scalar-sidebar-color-2: var(--scalar-color-2);\n --scalar-sidebar-color-active: var(--scalar-color-accent);\n --scalar-sidebar-search-background: rgba(0, 0, 0, 0.05);\n --scalar-sidebar-search-border-color: 1px solid rgba(0, 0, 0, 0.05);\n --scalar-sidebar-search-color: var(--scalar-color-3);\n --scalar-background-2: rgba(0, 0, 0, 0.03);\n}\n.dark-mode .t-doc__sidebar {\n --scalar-sidebar-background-1: var(--scalar-background-1);\n --scalar-sidebar-item-hover-color: currentColor;\n --scalar-sidebar-item-hover-background: var(--scalar-background-2);\n --scalar-sidebar-item-active-background: rgba(255, 255, 255, 0.1);\n --scalar-sidebar-border-color: var(--scalar-border-color);\n --scalar-sidebar-color-1: var(--scalar-color-1);\n --scalar-sidebar-color-2: var(--scalar-color-2);\n --scalar-sidebar-color-active: var(--scalar-color-accent);\n --scalar-sidebar-search-background: rgba(255, 255, 255, 0.1);\n --scalar-sidebar-search-border-color: 1px solid rgba(255, 255, 255, 0.05);\n --scalar-sidebar-search-color: var(--scalar-color-3);\n}\n/* advanced */\n.light-mode {\n --scalar-color-green: #069061;\n --scalar-color-red: #ef0006;\n --scalar-color-yellow: #edbe20;\n --scalar-color-blue: #0082d0;\n --scalar-color-orange: #fb892c;\n --scalar-color-purple: #5203d1;\n\n --scalar-button-1: rgba(0, 0, 0, 1);\n --scalar-button-1-hover: rgba(0, 0, 0, 0.8);\n --scalar-button-1-color: rgba(255, 255, 255, 0.9);\n}\n.dark-mode {\n --scalar-color-green: #00b648;\n --scalar-color-red: #dc1b19;\n --scalar-color-yellow: #ffc90d;\n --scalar-color-blue: #4eb3ec;\n --scalar-color-orange: #ff8d4d;\n --scalar-color-purple: #b191f9;\n\n --scalar-button-1: rgba(255, 255, 255, 1);\n --scalar-button-1-hover: rgba(255, 255, 255, 0.9);\n --scalar-button-1-color: black;\n}\n/* Custom Theme */\n.dark-mode h2.t-editor__heading,\n.dark-mode .t-editor__page-title h1,\n.dark-mode h1.section-header:not(::selection),\n.dark-mode .markdown h1,\n.dark-mode .markdown h2,\n.dark-mode .markdown h3,\n.dark-mode .markdown h4,\n.dark-mode .markdown h5,\n.dark-mode .markdown h6 {\n -webkit-text-fill-color: transparent;\n background-image: linear-gradient(to right bottom, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0.38));\n -webkit-background-clip: text;\n background-clip: text;\n}\n.sidebar-search {\n backdrop-filter: blur(12px);\n}\n@keyframes headerbackground {\n from {\n background: transparent;\n backdrop-filter: none;\n }\n to {\n background: var(--scalar-header-background-1);\n backdrop-filter: blur(12px);\n }\n}\n.dark-mode .scalar-card {\n background: rgba(255, 255, 255, 0.05) !important;\n}\n.dark-mode .scalar-card * {\n --scalar-background-2: transparent !important;\n --scalar-background-1: transparent !important;\n}\n.light-mode .dark-mode.scalar-card *,\n.light-mode .dark-mode.scalar-card {\n --scalar-background-1: #0d0f1e !important;\n --scalar-background-2: #0d0f1e !important;\n --scalar-background-3: #191b29 !important;\n}\n.light-mode .dark-mode.scalar-card {\n background: #191b29 !important;\n}\n.badge {\n box-shadow: 0 0 0 1px var(--scalar-border-color);\n margin-right: 6px;\n}\n\n.table-row.required-parameter .table-row-item:nth-of-type(2):after {\n background: transparent;\n box-shadow: none;\n}\n/* Hero Section Flare */\n.section-flare {\n width: 100vw;\n background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(120, 119, 198, 0.3), transparent);\n height: 100vh;\n}\n.light-mode *::selection {\n background-color: color-mix(in srgb, var(--scalar-color-accent), transparent 70%);\n}\n.dark-mode *::selection {\n background-color: color-mix(in srgb, var(--scalar-color-accent), transparent 50%);\n}\n\n/* document layout */\n.light-mode .t-doc .layout-content,\n.dark-mode .t-doc .layout-content {\n background: transparent;\n}\n"; export { keplerTheme as default };