Skip to content

notion.so - basic boost (dark) by auggiebog

Screenshot of notion.so - basic boost (dark)

Details

Authorauggiebog

LicenseNo License

Categorynotion.so

Created

Updated

Size131 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

based off notion-enhancer themes, edited for more block color support + a brighter dark theme

Notes

this file is made using the theme.css and variables.css files from the notion-enhancer repo. i have edited it to add bg color support to quotes, headings, page links, and more ! currently only dark theme colors have been edited ahead, it is close to default with slightly brighter colors + better overlap.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           notion.so - basic boost (dark)
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    based off the theme.css and variables.css files from the notion-enhancer repo. i have edited it to add bg color support to quotes, headings, and more ! currently only dark theme colors have been edited ahead, close to default just with a boost in color.
@author         x
==/UserStyle== */
@-moz-document url-prefix("www.notion.so/") {
    /* Insert code here... */
}

/**
 * notion-enhancer
 * (c) 2023 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
 * (https://notion-enhancer.github.io/) under the MIT license
 * edited by august / x !
 */

/* below are the colors for the dark theme ! here is what they do:
	* fg primary and secondary are the "default" text color
	* fg border is the line that separates the sidebar background from the content
	* the fg colors are the selectable font colors !

	*bg primary and secondary are the site background and sidebar background
	*bg hover i think is like, the highlight on the buttons on the side?
	*bg overlay is the color put behind the settings / peek views
	*the bg colors are the font bg colors and the tag bg colors

	*the dim colors are the bg colors for callout blocks, quotes, headings, and kanban cards */

