Skip to content

feat: Dark theme #171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Apr 20, 2023
Merged

feat: Dark theme #171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
f354393
Added first iteration dark theme
matthewlipski Apr 17, 2023
a175930
website dark mode
YousefED Apr 18, 2023
76929d4
Removed some unnecessary styles
matthewlipski Apr 18, 2023
48b1dbd
Merge remote-tracking branch 'origin/dark-theme' into dark-theme
matthewlipski Apr 18, 2023
316e92a
Changed how theme is passed to factories
matthewlipski Apr 18, 2023
97da12c
Changed `useDarkTheme` option to `theme`
matthewlipski Apr 18, 2023
1d5d351
Removed redundant varible
matthewlipski Apr 18, 2023
68ec1ad
Added dark theme to editor body
matthewlipski Apr 18, 2023
20d6670
Changed editor theme from class to attribute
matthewlipski Apr 19, 2023
89c9bb8
Merge branch 'main' into dark-theme
matthewlipski Apr 19, 2023
0cafb37
Converted mock ID to string and updated snapshots
matthewlipski Apr 19, 2023
d4d8b8d
Updated unit test snapshots
matthewlipski Apr 19, 2023
6ea012f
Updated snapshots
matthewlipski Apr 19, 2023
f0a6b8e
Updated snapshots
matthewlipski Apr 19, 2023
54749e2
Updated screenshots
matthewlipski Apr 19, 2023
0ad8ba1
Made keyboard handler tests less flaky
matthewlipski Apr 19, 2023
3ff1df8
Removed dark mode toggle from website
matthewlipski Apr 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/editor/src/App.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.editor {
padding: 0 calc((100% - 731px) / 2);
margin: 0 calc((100% - 731px) / 2);
height: 100%;
}
1 change: 1 addition & 0 deletions examples/editor/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ function App() {
class: styles.editor,
"data-test": "editor",
},
theme: "light",
});

