Search

Search IconIcon to open search

Kanagawa

Last updated Oct 24, 2024

It’s my favorite Color Theme, it’s a mix between  gruvbox and  tokyonight!, announced  on Reddit.

I even created my own Obsidian Theme.

# Color Palette

(from GitHub - rebelot/kanagawa.nvim: NeoVim dark colorscheme inspired by the colors of the famous painting by Katsushika Hokusai.)

Name Hex Usage
fujiWhite #DCD7BA Default foreground
oldWhite #C8C093 Dark foreground (statuslines)
sumiInk0 #16161D Dark background (statuslines and floating windows)
sumiInk1 #1F1F28 Default background
sumiInk2 #2A2A37 Lighter background (colorcolumn, folds)
sumiInk3 #363646 Lighter background (cursorline)
sumiInk4 #54546D Darker foreground (line numbers, fold column, non-text characters), float borders
waveBlue1 #223249 Popup background, visual selection background
waveBlue2 #2D4F67 Popup selection background, search background
winterGreen #2B3328 Diff Add (background)
winterYellow #49443C Diff Change (background)
winterRed #43242B Diff Deleted (background)
winterBlue #252535 Diff Line (background)
autumnGreen #76946A Git Add
autumnRed #C34043 Git Delete
autumnYellow #DCA561 Git Change
samuraiRed #E82424 Diagnostic Error
roninYellow #FF9E3B Diagnostic Warning
waveAqua1 #6A9589 Diagnostic Info
dragonBlue #658594 Diagnostic Hint
fujiGray #727169 Comments
springViolet1 #938AA9 Light foreground
oniViolet #957FB8 Statements and Keywords
crystalBlue #7E9CD8 Functions and Titles
springViolet2 #9CABCA Brackets and punctuation
springBlue #7FB4CA Specials and builtin functions
lightBlue #A3D4D5 Not used
waveAqua2 #7AA89F Types
springGreen #98BB6C Strings
boatYellow1 #938056 Not used
boatYellow2 #C0A36E Operators, RegEx
carpYellow #E6C384 Identifiers
sakuraPink #D27E99 Numbers
waveRed #E46876 Standout specials 1 (builtin variables)
peachRed #FF5D62 Standout specials 2 (exception handling, return)
surimiOrange #FFA066 Constants, imports, booleans
katanaGray
#717C7C Deprecated

# My Obsidian Kanagawa

See latest