body.dark {
  --theme--font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
    "Segoe UI Emoji", "Segoe UI Symbol";
  --theme--font-serif: Lyon-Text, Georgia, ui-serif, serif;
  --theme--font-mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
  --theme--font-code: "SFMono-Regular", Menlo, Consolas, "PT Mono",
    "Liberation Mono", Courier, monospace;

  --theme--fg-primary: rgba(255, 255, 255, 0.81);
  --theme--fg-secondary: rgb(155, 155, 155);
  --theme--fg-border: rgb(47, 47, 47);
  --theme--fg-gray: rgba(155, 155, 155, 1);
  --theme--fg-brown: rgba(186, 133, 111, 1);
  --theme--fg-orange: rgba(199, 125, 72, 1);
  --theme--fg-yellow: rgba(202, 152, 73, 1);
  --theme--fg-green: hsl(145, 32%, 44%);
  --theme--fg-blue: rgba(94, 135, 201, 1);
  --theme--fg-purple: rgba(157, 104, 211, 1);
  --theme--fg-pink: rgba(209, 87, 150, 1);
  --theme--fg-red: rgba(223, 84, 82, 1);

  --theme--bg-primary: hsl(0, 0%, 5%);
  --theme--bg-secondary: hsl(0, 0%, 10%);
  --theme--bg-hover: rgba(255, 255, 255, 0.055);
  --theme--bg-overlay: rgba(15, 15, 15, 0.8);
  --theme--bg-light_gray: rgb(55, 55, 55);
  --theme--bg-gray: rgb(90, 90, 90);
  --theme--bg-brown: hsl(17, 40%, 25%);
  --theme--bg-orange: hsl(27, 53%, 32%);
  --theme--bg-yellow: hsl(36, 53%, 33%);
  --theme--bg-green: hsl(146, 45%, 22%);
  --theme--bg-blue: hsl(214, 45%, 27%);
  --theme--bg-purple: hsl(269, 45%, 26%);
  --theme--bg-pink: hsl(331, 45%, 28%);
  --theme--bg-red: hsl(6, 45%, 26%);

  --theme--dim-light_gray: hsla(0, 0%, 24%, .7);
  --theme--dim-gray: hsla(0, 2%, 20%, .7);
  --theme--dim-brown: hsla(17, 40%, 20%, .7);
  --theme--dim-orange: hsla(24, 40%, 20%, .7);
  --theme--dim-yellow: hsla(33, 40%, 20%, .7);
  --theme--dim-green: hsla(156, 40%, 20%, .7);
  --theme--dim-blue: hsla(206, 40%, 20%, .7);
  --theme--dim-purple: hsla(270, 40%, 20%, .7);
  --theme--dim-pink: hsla(334, 40%, 20%, .7);
  --theme--dim-red: hsla(9, 40%, 20%, .7);

  --theme--accent-primary: rgb(35, 131, 226);
  --theme--accent-primary_hover: rgb(0, 117, 211);
  --theme--accent-primary_contrast: rgb(255, 255, 255);
  --theme--accent-primary_transparent: rgba(35, 131, 226, 0.14);
  --theme--accent-secondary: rgb(235, 87, 87);
  --theme--accent-secondary_hover: rgba(235, 87, 87, 0.1);
  --theme--accent-secondary_contrast: white;

  --theme--scrollbar-track: rgba(202, 204, 206, 0.04);
  --theme--scrollbar-thumb: #474c50;
  --theme--scrollbar-thumb_hover: rgba(202, 204, 206, 0.3);

  --theme--code-inline_fg: #eb5757;
  --theme--code-inline_bg: rgba(135, 131, 120, 0.15);
  --theme--code-block_fg: rgba(255, 255, 255, 0.81);
  --theme--code-block_bg: rgba(255, 255, 255, 0.03);
  --theme--code-keyword: rgb(209, 148, 158);
  --theme--code-builtin: rgb(189, 224, 82);
  --theme--code-class_name: rgba(255, 255, 255, 0.81);
  --theme--code-function: var(--theme--code-class_name);
  --theme--code-boolean: var(--theme--code-keyword);
  --theme--code-number: var(--theme--code-keyword);
  --theme--code-string: var(--theme--code-builtin);
  --theme--code-char: var(--theme--code-builtin);
  --theme--code-symbol: var(--theme--code-keyword);
  --theme--code-regex: rgb(238, 153, 0);
  --theme--code-url: rgb(245, 184, 61);
  --theme--code-operator: var(--theme--code-url);
  --theme--code-variable: var(--theme--code-url);
  --theme--code-constant: var(--theme--code-keyword);
  --theme--code-property: var(--theme--code-keyword);
  --theme--code-punctuation: var(--theme--code-class_name);
  --theme--code-important: var(--theme--code-regex);
  --theme--code-comment: rgb(153, 128, 102);
  --theme--code-tag: var(--theme--code-keyword);
  --theme--code-attr_name: var(--theme--code-builtin);
  --theme--code-attr_value: var(--theme--code-keyword);
  --theme--code-namespace: var(--theme--code-class_name);
  --theme--code-prolog: var(--theme--code-comment);
  --theme--code-doctype: var(--theme--code-comment);
  --theme--code-cdata: var(--theme--code-comment);
  --theme--code-entity: var(--theme--code-url);
  --theme--code-atrule: var(--theme--code-keyword);
  --theme--code-selector: var(--theme--code-builtin);
  --theme--code-inserted: var(--theme--code-builtin);
  --theme--code-deleted: rgb(255, 0, 0);
}

