obsidian-theme/nnniv_palenight.obsidian
1
0
Fork 0
mirror of https://github.com/nnniv/palenight.obsidian.git synced 2026-07-22 04:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
nnniv_palenight.obsidian/theme.css
nnniv 11f0a6d195 chore(release): bump version to 1.0.1
2026-07-19 14:58:12 +05:30

776 lines
16 KiB
CSS
Raw Permalink Blame History

/* Theme color variables */
:root {
--color-mkp-light: #f0edec;
--color-mkp-night: #1a1b2a;
--color-mkp-night-lighter: #242839;
--color-mkp-purple: #ab9df2;
--color-mkp-red: #ff6188;
--color-mkp-blue: #78dce8;
--color-mkp-green: #a9dc76;
--color-mkp-yellow: #ffd866;
--color-mkp-orange: #fc9867;
--color-mkp-comment: #727072;
--color-mkp-property: #fcfcfa;
--color-mkp-punctuation: #939293;
--color-mkp-special: #c1c0c0;
--color-mkp-inline-code-bg: #2d3144;
--color-mkp-codeblock-bg: #232735;
}
/* Theme color mappings */
.theme-dark {
--background-primary: var(--color-mkp-night);
--background-secondary: var(--color-mkp-night);
--code-background: var(--color-mkp-night-lighter);
}
/* Typography and radius tokens */
body {
--font-text-theme: "Geist";
--font-monospace: "JetBrainsMono Nerd Font";
--radius-s: 0px;
--radius-m: 0px;
--radius-l: 0px;
--input-radius: 0px;
--tab-radius-active: 0px;
--checkbox-radius: 0px;
--toggle-radius: 0px;
--toggle-thumb-radius: 0px;
--slider-thumb-radius: 0px;
}
/* Navigation: folder titles and indicators */
.nav-folder-title-content {
color: var(--color-mkp-purple);
display: flex;
align-items: center;
gap: 0.45rem;
}
.nav-folder-title-content::before {
content: "";
width: 8px;
height: 8px;
flex-shrink: 0;
}
.nav-folder:not(.is-collapsed)>.nav-folder-title .nav-folder-title-content::before {
background: var(--color-mkp-red);
}
.nav-folder.is-collapsed>.nav-folder-title .nav-folder-title-content::before {
background: var(--color-mkp-purple);
}
/* Navigation: file titles */
.nav-file-title-content {
color: var(--color-mkp-light);
display: flex;
align-items: center;
gap: 0.45rem;
}
.nav-file-title-content::before {
content: "";
width: 8px;
height: 8px;
background-color: var(--color-mkp-orange);
flex-shrink: 0;
}
/* Workspace containers */
.workspace-tabs.mod-top,
.workspace-tab-header-container.workspace-tab-header-container {
background-color: var(--color-mkp-night);
}
.is-focused .workspace-tab-header-container {
background-color: var(--color-mkp-night);
}
.sidebar-toggle-button.sidebar-toggle-button {
background-color: var(--color-mkp-night);
}
.setting-items.setting-items {
background-color: var(--color-mkp-night);
}
/* Inline title decoration */
.inline-title {
color: var(--color-mkp-red);
display: flex;
align-items: center;
justify-content: space-between;
}
.inline-title::after {
content: "";
width: 44px;
height: 12px;
display: inline-block;
background-repeat: no-repeat;
background-size:
12px 12px,
12px 12px,
12px 12px;
background-position:
0 0,
16px 0,
32px 0;
background-image:
linear-gradient(var(--color-mkp-purple), var(--color-mkp-purple)),
linear-gradient(var(--color-mkp-red), var(--color-mkp-red)),
linear-gradient(var(--color-mkp-orange), var(--color-mkp-orange));
}
/* Menu spacing */
.menu {
padding: var(--size-2-1);
}
.menu-item {
padding: var(--size-4-1) var(--size-4-2);
}
.menu-separator {
margin: var(--size-2-1) calc(var(--size-2-1) * -1);
}
/* Form controls: dropdowns and options */
option {
color: var(--color-mkp-purple);
border: transparent;
}
.setting-item-control select.dropdown,
select.dropdown {
-webkit-appearance: none;
appearance: none;
color: var(--color-mkp-purple);
box-shadow: none;
padding-right: 2.2rem;
background: var(--color-mkp-night-lighter) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ab9df2' d='M6 9l6 6 6-6z'/%3E%3C/svg%3E") no-repeat right 0.6rem center / 18px 18px;
}
.dropdown:hover {
background-color: var(--color-mkp-blue);
}
/* Form controls: inputs and checkboxes */
body input {
background-color: var(--color-mkp-night);
color: var(--color-mkp-purple);
}
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
outline: none;
box-shadow: none;
}
input[type="range"],
.slider.slider {
background-color: var(--color-mkp-purple);
}
input[type="range"]::-webkit-slider-thumb,
.slider.slider::-webkit-slider-thumb {
-webkit-appearance: none
/* Crucial: removes default OS styling */
;
appearance: none;
/* Change this variable to whichever color you want the knob to be */
background-color: var(--color-mkp-red);
/* Optional: Obsidian sometimes adds a default border to thumbs, let's nuke it just in case */
border: none;
box-shadow: none;
}
.setting-group .setting-group-search {
background-color: var(--color-mkp-night);
}
/* Settings buttons */
.mod-cta.mod-cta,
.setting-items button {
background-color: var(--color-mkp-night-lighter);
color: var(--color-mkp-purple);
box-shadow: none;
}
.setting-item-name.setting-item-name {
color: var(--color-mkp-purple);
}
.setting-item-heading .setting-item-name {
color: var(--color-mkp-red);
}
/* Status and warnings */
.mod-warning.mod-warning {
color: var(--color-mkp-night);
background-color: var(--color-mkp-orange);
}
.modal-content>p:nth-child(3),
.modal-content>p:nth-child(4) {
color: var(--color-mkp-orange);
background-color: var(--color-mkp-night);
}
.mod-cancel.mod-cancel {
color: var(--color-mkp-night);
background-color: var(--color-mkp-red);
}
/* Callouts */
.callout[data-callout="info"] {
background-color: var(--color-mkp-night-lighter);
/*color: var(--color-mkp-purple) */
}
.callout[data-callout="info"] .callout-title {
color: var(--color-mkp-green);
}
.callout[data-callout="info"] svg {
color: var(--color-mkp-green);
}
.callout[data-callout="info"] a {
color: var(--color-mkp-red);
text-decoration: none;
}
/**/
.callout[data-callout="warning"] {
background-color: var(--color-mkp-night-lighter);
/*color: var(--color-mkp-purple) */
}
.callout[data-callout="warning"] .callout-title {
color: var(--color-mkp-orange);
}
.callout[data-callout="warning"] svg {
color: var(--color-mkp-orange);
}
.callout[data-callout="warning"] a {
color: var(--color-mkp-red);
text-decoration: none;
}
.callout a:hover {
text-decoration: underline;
}
/* NOTE: I use Media Extended plugin, not the native audio Chromium player*/
.audio-container,
.audio-container audio {
background-color: transparent;
}
.audio-container audio::-webkit-media-controls-panel {
background-color: var(--color-mkp-night-lighter);
}
.audio-container audio::-webkit-media-controls-current-time-display,
.audio-container audio::-webkit-media-controls-time-remaining-display {
color: var(--color-mkp-purple);
font-family: var(--font-monospace);
font-size: 0.8rem
/* <-- ADDED: Scales the text down */
;
}
.audio-container audio::-webkit-media-controls-timeline {
background-color: var(--color-mkp-night);
border-radius: 0px;
/* <-- ADDED: Margin acts as horizontal padding to space out the slider --> */
margin-left: 20px;
margin-right: 20px;
}
.audio-container audio::-webkit-media-controls-play-button,
.audio-container audio::-webkit-media-controls-mute-button {
/* Mathematically shifts the white SVGs into a pastel purple */
filter: invert(70%) sepia(30%) saturate(800%) hue-rotate(210deg) brightness(100%) contrast(90%);
}
.checkbox-container.checkbox-container {
position: relative;
display: inline-block;
vertical-align: middle;
--switch-width: 36px;
--switch-height: 20px;
--switch-padding: 2px;
--switch-border: 2px;
width: var(--switch-width);
height: var(--switch-height);
min-width: var(--switch-width);
min-height: var(--switch-height);
padding: 0;
border: none;
background-color: var(--color-mkp-night-lighter);
box-sizing: border-box;
border-radius: 0;
box-shadow: none
/* Nukes Obsidian container shadows */
;
overflow: hidden;
transition: background-color 0.15s ease;
}
.checkbox-container.is-enabled {
background-color: var(--color-mkp-night-lighter);
}
.checkbox-container.checkbox-container::before {
display: none;
}
.checkbox-container.checkbox-container::after {
content: "";
position: absolute;
top: calc(var(--switch-border) + var(--switch-padding));
left: calc(var(--switch-border) + var(--switch-padding));
width: calc(var(--switch-height) - (var(--switch-border) * 2) - (var(--switch-padding) * 2));
height: calc(var(--switch-height) - (var(--switch-border) * 2) - (var(--switch-padding) * 2));
background-color: var(--color-mkp-purple);
/* The Nuclear Resets */
border: none;
box-shadow: none
/* Kills default thumb drop shadow */
;
-webkit-mask: none
/* Kills modern Obsidian checkmark masks */
;
mask: none;
box-sizing: border-box;
margin: 0;
border-radius: 0;
transform: translateX(0);
transition: transform 0.15s ease;
}
.checkbox-container.is-enabled::after {
background-color: var(--color-mkp-red);
transform: translateX(calc(var(--switch-width) - var(--switch-height)));
}
/* Active tab header marker */
.workspace-tab-header.is-active::before,
.workspace-tab-header.is-active::after {
display: none;
}
/* SVG base styling */
svg * {
stroke-linecap: square;
stroke-linejoin: miter;
}
/* Icon colors */
.svg-icon.svg-icon,
.clickable-icon.clickable-icon {
color: var(--color-mkp-purple);
}
.svg-icon [stroke],
.clickable-icon svg [stroke] {
stroke: currentColor;
}
.svg-icon [fill]:not([fill="none"]),
.clickable-icon svg [fill]:not([fill="none"]) {
fill: currentColor;
}
/* CodeMirror: ligatures */
.cm-content {
font-variant-ligatures: contextual;
font-feature-settings: "calt", "liga";
}
code,
.cm-inline-code,
.markdown-rendered pre code {
font-variant-ligatures: contextual;
font-feature-settings: "calt", "liga";
}
/* CodeMirror: syntax highlighting */
.cm-header {
font-family: "JetBrainsMono Nerd Font";
}
.cm-header-1,
.cm-header-4 {
color: var(--color-mkp-red);
}
.cm-header-2,
.cm-header-5 {
color: var(--color-mkp-purple);
}
.cm-header-3,
.cm-header-6 {
color: var(--color-mkp-orange);
}
.cm-editor {
color: var(--color-mkp-light);
}
.cm-editor .cm-comment {
color: var(--color-mkp-comment);
font-style: italic;
}
.cm-editor .cm-keyword,
.cm-editor .cm-operator {
color: var(--color-mkp-red);
}
.cm-editor .cm-string,
.cm-editor .cm-string-2,
.cm-editor .cm-regexp {
color: var(--color-mkp-yellow);
}
.cm-editor .cm-number,
.cm-editor .cm-atom,
.cm-editor .cm-bool {
color: var(--color-mkp-purple);
}
.cm-editor .cm-def {
color: var(--color-mkp-purple);
}
.cm-editor .cm-function,
.cm-editor .cm-variableName.cm-function {
color: var(--color-mkp-green);
}
.cm-editor .cm-parameter,
.cm-editor .cm-variableName.cm-parameter {
color: var(--color-mkp-orange);
font-style: italic;
}
.cm-variable {
color: var(--color-mkp-light);
}
.cm-editor .cm-builtin,
.cm-editor .cm-variableName.cm-builtin {
color: var(--color-mkp-blue);
}
.cm-editor .cm-typeName,
.cm-editor .cm-className {
color: var(--color-mkp-blue);
font-style: italic;
}
.cm-editor .cm-variableName {
color: var(--color-mkp-light);
}
.cm-editor .cm-strong {
color: var(--color-mkp-red);
}
.cm-editor .cm-em {
color: var(--color-mkp-purple);
}
.cm-editor .cm-variableName.cm-definition {
color: var(--color-mkp-light);
}
.cm-editor .cm-variableName.cm-local {
color: var(--color-mkp-light);
font-style: italic;
}
.cm-editor .cm-property {
color: var(--color-mkp-green);
}
.cm-editor .cm-propertyName,
.cm-editor .cm-namespace,
.cm-editor .cm-interpolation {
color: var(--color-mkp-light);
}
.cm-editor .cm-tagName {
color: var(--color-mkp-red);
}
.cm-editor .cm-attributeName {
color: var(--color-mkp-blue);
font-style: italic;
}
.cm-editor .cm-attributeValue {
color: var(--color-mkp-yellow);
}
.cm-editor .cm-punctuation,
.cm-editor .cm-bracket {
color: var(--color-mkp-punctuation);
}
.cm-editor .cm-url {
color: var(--color-mkp-green);
}
.cm-editor .cm-special {
color: var(--color-mkp-special);
font-style: italic;
}
/* Code blocks and inline code */
.markdown-rendered pre,
.cm-editor .HyperMD-codeblock {
background-color: var(--color-mkp-codeblock-bg);
color: var(--color-mkp-property);
}
:not(pre)>code {
background-color: var(--color-mkp-inline-code-bg);
color: var(--color-mkp-orange);
}
.cm-editor .HyperMD-codeblock-begin {
border-radius: 12px 12px 0 0;
padding-top: 0.75rem;
}
.cm-editor .HyperMD-codeblock-end {
border-radius: 0 0 12px 12px;
padding-bottom: 0.75rem;
}
/* CodeMirror: code block overrides */
.cm-editor .HyperMD-codeblock .cm-function,
.cm-editor .HyperMD-codeblock .cm-variableName.cm-function {
color: var(--color-mkp-green);
}
.cm-editor .HyperMD-codeblock .cm-constant,
.cm-editor .HyperMD-codeblock .cm-variableName.cm-constant {
color: var(--color-mkp-purple);
}
.cm-editor .HyperMD-codeblock .cm-type,
.cm-editor .HyperMD-codeblock .cm-typeName,
.cm-editor .HyperMD-codeblock .cm-className {
color: var(--color-mkp-blue);
font-style: italic;
}
.cm-editor .HyperMD-codeblock .cm-punctuation {
color: var(--color-mkp-red);
}
.cm-editor .HyperMD-codeblock .cm-bracket,
.cm-editor .HyperMD-codeblock .cm-punctuation.cm-bracket {
color: var(--color-mkp-punctuation);
}
/* Code block flair */
.code-block-flair {
color: var(--color-mkp-blue);
opacity: 0.7;
}
.code-block-flair:hover {
opacity: 1;
}
/* Rendered Markdown: headings */
.markdown-rendered h1,
.markdown-rendered h4 {
color: var(--color-mkp-red);
}
.markdown-rendered h2,
.markdown-rendered h5 {
color: var(--color-mkp-purple);
}
.markdown-rendered h3,
.markdown-rendered h6 {
color: var(--color-mkp-orange);
}
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
font-family: var(--font-monospace);
}
/* Rendered Markdown: print */
@media print {
@page {
margin: 0px;
}
body {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
body,
.print .markdown-preview-view,
.markdown-rendered {
background-color: var(--color-mkp-night);
color: var(--color-mkp-light);
}
}
strong {
color: var(--color-mkp-red);
}
em {
color: var(--color-mkp-purple);
}
/* Rendered Markdown: copy button */
.copy-code-button button {
background-color: var(--color-mkp-night-lighter);
}
.copy-code-button svg {
background-color: var(--color-mkp-night-lighter);
color: var(--color-mkp-purple);
}
/* Rendered Markdown: syntax highlighting */
.markdown-rendered code[class*="language-"] {
color: var(--color-mkp-property);
}
.markdown-rendered .token.comment {
color: var(--color-mkp-comment);
font-style: italic;
}
.markdown-rendered .token.keyword,
.markdown-rendered .token.operator {
color: var(--color-mkp-red);
}
.markdown-rendered .token.string {
color: var(--color-mkp-yellow);
}
.markdown-rendered .token.number,
.markdown-rendered .token.boolean {
color: var(--color-mkp-purple);
}
.markdown-rendered .token.function {
color: var(--color-mkp-green);
}
.markdown-rendered .token.class-name {
color: var(--color-mkp-blue);
font-style: italic;
}
.markdown-rendered .token.property {
color: var(--color-mkp-property);
}
.markdown-rendered .token.tag {
color: var(--color-mkp-red);
}
.markdown-rendered .token.attr-name {
color: var(--color-mkp-blue);
font-style: italic;
}
.markdown-rendered .token.attr-value {
color: var(--color-mkp-yellow);
}
.markdown-rendered .token.punctuation {
color: var(--color-mkp-punctuation);
}
.markdown-rendered .token.url {
color: var(--color-mkp-green);
}
/* Rendered Markdown: extended token highlighting */
.markdown-rendered .token.constant,
.markdown-rendered .token.variable.constant {
color: var(--color-mkp-purple);
}
.markdown-rendered .token.parameter {
color: var(--color-mkp-orange);
font-style: italic;
}
.markdown-rendered .token.builtin {
color: var(--color-mkp-blue);
}
/* Rendered Markdown: extended token variants */
.markdown-rendered .token.variable,
.markdown-rendered .token.property-access,
.markdown-rendered .token.module,
.markdown-rendered .token.interpolation,
.markdown-rendered .token.interpolation-punctuation {
color: var(--color-mkp-light);
}
/* Community Plugins */
.community-item.tappable.is-selected {
color: var(--color-mkp-night);
}
.community-item.tappable.is-selected * {
color: inherit;
}
.community-modal-button-container>button:nth-child(2) {
color: var(--color-mkp-night);
background-color: var(--color-mkp-red);
}
.community-modal-button-container>button:nth-child(3) {
color: var(--color-mkp-night);
background-color: var(--color-mkp-orange);
}
Reference in a new issue View git blame Copy permalink