See latest on obsidian_kanagawa/theme.css at main · sspaeti/obsidian_kanagawa · GitHub

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
:root
{
    /* DARK THEME */
    /* Kanagawa from https://github.com/rebelot/kanagawa.nvim */
    /* Bg Shades*/
    --sumiInk0      : #16161D;
    --sumiInk1b     : #181820;
    --sumiInk1      : #1F1F28;
    --sumiInk2      : #2A2A37;
    --sumiInk3      : #363646;
    --sumiInk4      : #54546D;

    /* Popup and Floats*/
    --waveBlue1     : #223249;
    --waveBlue2     : #2D4F67;

    /* Diff and Git*/
    --winterGreen   : #2B3328;
    --winterYellow  : #49443C;
    --winterRed     : #43242B;
    --winterBlue    : #252535;
    --autumnGreen   : #76946A;
    --autumnRed     : #C34043;
    --autumnYellow  : #DCA561;

    /* Diag*/
    --samuraiRed    : #E82424;
    --roninYellow   : #FF9E3B;
    --waveAqua1     : #6A9589;
    --dragonBlue    : #658594;

    /* Fg and Comments*/
    --oldWhite      : #C8C093;
    --fujiWhite     : #DCD7BA;
    --fujiGray      : #727169;
    --springViolet1 : #938AA9;

    --oniViolet     : #957FB8;
    --crystalBlue   : #7E9CD8;
    --springViolet2 : #9CABCA;
    --springBlue    : #7FB4CA;
    --lightBlue     : #A3D4D5; /* unused yet*/
    --waveAqua2     : #7AA89F; /* improve lightness: desaturated greenish Aqua*/

    --springGreen   : #98BB6C;
    --boatYellow1   : #938056;
    --boatYellow2   : #C0A36E;
    --carpYellow    : #E6C384;

    --sakuraPink    : #D27E99;
    --waveRed       : #E46876;
    --peachRed      : #FF5D62;
    --surimiOrange  : #FFA066;
    --katanaGray    : #717C7C;

    /* Gruvbox from https://github.com/insanum/obsidian_gruvbox */
    --dark0-hard:     #1d2021;
    --dark0:          #282828;
    --dark0-soft:     #32302f;
    --dark1:          #3c3836;
    --dark2:          #504945;
    --dark3:          #665c54;
    --dark4:          #7c6f64;

    --gray:           #928374;

    --light0-hard:    #f9f5d7;
    --light0:         #fbf1c7;
    --light0-soft:    #f2e5bc;
    --light1:         #ebdbb2;
    --light2:         #d5c4a1;
    --light3:         #bdae93;
    --light4:         #a89984;

    --bright-red:     #fb4934;
    --bright-green:   #b8bb26;
    --bright-yellow:  #fabd2f;
    --bright-blue:    #83a598;
    --bright-purple:  #d3869b;
    --bright-aqua:    #8ec07c;
    --bright-orange:  #fe8019;

    --neutral-red:    #cc241d;
    --neutral-green:  #98971a;
    --neutral-yellow: #d79921;
    --neutral-blue:   #458588;
    --neutral-purple: #b16286;
    --neutral-aqua:   #689d6a;
    --neutral-orange: #d65d0e;

    --faded-red:      #9d0006;
    --faded-green:    #79740e;
    --faded-yellow:   #b57614;
    --faded-blue:     #076678;
    --faded-purple:   #8f3f71;
    --faded-aqua:     #427b58;
    --faded-orange:   #af3a03;


    /* LIGHT THEME */
    /* Called Kanagawa Lotus - Colors */
    --lotusInk1: #545464;
    --lotusInk2: #43436c;
    --lotusGray: #dcd7ba;
    --lotusGray2: #716e61;
    --lotusGray3: #8a8980;
    --lotusWhite0: #d5cea3;
    --lotusWhite1: #dcd5ac;
    --lotusWhite2: #e5ddb0;
    --lotusWhite3: #f2ecbc;
    --lotusWhite4: #e7dba0;
    --lotusWhite5: #e4d794;
    --lotusViolet1: #a09cac;
    --lotusViolet2: #766b90;
    --lotusViolet3: #c9cbd1;
    --lotusViolet4: #624c83;
    --lotusBlue1: #c7d7e0;
    --lotusBlue2: #b5cbd2;
    --lotusBlue3: #9fb5c9;
    --lotusBlue4: #4d699b;
    --lotusBlue5: #5d57a3;
    --lotusGreen: #6f894e;
    --lotusGreen2: #6e915f;
    --lotusGreen3: #b7d0ae;
    --lotusPink: #b35b79;
    --lotusOrange: #cc6d00;
    --lotusOrange2: #e98a00;
    --lotusYellow: #77713f;
    --lotusYellow2: #836f4a;
    --lotusYellow3: #de9800;
    --lotusYellow4: #f9d791;
    --lotusRed: #c84053;
    --lotusRed2: #d7474b;
    --lotusRed3: #e82424;
    --lotusRed4: #d9a594;
    --lotusAqua: #597b75;
    --lotusAqua2: #5e857a;
    --lotusTeal1: #4e8ca2;
    --lotusTeal2: #6693bf;
    --lotusTeal3: #5a7785;
    --lotusCyan: #d7e3d8;


}

