theme: pastel dark

This commit is contained in:
dragonwocky 2021-10-07 23:06:11 +11:00
parent 7aa3f04f8b
commit 86721aabba
13 changed files with 222 additions and 13 deletions

View File

@ -23,7 +23,7 @@
--theme--accent_blue: var(--cola--accent);
--theme--accent_blue-selection: rgba(78, 32, 69, 0.5);
--theme--accent_blue-hover: #bd6992;
--theme--accent_blue-focus: #cc86a8;
--theme--accent_blue-active: #cc86a8;
--theme--accent_blue-text: #fff;
--theme--accent_red: var(--cola--accent);
--theme--accent_red-hover: #bf799b63;

View File

@ -8,7 +8,7 @@
--theme--accent_blue: rgb(213, 36, 36);
--theme--accent_blue-selection: rgba(177, 24, 24, 0.245);
--theme--accent_blue-hover: rgb(211, 57, 57);
--theme--accent_blue-focus: rgb(199, 59, 59);
--theme--accent_blue-active: rgb(199, 59, 59);
--theme--accent_red: rgb(213, 36, 36);
--theme--accent_red-hover: rgb(177, 24, 24, 0.1);

View File

@ -2,6 +2,7 @@
* notion-enhancer: dracula
* (c) 2016 Dracula Theme
* (c) 2020 CloudHill
* (c) 2020 mimishahzad
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/

View File