// Give tests a way to get prosemirror instance
Expand Down
7 changes: 7 additions & 0 deletions packages/core/src/BlockNoteEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,12 @@ export type BlockNoteEditorOptions = {
* @default true
*/
defaultStyles: boolean;
/**
* Whether to use the light or dark theme.
*
* @default "light"
*/
theme: "light" | "dark";

// tiptap options, undocumented
_tiptapOptions: any;
Expand Down Expand Up @@ -157,6 +163,7 @@ export class BlockNoteEditor {
: [...(options._tiptapOptions?.extensions || []), ...extensions],
editorProps: {
attributes: {
"data-theme": options.theme || "light",
...(options.editorDOMAttributes || {}),
class: [
styles.bnEditor,
Expand Down
70 changes: 35 additions & 35 deletions packages/core/src/api/blockManipulation/__snapshots__/blockManipulation.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
"type": "text",
},
],
"id": 2,
"id": "2",
"props": {
"backgroundColor": "default",
"level": "1",
Expand All @@ -30,7 +30,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
"type": "text",
},
],
"id": 1,
"id": "1",
"props": {
"backgroundColor": "default",
"level": "1",
Expand All @@ -50,7 +50,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
"type": "text",
},
],
"id": 4,
"id": "4",
"props": {
"backgroundColor": "default",
"level": "2",
Expand All @@ -67,7 +67,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
"type": "text",
},
],
"id": 3,
"id": "3",
"props": {
"backgroundColor": "default",
"level": "2",
Expand All @@ -79,7 +79,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
{
"children": [],
"content": [],
"id": 0,
"id": "0",
"props": {
"backgroundColor": "default",
"textAlignment": "left",
Expand All @@ -103,7 +103,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
"type": "text",
},
],
"id": 2,
"id": "2",
"props": {
"backgroundColor": "default",
"level": "1",
Expand All @@ -120,7 +120,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
"type": "text",
},
],
"id": 1,
"id": "1",
"props": {
"backgroundColor": "default",
"textAlignment": "left",
Expand All @@ -139,7 +139,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
"type": "text",
},
],
"id": 4,
"id": "4",
"props": {
"backgroundColor": "default",
"level": "2",
Expand All @@ -156,7 +156,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
"type": "text",
},
],
"id": 3,
"id": "3",
"props": {
"backgroundColor": "default",
"level": "2",
Expand All @@ -168,7 +168,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
{
"children": [],
"content": [],
"id": 0,
"id": "0",
"props": {
"backgroundColor": "default",
"textAlignment": "left",
Expand All @@ -190,7 +190,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
"type": "text",
},
],
"id": 1,
"id": "1",
"props": {
"backgroundColor": "default",
"textAlignment": "left",
Expand All @@ -201,7 +201,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
{
"children": [],
"content": [],
"id": 0,
"id": "0",
"props": {
"backgroundColor": "default",
"textAlignment": "left",
Expand All @@ -223,7 +223,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
"type": "text",
},
],
"id": 1,
"id": "1",
"props": {
"backgroundColor": "default",
"textAlignment": "left",
Expand All @@ -234,7 +234,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
{
"children": [],
"content": [],
"id": 0,
"id": "0",
"props": {
"backgroundColor": "default",
"textAlignment": "left",
Expand All @@ -258,7 +258,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
"type": "text",
},
],
"id": 2,
"id": "2",
"props": {
"backgroundColor": "default",
"textAlignment": "left",
Expand All @@ -283,7 +283,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
"type": "text",
},
],
"id": 1,
"id": "1",
"props": {
"backgroundColor": "default",
"level": "3",
Expand All @@ -295,7 +295,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
{
"children": [],
"content": [],
"id": 0,
"id": "0",
"props": {
"backgroundColor": "default",
"textAlignment": "left",
Expand All @@ -311,7 +311,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
{
"children": [],
"content": [],
"id": 0,
"id": "0",
"props": {
"backgroundColor": "default",
"textAlignment": "left",
Expand All @@ -327,7 +327,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
{
"children": [],
"content": [],
"id": 0,
"id": "0",
"props": {
"backgroundColor": "default",
"textAlignment": "left",
Expand All @@ -346,7 +346,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
"type": "text",
},
],
"id": 2,
"id": "2",
"props": {
"backgroundColor": "default",
"level": "1",
Expand All @@ -363,7 +363,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
"type": "text",
},
],
"id": 1,
"id": "1",
"props": {
"backgroundColor": "default",
"level": "1",
Expand All @@ -383,7 +383,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
"type": "text",
},
],
"id": 4,
"id": "4",
"props": {
"backgroundColor": "default",
"level": "2",
Expand All @@ -400,7 +400,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
"type": "text",
},
],
"id": 3,
"id": "3",
"props": {
"backgroundColor": "default",
"level": "2",
Expand All @@ -412,7 +412,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
{
"children": [],
"content": [],
"id": 5,
"id": "5",
"props": {
"backgroundColor": "default",
"textAlignment": "left",
Expand All @@ -436,7 +436,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
"type": "text",
},
],
"id": 2,
"id": "2",
"props": {
"backgroundColor": "default",
"level": "1",
Expand All @@ -453,7 +453,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
"type": "text",
},
],
"id": 1,
"id": "1",
"props": {
"backgroundColor": "default",
"level": "1",
Expand All @@ -473,7 +473,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
"type": "text",
},
],
"id": 4,
"id": "4",
"props": {
"backgroundColor": "default",
"level": "2",
Expand All @@ -490,7 +490,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
"type": "text",
},
],
"id": 3,
"id": "3",
"props": {
"backgroundColor": "default",
"level": "2",
Expand All @@ -502,7 +502,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
{
"children": [],
"content": [],
"id": 0,
"id": "0",
"props": {
"backgroundColor": "default",
"textAlignment": "left",
Expand All @@ -528,7 +528,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
"type": "text",
},
],
"id": 2,
"id": "2",
"props": {
"backgroundColor": "default",
"level": "1",
Expand All @@ -545,7 +545,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
"type": "text",
},
],
"id": 1,
"id": "1",
"props": {
"backgroundColor": "default",
"level": "1",
Expand All @@ -565,7 +565,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
"type": "text",
},
],
"id": 4,
"id": "4",
"props": {
"backgroundColor": "default",
"level": "2",
Expand All @@ -582,7 +582,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
"type": "text",
},
],
"id": 3,
"id": "3",
"props": {
"backgroundColor": "default",
"level": "2",
Expand All @@ -593,7 +593,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
},
],
"content": [],
"id": 0,
"id": "0",
"props": {
"backgroundColor": "default",
"textAlignment": "left",
Expand All @@ -604,7 +604,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
{
"children": [],
"content": [],
"id": 5,
"id": "5",
"props": {
"backgroundColor": "default",
"textAlignment": "left",
Expand Down
Loading