.theme-dark
{
    --background-primary:         var(--sumiInk1);
    --background-primary-alt:     var(--sumiInk1);
    --background-secondary:       var(--sumiInk1b);
    --background-secondary-alt:   var(--sumiInk2);
    --text-normal:                var(--fujiWhite);
    --text-faint:                 var(--fujiGray);
    --text-title-h1:              var(--neutral-red);
    --text-title-h2:              var(--neutral-orange);
    --text-title-h3:              var(--neutral-yellow);
    --text-title-h4:              var(--neutral-green);
    --text-title-h5:              var(--neutral-aqua);
    --text-title-h6:              var(--neutral-blue);
    --text-link:                  var(--springBlue);
    --text-a:                     var(--dragonBlue);
    --text-a-hover:               var(--peachRed);
    --text-a-url:                 var(--dragonBlue); /*hover internal link, graph view link and standalone links*. External Links no*/
    --text-mark:                  rgba(34, 50, 73, 0.4); /* waveBlue1 */
    --pre-code:                   var(--sumiInk0);
    --text-highlight-bg:          var(--waveBlue1);
    --interactive-accent:         var(--dragonBlue); /* vim cursor background AND highilight on right*/
    --interactive-before:         var(--sumiInk4);
    --background-modifier-border: var(--dragonBlue);
    --text-accent:                var(--autumnGreen);
    --interactive-accent-rgb:     var(--springGreen);
    --inline-code:                var(--springGreen);
    --code-block:                 var(--fujiGray);
    --vim-cursor-backgroung:      var(--fujiWhite);
    --vim-cursor-color:           var(--sumiInk1);
    --text-selection:             rgba(34, 50, 73, 0.5); /* waveBlue1 */
    --text-tag:                   var(--springViolet1);
    --task-checkbox:              var(--sumiInk4);
    --table-header:               hsl(0, 0%, 14%);
    --table-row-even:             hsl(0, 0%, 17%);
    --table-row-odd:              hsl(0, 0%, 20%);
    --table-hover:                var(--sumiInk2);
    --bold-color:                 var(--light1);
}

.theme-light {
    --background-primary:         var(--lotusWhite3);
    --background-primary-alt:     var(--lotusWhite4);
    --background-secondary:       var(--lotusWhite1);
    --background-secondary-alt:   var(--lotusWhite2);
    --text-normal:                var(--lotusInk1);
    --text-faint:                 var(--lotusGray3);
    --text-title-h1:              var(--lotusRed);
    --text-title-h2:              var(--lotusOrange);
    --text-title-h3:              var(--lotusYellow);
    --text-title-h4:              var(--lotusGreen);
    --text-title-h5:              var(--lotusAqua);
    --text-title-h6:              var(--lotusBlue4);
    --text-link:                  var(--lotusBlue5);
    --text-a:                     var(--lotusTeal1);
    --text-a-hover:               var(--lotusRed);
    --text-a-url:                 var(--lotusTeal2); /*hover internal link, graph view link and standalone links*. External Links no*/
    --text-mark:                  rgba(183, 208, 174, 0.4); /* lotusGreen3 */
    --pre-code:                   var(--lotusGray);
    --text-highlight-bg:          var(--lotusBlue2);
    --interactive-accent:         var(--lotusBlue3); /* vim cursor background AND highilight on right*/
    --interactive-before:         var(--lotusGray2);
    --background-modifier-border: var(--lotusBlue3);
    --text-accent:                var(--lotusGreen);
    --interactive-accent-rgb:     var(--lotusGreen);
    --inline-code:                var(--lotusGreen);
    --code-block:                 var(--lotusGray3);
    --vim-cursor-backgroung:      var(--lotusGray);
    --vim-cursor-color:           var(--lotusInk1);
    --text-selection:             rgba(183, 208, 174, 0.5); /* lotusGreen3 */
    --text-tag:                   var(--lotusViolet1);
    --task-checkbox:              var(--lotusGray2);
    --table-header:               hsl(42, 33%, 91%);
    --table-row-even:             hsl(42, 35%, 94%);
    --table-row-odd:              hsl(42, 37%, 97%);
    --table-hover:                var(--lotusWhite1);
    --bold-color:                 var(--lotusInk1);
}

# Paper Version

Remixed Kanagawa color scheme with muted colors. For Neovim. See [sho-87/kanagawa-paper.nvim(https://github.com/sho-87/kanagawa-paper.nvim).


Origin: kanagawa
References:
Created 2023-11-11