@ -10,6 +10,11 @@
"email": "zno.rocha@gmail.com",
"homepage": "https://draculatheme.com/",
"avatar": "https://draculatheme.com/static/icons/pack-1/045-dracula.svg"
},
{
"name": "mimishahzad",
"homepage": "https://github.com/mimishahzad",
"avatar": "https://avatars.githubusercontent.com/u/34081810"
}
],
"css": {

View File

@ -1,6 +1,7 @@
/*
* notion-enhancer: dracula
* (c) 2016 Dracula Theme
* (c) 2020 mimishahzad
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
@ -42,7 +43,7 @@
--theme--accent_blue: var(--dracula--purple);
--theme--accent_blue-selection: #bb8dfd3d;
--theme--accent_blue-hover: #b179ff;
--theme--accent_blue-focus: #9f5ff8;
--theme--accent_blue-active: #9f5ff8;
--theme--accent_red: var(--dracula--comment);
--theme--accent_red-hover: #6273a439;

View File

@ -22,7 +22,7 @@
--theme--accent_blue: var(--ocean--accent);
--theme--accent_blue-selection: rgba(255, 65, 81, 0.2);
--theme--accent_blue-hover: #fc3747;
--theme--accent_blue-focus: #ff4d5c;
--theme--accent_blue-active: #ff4d5c;
--theme--accent_blue-text: #fff;
--theme--accent_red: var(--ocean--accent);
--theme--accent_red-hover: #ff41514b;

View File

@ -48,7 +48,7 @@ const customClasses = {
'mod-container': apply`w-full md:w-1/2 lg:w-1/3 xl:w-1/4 2xl:w-1/5 px-2.5 py-2.5 box-border`,
'mod': apply`relative h-full w-full flex flex-col overflow-hidden rounded-lg shadow-lg
bg-notion-secondary border border-divider cursor-pointer`,
'mod-selected': apply`mod ring ring-accent-blue-focus`,
'mod-selected': apply`mod ring ring-accent-blue-active`,
'mod-body': apply`px-4 py-3 flex flex-col flex-auto children:cursor-pointer`,
'mod-preview': apply`object-cover w-full h-32`,
'mod-title': apply`mb-2 text-xl font-semibold tracking-tight flex items-center`,
@ -63,7 +63,7 @@ const customClasses = {
bg-accent-red-hover border border-accent-red text-accent-red focus:(outline-none ring ring-inset ring-accent-red)`,
'profile-actions': apply`flex`,
'profile-save': apply`text-sm px-3 py-2 font-medium mt-2 bg-accent-blue text-accent-blue-text rounded-md flex-grow
hover:bg-accent-blue-hover focus:(bg-accent-blue-focus outline-none) text-center`,
hover:bg-accent-blue-hover focus:(bg-accent-blue-active outline-none) text-center`,
'profile-delete': apply`text-sm px-3 py-2 font-medium ml-3 mt-2 bg-red-tag text-red-tag-text rounded-md flex-grow
border border-red-text hover:bg-red-text focus:(outline-none bg-red-text) text-center`,
'profile-export': apply`profile-save mr-2`,
@ -79,7 +79,7 @@ const customClasses = {
'toggle-feature': apply`after::(${pseudoContent} w-4 h-4 bg-toggle-feature rounded-full duration-300) cursor-pointer`,
'input-label': apply`block text-sm mt-2 relative`,
'input': apply`transition block w-full mt-2 pl-3 pr-14 py-2 text-sm rounded-md flex bg-input text-foreground
appearance-none placeholder-foreground-secondary ring-1 ring-divider focus:(outline-none ring ring-accent-blue-focus)`,
appearance-none placeholder-foreground-secondary ring-1 ring-divider focus:(outline-none ring ring-accent-blue-active)`,
'input-tooltip': apply`h-4 w-4 -mt-1 inline-block mr-2`,
'input-icon': apply`absolute w-11 h-9 right-0 bottom-0 py-2 px-3 bg-notion-secondary rounded-r-md text-icon`,
'input-placeholder': apply`text-foreground-secondary`,
@ -121,7 +121,7 @@ setup({
'accent': {
'blue': 'var(--theme--accent_blue)',
'blue-hover': 'var(--theme--accent_blue-hover)',
'blue-focus': 'var(--theme--accent_blue-focus)',
'blue-active': 'var(--theme--accent_blue-active)',
'blue-text': 'var(--theme--accent_blue-text)',
'red': 'var(--theme--accent_red)',
'red-hover': 'var(--theme--accent_red-hover)',

View File

@ -0,0 +1,72 @@
/*
* notion-enhancer: pastel dark
* (c) 2020 u/zenith_illinois
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license
*/
.notion-dark-theme img[src*='/images/onboarding/use-case-note.png'],
.notion-dark-theme img[src*='/images/onboarding/team-features-illustration.png'] {
filter: invert(1) !important;
}
.notion-dark-theme img[src*='/images/onboarding/checked.svg'] {
filter: hue-rotate(45deg) !important;
}
.notion-dark-theme
img[style*='display: block; object-fit: cover; border-radius: 100%; width: 90px; height: 90px;'],
.notion-dark-theme
img[style*='display: block; object-fit: cover; border-radius: 3px; width: 56.832px; height: 56.832px; transition: opacity 100ms ease-out 0s;'] {
transition: filter 0.4s ease !important;
}
.notion-dark-theme
img[style*='display: block; object-fit: cover; border-radius: 100%; width: 90px; height: 90px;']:hover,
.notion-dark-theme
img[style*='display: block; object-fit: cover; border-radius: 3px; width: 56.832px; height: 56.832px; transition: opacity 100ms ease-out 0s;']:hover {
filter: brightness(1.2);
}
.notion-dark-theme [style*='font-family: iawriter-mono, Nitti, Menlo, Courier, monospace;'] {
filter: hue-rotate(170deg) !important;
}
.notion-dark-theme .notion-token-remove-button[role*='button'][tabindex*='0']:hover,
.notion-dark-theme .notion-record-icon {
background: transparent !important;
}
.notion-dark-theme .notion-focusable:focus-within,
.notion-dark-theme .notion-to_do-block > div > div > div[style*='background:'],
.notion-dark-theme div[role='button'],
[style*='height: 4px;'] > .notion-selectable.notion-collection_view_page-block > *,
.notion-dark-theme .notion-calendar-view-day[style*='background: rgb(235, 87, 87);'],
.DayPicker-Day--today,
.notion-dark-theme
.DayPicker:not(.DayPicker--interactionDisabled)
.DayPicker-Day--outside:hover,
.notion-dark-theme
.DayPicker:not(.DayPicker--interactionDisabled)
.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--value)
.DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected,
.notion-dark-theme .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--start,
.notion-dark-theme .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--end {
transition: color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease !important;
}
.notion-dark-theme [style*='background: rgb(63, 68, 71);'],
.notion-dark-theme
[style*='background: rgb(80, 85, 88);'][style*='color: rgba(255, 255, 255, 0.7)'],
.notion-dark-theme
[style*='background: rgb(80, 85, 88);'][style*='width: 18px;'][style*='height: 18px;'],
.notion-dark-theme
[style*='box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 5px 10px, rgba(15, 15, 15, 0.4) 0px 15px 40px;'],
.notion-dark-theme [style*='background: rgba(151, 154, 155, 0.5);'],
.notion-dark-theme [style*='background: rgba(147, 114, 100, 0.5)'],
.notion-dark-theme [style*='background: rgba(255, 163, 68, 0.5)'],
.notion-dark-theme [style*='background: rgba(255, 220, 73, 0.5)'],
.notion-dark-theme [style*='background: rgba(77, 171, 154, 0.5)'],
.notion-dark-theme [style*='background: rgba(82, 156, 202, 0.5)'],
.notion-dark-theme [style*='background: rgba(154, 109, 215, 0.5)'],
.notion-dark-theme [style*='background: rgba(226, 85, 161, 0.5)'],
.notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5)'] {
box-shadow: 0 2px 4px rgb(0 0 0 / 66%) !important;
}