body:not(.dark) {
  --theme--font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
    "Segoe UI Emoji", "Segoe UI Symbol";
  --theme--font-serif: Lyon-Text, Georgia, ui-serif, serif;
  --theme--font-mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
  --theme--font-code: "SFMono-Regular", Menlo, Consolas, "PT Mono",
    "Liberation Mono", Courier, monospace;

  --theme--fg-primary: rgb(55, 53, 47);
  --theme--fg-secondary: rgba(25, 23, 17, 0.6);
  --theme--fg-border: rgb(233, 233, 231);
  --theme--fg-gray: rgba(120, 119, 116, 1);
  --theme--fg-brown: rgba(159, 107, 83, 1);
  --theme--fg-orange: rgba(217, 115, 13, 1);
  --theme--fg-yellow: rgba(203, 145, 47, 1);
  --theme--fg-green: rgba(68, 131, 97, 1);
  --theme--fg-blue: rgba(51, 126, 169, 1);
  --theme--fg-purple: rgba(144, 101, 176, 1);
  --theme--fg-pink: rgba(193, 76, 138, 1);
  --theme--fg-red: rgba(212, 76, 71, 1);

  --theme--bg-primary: white;
  --theme--bg-secondary: rgb(251, 251, 250);
  --theme--bg-hover: rgba(55, 53, 47, 0.08);
  --theme--bg-overlay: rgba(15, 15, 15, 0.6);
  --theme--bg-light_gray: rgba(227, 226, 224, 0.5);
  --theme--bg-gray: rgb(227, 226, 224);
  --theme--bg-brown: rgb(238, 224, 218);
  --theme--bg-orange: rgb(250, 222, 201);
  --theme--bg-yellow: rgb(253, 236, 200);
  --theme--bg-green: rgb(219, 237, 219);
  --theme--bg-blue: rgb(211, 229, 239);
  --theme--bg-purple: rgb(232, 222, 238);
  --theme--bg-pink: rgb(245, 224, 233);
  --theme--bg-red: rgb(255, 226, 221);

  --theme--dim-light_gray: rgba(249, 249, 245, 0.5);
  --theme--dim-gray: rgba(247, 247, 245, 0.7);
  --theme--dim-brown: rgba(250, 246, 245, 0.7);
  --theme--dim-orange: rgba(252, 245, 242, 0.7);
  --theme--dim-yellow: rgba(250, 247, 237, 0.7);
  --theme--dim-green: rgba(244, 248, 243, 0.7);
  --theme--dim-blue: rgba(241, 248, 251, 0.7);
  --theme--dim-purple: rgba(249, 246, 252, 0.7);
  --theme--dim-pink: rgba(251, 245, 251, 0.7);
  --theme--dim-red: rgba(253, 245, 243, 0.7);

  --theme--accent-primary: rgb(35, 131, 226);
  --theme--accent-primary_hover: rgb(0, 117, 211);
  --theme--accent-primary_contrast: rgb(255, 255, 255);
  --theme--accent-primary_transparent: rgba(35, 131, 226, 0.14);
  --theme--accent-secondary: rgb(235, 87, 87);
  --theme--accent-secondary_hover: rgba(235, 87, 87, 0.1);
  --theme--accent-secondary_contrast: white;

  --theme--scrollbar-track: #edece9;
  --theme--scrollbar-thumb: #d3d1cb;
  --theme--scrollbar-thumb_hover: #aeaca6;

  --theme--code-inline_fg: #eb5757;
  --theme--code-inline_bg: rgba(135, 131, 120, 0.15);
  --theme--code-block_fg: rgb(55, 53, 47);
  --theme--code-block_bg: rgb(247, 246, 243);
  --theme--code-keyword: rgb(0, 119, 170);
  --theme--code-builtin: rgb(102, 153, 0);
  --theme--code-class_name: rgb(221, 74, 104);
  --theme--code-function: var(--theme--code-class_name);
  --theme--code-boolean: rgb(153, 0, 85);
  --theme--code-number: var(--theme--code-boolean);
  --theme--code-string: var(--theme--code-builtin);
  --theme--code-char: var(--theme--code-builtin);
  --theme--code-symbol: var(--theme--code-boolean);
  --theme--code-regex: rgb(238, 153, 0);
  --theme--code-url: rgb(154, 110, 58);
  --theme--code-operator: var(--theme--code-url);
  --theme--code-variable: var(--theme--code-regex);
  --theme--code-constant: var(--theme--code-boolean);
  --theme--code-property: var(--theme--code-boolean);
  --theme--code-punctuation: rgb(153, 153, 153);
  --theme--code-important: var(--theme--code-regex);
  --theme--code-comment: rgb(112, 128, 144);
  --theme--code-tag: var(--theme--code-boolean);
  --theme--code-attr_name: var(--theme--code-builtin);
  --theme--code-attr_value: var(--theme--code-keyword);
  --theme--code-namespace: rgb(55, 53, 47);
  --theme--code-prolog: var(--theme--code-comment);
  --theme--code-doctype: var(--theme--code-comment);
  --theme--code-cdata: var(--theme--code-comment);
  --theme--code-entity: var(--theme--code-url);
  --theme--code-atrule: var(--theme--code-keyword);
  --theme--code-selector: var(--theme--code-builtin);
  --theme--code-inserted: var(--theme--code-builtin);
  --theme--code-deleted: var(--theme--code-boolean);
}
.notion-body.dark :is([style^="color: rgba(255,255,255,0.81)"], [style^="color:rgba(255, 255, 255, 0.81)"], [style*=";color: rgba(255, 255, 255, 0.81)"], [style*=";color:rgba(255, 255, 255, 0.81)"], [style*=" co...

Reviews

No reviews yet.