feat: Add new light theme called paper
This commit is contained in:
@@ -11,6 +11,7 @@
|
|||||||
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
|
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
|
||||||
--syntax-value-color: color-mix(in srgb, var(--accent), white);
|
--syntax-value-color: color-mix(in srgb, var(--accent), white);
|
||||||
--syntax-comment-color: rgba(255, 255, 255, 0.3);
|
--syntax-comment-color: rgba(255, 255, 255, 0.3);
|
||||||
|
--syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
|
||||||
--syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
|
--syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
|
||||||
--syntax-line-highlight-color: hsl(24, 20%, 95%);
|
--syntax-line-highlight-color: hsl(24, 20%, 95%);
|
||||||
--syntax-line-highlight-box-shadow: white;
|
--syntax-line-highlight-box-shadow: white;
|
||||||
|
|||||||
@@ -11,6 +11,7 @@
|
|||||||
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
|
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
|
||||||
--syntax-value-color: color-mix(in srgb, var(--accent), white);
|
--syntax-value-color: color-mix(in srgb, var(--accent), white);
|
||||||
--syntax-comment-color: rgba(255, 255, 255, 0.3);
|
--syntax-comment-color: rgba(255, 255, 255, 0.3);
|
||||||
|
--syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
|
||||||
--syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
|
--syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
|
||||||
--syntax-line-highlight-color: hsl(24, 20%, 95%);
|
--syntax-line-highlight-color: hsl(24, 20%, 95%);
|
||||||
--syntax-line-highlight-box-shadow: white;
|
--syntax-line-highlight-box-shadow: white;
|
||||||
|
|||||||
@@ -11,6 +11,7 @@
|
|||||||
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
|
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
|
||||||
--syntax-value-color: color-mix(in srgb, var(--accent), white);
|
--syntax-value-color: color-mix(in srgb, var(--accent), white);
|
||||||
--syntax-comment-color: rgba(255, 255, 255, 0.3);
|
--syntax-comment-color: rgba(255, 255, 255, 0.3);
|
||||||
|
--syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
|
||||||
--syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
|
--syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
|
||||||
--syntax-line-highlight-color: hsl(24, 20%, 95%);
|
--syntax-line-highlight-color: hsl(24, 20%, 95%);
|
||||||
--syntax-line-highlight-box-shadow: white;
|
--syntax-line-highlight-box-shadow: white;
|
||||||
|
|||||||
22
assets/css/color/paper.scss
Normal file
22
assets/css/color/paper.scss
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
:root {
|
||||||
|
--accent: #1d1e28;
|
||||||
|
--accent-contrast-color: white;
|
||||||
|
--article-link-color: var(inherit);
|
||||||
|
--background: color-mix(in srgb, var(--accent) 2%, #fefcfa 98%);
|
||||||
|
--border-color: rgba(0, 0, 0, 0.1);
|
||||||
|
--color: black;
|
||||||
|
|
||||||
|
// Use in code syntax highlighting
|
||||||
|
--syntax-func-color: color-mix(in srgb, var(--accent) 70%, #000 30%);
|
||||||
|
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, #000);
|
||||||
|
--syntax-value-color: color-mix(in srgb, var(--accent), black);
|
||||||
|
--syntax-comment-color: rgba(0, 0, 0, 0.3);
|
||||||
|
--syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #000 10%);
|
||||||
|
--syntax-line-highlight-background-color: hsla(336, 20%, 50%, 0.4);
|
||||||
|
--syntax-line-highlight-color: hsl(336, 20%, 95%);
|
||||||
|
--syntax-line-highlight-box-shadow: black;
|
||||||
|
--syntax-code-border-color: rgba(0, 0, 0, 0.1);
|
||||||
|
--syntax-code-copy-button-background: hsla(360, 0%, 87.8%, 0.2);
|
||||||
|
--syntax-code-copy-button-color: #444;
|
||||||
|
--syntax-code-copy-button-box-shadow-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
@@ -11,6 +11,7 @@
|
|||||||
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
|
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
|
||||||
--syntax-value-color: color-mix(in srgb, var(--accent), white);
|
--syntax-value-color: color-mix(in srgb, var(--accent), white);
|
||||||
--syntax-comment-color: rgba(255, 255, 255, 0.3);
|
--syntax-comment-color: rgba(255, 255, 255, 0.3);
|
||||||
|
--syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
|
||||||
--syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
|
--syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
|
||||||
--syntax-line-highlight-color: hsl(24, 20%, 95%);
|
--syntax-line-highlight-color: hsl(24, 20%, 95%);
|
||||||
--syntax-line-highlight-box-shadow: white;
|
--syntax-line-highlight-box-shadow: white;
|
||||||
|
|||||||
@@ -11,6 +11,7 @@
|
|||||||
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
|
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
|
||||||
--syntax-value-color: color-mix(in srgb, var(--accent), white);
|
--syntax-value-color: color-mix(in srgb, var(--accent), white);
|
||||||
--syntax-comment-color: rgba(255, 255, 255, 0.3);
|
--syntax-comment-color: rgba(255, 255, 255, 0.3);
|
||||||
|
--syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
|
||||||
--syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
|
--syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
|
||||||
--syntax-line-highlight-color: hsl(24, 20%, 95%);
|
--syntax-line-highlight-color: hsl(24, 20%, 95%);
|
||||||
--syntax-line-highlight-box-shadow: white;
|
--syntax-line-highlight-box-shadow: white;
|
||||||
|
|||||||
@@ -75,13 +75,12 @@ pre[class*="language-"] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.line-highlight {
|
.line-highlight {
|
||||||
--line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: color-mix(in srgb, var(--line-highlight-mix), transparent 92%);
|
background: color-mix(in srgb, var(--syntax-line-highlight-mix), transparent 92%);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
|
|||||||
BIN
static/img/theme-colors/paper.png
Normal file
BIN
static/img/theme-colors/paper.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 B |
Reference in New Issue
Block a user