View File

@ -0,0 +1,21 @@
{
"name": "pastel dark",
"id": "ed48c585-4a0d-4756-a3e6-9ae662732dac",
"version": "0.2.0",
"description": "a smooth-transition true dark theme with a hint of pastel.",
"tags": ["theme", "dark"],
"authors": [
{
"name": "zenith_illinois",
"homepage": "https://www.reddit.com/user/zenith_illinois/",
"avatar": "https://www.redditstatic.com/avatars/defaults/v2/avatar_default_5.png"
}
],
"css": {
"frame": ["variables.css"],
"client": ["variables.css", "app.css"],
"menu": ["variables.css"]
},
"js": {},
"options": []
}

View File

@ -0,0 +1,108 @@
/*
* notion-enhancer: pastel dark
* (c) 2020 u/zenith_illinois
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license
*/
:root.dark {
--theme--bg: #0b0b0b;
--theme--bg_secondary: #0f0f0f;
--theme--bg_popup: #0f0f0f;
--theme--scrollbar_track: transparent;
--theme--scrollbar_thumb: #141414;
--theme--scrollbar_thumb-hover: #1b1b1b;
--theme--accent_blue: #b887f7;
--theme--accent_blue-selection: rgba(184, 135, 247, 0.3);
--theme--accent_blue-hover: #08d7c2;
--theme--accent_blue-active: #b887f7;
--theme--accent_red: #08d7c2;
--theme--accent_red-hover: #08d7c226;
--theme--ui_divider: rgba(255, 255, 255, 0.1);
--theme--ui_interactive-hover: #1e1e1e5c;
--theme--ui_interactive-active: #1e1e1ea5;
--theme--ui_toggle-off: #b1aeab;
--theme--icon: #ffffff;
--theme--icon_secondary: #909090;
--theme--text: #ffffff;
--theme--text_secondary: #909090;
--theme--text_gray: #b1aeab;
--theme--text_brown: #d8b6a6;
--theme--text_orange: #fde3c0;
--theme--text_yellow: #fcde93;
--theme--text_green: #b3f5c8;
--theme--text_blue: #bfe0fd;
--theme--text_purple: #dac7fa;
--theme--text_pink: #f7b8dc;
--theme--text_red: #f8acb4;
--theme--highlight-text: rgb(55, 53, 47);
--theme--highlight_gray: #b1aeab;
--theme--highlight_brown: #d8b6a6;
--theme--highlight_orange: #fde3c0;
--theme--highlight_yellow: #fcde93;
--theme--highlight_green: #b3f5c8;
--theme--highlight_blue: #bfe0fd;
--theme--highlight_purple: #dac7fa;
--theme--highlight_pink: #f7b8dc;
--theme--highlight_red: #f8acb4;
--theme--block-text: rgb(34, 34, 34);
--theme--block_gray: #c2c1c089;
--theme--block_brown: #dacec992;
--theme--block_orange: #fff0dc9f;
--theme--block_yellow: #ffe6a6ad;
--theme--block_green: #c8fdd9a3;
--theme--block_blue: #d1e9ffa3;
--theme--block_purple: #e3d3ffa8;
--theme--block_pink: #fdcce8b1;
--theme--block_red: #ffc8ce9e;
--theme--tag-text: var(--theme--highlight-text);
--theme--tag_default: var(--theme--highlight_gray);
--theme--tag_gray: var(--theme--highlight_gray);
--theme--tag_brown: var(--theme--highlight_brown);
--theme--tag_orange: var(--theme--highlight_orange);
--theme--tag_yellow: var(--theme--highlight_yellow);
--theme--tag_green: var(--theme--highlight_green);
--theme--tag_blue: var(--theme--highlight_blue);
--theme--tag_purple: var(--theme--highlight_purple);
--theme--tag_pink: var(--theme--highlight_pink);
--theme--tag_red: var(--theme--highlight_red);
--theme--callout-text: var(--theme--block-text);
--theme--callout_gray: var(--theme--block_gray);
--theme--callout_brown: var(--theme--block_brown);
--theme--callout_orange: var(--theme--block_orange);
--theme--callout_yellow: var(--theme--block_yellow);
--theme--callout_green: var(--theme--block_green);
--theme--callout_blue: var(--theme--block_blue);
--theme--callout_purple: var(--theme--block_purple);
--theme--callout_pink: var(--theme--block_pink);
--theme--callout_red: var(--theme--block_red);
--theme--code_inline: rgb(8, 8, 8);
--theme--code_inline-text: #b3f5c8;
--theme--code: #0f0f0f;
--theme--code_plain: var(--theme--text);
--theme--code_function: var(--theme--text_blue);
--theme--code_keyword: var(--theme--text_pink);
--theme--code_tag: var(--theme--text_pink);
--theme--code_operator: var(--theme--text_yellow);
--theme--code_important: var(--theme--text_yellow);
--theme--code_property: var(--theme--text_pink);
--theme--code_builtin: var(--theme--text_yellow);
--theme--code_attr-name: var(--theme--text_yellow);
--theme--code_comment: var(--theme--text_gray);
--theme--code_punctuation: var(--theme--text_gray);
--theme--code_doctype: var(--theme--text_gray);
--theme--code_number: var(--theme--text_purple);
--theme--code_string: var(--theme--text_orange);
--theme--code_attr-value: var(--theme--text_orange);
}

