UNPKG

@scalar/themes

Version:

the default CSS variables for all Scalar packages

github.com/scalar/scalar

scalar/scalar

5 lines (4 loc) • 3.72 kB
1
2
3
4
5
const solarizedTheme = ".light-mode {\n color-scheme: light;\n --scalar-color-1: #584c27;\n --scalar-color-2: #616161;\n --scalar-color-3: #a89f84;\n --scalar-color-accent: #b58900;\n --scalar-background-1: #fdf6e3;\n --scalar-background-2: #eee8d5;\n --scalar-background-3: #ddd6c1;\n --scalar-background-accent: #b589001f;\n\n --scalar-border-color: #ded8c8;\n --scalar-scrollbar-color: rgba(0, 0, 0, 0.18);\n --scalar-scrollbar-color-active: rgba(0, 0, 0, 0.36);\n --scalar-lifted-brightness: 1;\n --scalar-backdrop-brightness: 1;\n\n --scalar-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11);\n --scalar-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px, rgba(0, 0, 0, 0.08) 0px 3px 8px 0px, #eeeeed 0px 0 0 1px;\n\n --scalar-button-1: rgb(49 53 56);\n --scalar-button-1-color: #fff;\n --scalar-button-1-hover: rgb(28 31 33);\n\n --scalar-color-red: #b91c1c;\n --scalar-color-orange: #a16207;\n --scalar-color-green: #047857;\n --scalar-color-blue: #1d4ed8;\n --scalar-color-orange: #c2410c;\n --scalar-color-purple: #6d28d9;\n}\n\n.dark-mode {\n color-scheme: dark;\n --scalar-color-1: #fff;\n --scalar-color-2: #cccccc;\n --scalar-color-3: #6d8890;\n --scalar-color-accent: #007acc;\n --scalar-background-1: #00212b;\n --scalar-background-2: #012b36;\n --scalar-background-3: #004052;\n --scalar-background-accent: #015a6f;\n\n --scalar-border-color: #2f4851;\n --scalar-scrollbar-color: rgba(255, 255, 255, 0.24);\n --scalar-scrollbar-color-active: rgba(255, 255, 255, 0.48);\n --scalar-lifted-brightness: 1.45;\n --scalar-backdrop-brightness: 0.5;\n\n --scalar-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1);\n --scalar-shadow-2:\n rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4) 0px 9px 24px, 0 0 0 1px rgba(255, 255, 255, 0.1);\n\n --scalar-button-1: #f6f6f6;\n --scalar-button-1-color: #000;\n --scalar-button-1-hover: #e7e7e7;\n\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\n/* 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: var(--scalar-background-2);\n --scalar-sidebar-search-border-color: var(--scalar-sidebar-search-background);\n --scalar-sidebar-search--color: var(--scalar-color-3);\n}\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: 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-sidebar-color-1);\n --scalar-sidebar-search-background: var(--scalar-background-2);\n --scalar-sidebar-search-border-color: var(--scalar-sidebar-search-background);\n --scalar-sidebar-search--color: var(--scalar-color-3);\n}\n*::selection {\n background-color: color-mix(in srgb, var(--scalar-color-accent), transparent 70%);\n}\n"; export { solarizedTheme as default };