Obsidian E-Ink CSS Snippet

typewriter.css

/* =========================================================
   OBSIDIAN E-INK THEME
   ========================================================= */


/* ---------------------------------------------------------
   CORE COLORS
   --------------------------------------------------------- */

body {
    /* Text */
    --text-normal: #000000;
    --text-muted: #222222;
    --text-faint: #444444;

    /* Backgrounds */
    --background-primary: #ffffff;
    --background-primary-alt: #ffffff;
    --background-secondary: #ffffff;
    --background-secondary-alt: #ffffff;

    /* Borders */
    --background-modifier-border: #999999;
    --background-modifier-border-hover: #666666;
    --background-modifier-border-focus: #000000;

    /* Hover / active */
    --background-modifier-hover: #eeeeee;
    --background-modifier-active-hover: #dddddd;

    /* Links */
    --link-color: #000000;
    --link-color-hover: #000000;
    --link-external-color: #000000;
    --link-external-color-hover: #000000;

    /* Headings */
    --h1-color: #000000;
    --h2-color: #000000;
    --h3-color: #000000;
    --h4-color: #000000;
    --h5-color: #000000;
    --h6-color: #000000;

    /* Code */
    --code-normal: #000000;
    --code-background: #f2f2f2;

    /* Selection / highlighting */
    --text-selection: #cccccc;
    --text-highlight-bg: #dddddd;

    /* Menus */
    --menu-background: #ffffff;

    /* Unresolved / incomplete links */
    --link-unresolved-color: #000000;
    --link-unresolved-decoration-color: #000000;
    --link-unresolved-opacity: 1;
}


/* ---------------------------------------------------------
   PURE WHITE MAIN SURFACES
   --------------------------------------------------------- */

.workspace,
.workspace-leaf,
.workspace-leaf-content,
.view-content,
.markdown-source-view,
.markdown-reading-view,
.markdown-preview-view,
.cm-editor,
.cm-scroller,
.cm-content {
    background-color: #ffffff;
}


/* ---------------------------------------------------------
   NOTE TEXT
   --------------------------------------------------------- */

.markdown-source-view,
.markdown-reading-view,
.markdown-preview-view {
    color: #000000;
}


/* ---------------------------------------------------------
   CARET
   --------------------------------------------------------- */

.markdown-source-view.mod-cm6 .cm-content {
    caret-shape: underscore;
    caret-animation: manual;
    caret-color: #000000;
}

/* Note title caret */
.inline-title {
    caret-shape: underscore;
    caret-animation: manual;
    caret-color: #000000 !important;
}


/* ---------------------------------------------------------
   LINKS
   --------------------------------------------------------- */

.markdown-source-view a,
.markdown-reading-view a,
.markdown-preview-view a,
.cm-hmd-internal-link,
.cm-link,
.cm-url {
    color: #000000;
}

.markdown-reading-view a,
.markdown-preview-view a,
.cm-hmd-internal-link {
    text-decoration: underline;
}


/* ---------------------------------------------------------
   TEXT SELECTION
   --------------------------------------------------------- */

::selection {
    background-color: #cccccc;
    color: #000000;
}

.cm-selectionBackground,
.cm-focused .cm-selectionBackground {
    background-color: #cccccc !important;
}


/* =========================================================
   CONTEXT MENUS
   Critical for Android / BOOX
   ========================================================= */

.menu,
.is-mobile .menu,
.is-phone .menu,
.is-tablet .menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}


/* Every menu item must itself be white */

.menu .menu-item,
.is-mobile .menu .menu-item,
.is-phone .menu .menu-item,
.is-tablet .menu .menu-item {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}


/* Everything contained inside a menu item */

.menu .menu-item *,
.is-mobile .menu .menu-item *,
.is-phone .menu .menu-item *,
.is-tablet .menu .menu-item * {
    color: #000000 !important;
}


/* Explicitly cover title / icon / shortcut */

.menu-item-title,
.menu-item-icon,
.menu-item-hotkey {
    color: #000000 !important;
}


/* Pressed / selected items */

.menu .menu-item:hover,
.menu .menu-item.is-selected,
.menu .menu-item:active,
.is-mobile .menu .menu-item:hover,
.is-mobile .menu .menu-item.is-selected,
.is-mobile .menu .menu-item:active {
    background: #dddddd !important;
    background-color: #dddddd !important;
    color: #000000 !important;
}


/* Menu separators */

.menu-separator {
    border-color: #999999 !important;
}


/* =========================================================
   BUTTONS
   Prevent dark-theme buttons surviving inside light UI
   ========================================================= */

button:not(.clickable-icon),
.mod-cta {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #888888 !important;
}

button:not(.clickable-icon):hover,
button:not(.clickable-icon):active,
.mod-cta:hover,
.mod-cta:active {
    background: #dddddd !important;
    background-color: #dddddd !important;
    color: #000000 !important;
}


/* ---------------------------------------------------------
   POPOVERS / SUGGESTIONS
   --------------------------------------------------------- */

.popover,
.suggestion-container {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.suggestion-item {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.suggestion-item.is-selected {
    background-color: #dddddd !important;
    color: #000000 !important;
}


/* ---------------------------------------------------------
   MODALS
   --------------------------------------------------------- */

.modal {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.modal-container {
    --background-primary: #ffffff;
    --background-secondary: #ffffff;
    --text-normal: #000000;
    --text-muted: #222222;
}


/* ---------------------------------------------------------
   INPUTS / SEARCH
   --------------------------------------------------------- */

input,
textarea,
.search-input-container input {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #888888 !important;
}

input::placeholder,
textarea::placeholder {
    color: #555555 !important;
}


/* ---------------------------------------------------------
   SCROLLBARS
   --------------------------------------------------------- */

::-webkit-scrollbar {
    background-color: #ffffff;
}

::-webkit-scrollbar-thumb {
    background-color: #999999;
}


/* ---------------------------------------------------------
   DISABLE ANIMATIONS / TRANSITIONS
   --------------------------------------------------------- */

*,
*::before,
*::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}