View File

@ -8,5 +8,6 @@
"material-ocean@69e7ccb2-4aef-484c-876d-3de1b433d2b9",
"cherry-cola@ec5c4640-68d4-4d25-aefd-62c7e9737cfb",
"dark+@c86cfe98-e645-4822-aa6b-e2de1e08bafa",
"dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086"
"dracula@033bff54-50ba-4cec-bdc0-b2ca7e307086",
"pastel-dark@ed48c585-4a0d-4756-a3e6-9ae662732dac"
]

View File

@ -701,8 +701,8 @@ body,
}
.notion-focusable-within:focus-within,
.notion-focusable:focus-visible {
box-shadow: var(--theme--accent_blue-focus, rgba(26, 170, 220, 0.7)) 0px 0px 0px 1px inset,
var(--theme--accent_blue-focus, rgba(26, 170, 220, 0.4)) 0px 0px 0px 2px !important;
box-shadow: var(--theme--accent_blue-active, rgba(26, 170, 220, 0.7)) 0px 0px 0px 1px inset,
var(--theme--accent_blue-active, rgba(26, 170, 220, 0.4)) 0px 0px 0px 2px !important;
}
.notion-onboarding-plan-type-team[style*='box-shadow: rgb(46, 170, 220)'],
.notion-onboarding-plan-type-personal[style*='box-shadow: rgb(46, 170, 220)'] {
@ -725,7 +725,7 @@ body,
background: var(--theme--accent_blue-hover) !important;
}
[style*='background: rgb(0, 141, 190);'] {
background: var(--theme--accent_blue-focus) !important;
background: var(--theme--accent_blue-active) !important;
}
[style*='background-color: rgb(235, 87, 87); height: 28px; width: 28px;'],

View File

@ -26,7 +26,7 @@
--theme--accent_blue: rgb(46, 170, 220);
--theme--accent_blue-selection: rgb(46, 170, 220, 0.25);
--theme--accent_blue-hover: rgb(6, 156, 205);
--theme--accent_blue-focus: rgb(0, 141, 190);
--theme--accent_blue-active: rgb(0, 141, 190);
--theme--accent_blue-text: #fff;
--theme--accent_red: #eb5757;
--theme--accent_red-hover: rgba(235, 87, 87, 0.1);