Home

Awesome

<p align="center"> <h2 align="center">🌊 KANAGAWA.nvim 🌊</h2> </p> <p align="center"> <img src="kanagawa@2x.png" width="500" > </p> <p align="center">NeoVim dark colorscheme inspired by the colors of the famous painting by Katsushika Hokusai.</p> <p align="center"> <h2 align="center"><img alt="Preview" src="https://user-images.githubusercontent.com/36300441/222913073-22b95f11-8c08-4b2b-867c-19072c921de1.png" width=1000></h2> </p>

W3C

Features

Installation

Download with your favorite package manager.

use "rebelot/kanagawa.nvim"

Requirements

Usage

As simple as writing (pasting)

colorscheme kanagawa
vim.cmd("colorscheme kanagawa")

Configuration

There is no need to call setup if you are ok with the defaults.

-- Default options:
require('kanagawa').setup({
    compile = false,             -- enable compiling the colorscheme
    undercurl = true,            -- enable undercurls
    commentStyle = { italic = true },
    functionStyle = {},
    keywordStyle = { italic = true},
    statementStyle = { bold = true },
    typeStyle = {},
    transparent = false,         -- do not set background color
    dimInactive = false,         -- dim inactive window `:h hl-NormalNC`
    terminalColors = true,       -- define vim.g.terminal_color_{0,17}
    colors = {                   -- add/modify theme and palette colors
        palette = {},
        theme = { wave = {}, lotus = {}, dragon = {}, all = {} },
    },
    overrides = function(colors) -- add/modify highlights
        return {}
    end,
    theme = "wave",              -- Load "wave" theme when 'background' option is not set
    background = {               -- map the value of 'background' option to a theme
        dark = "wave",           -- try "dragon" !
        light = "lotus"
    },
})

-- setup must be called before loading
vim.cmd("colorscheme kanagawa")

NOTE 1: If you enable compilation, make sure to run :KanagawaCompile command every time you make changes to your config.

" 1. Modify your config
" 2. Restart nvim
" 3. Run this command:
:KanagawaCompile

NOTE 2: Kanagawa adjusts to the value of some options. Make sure that the options 'laststatus' and 'cmdheight' are set before calling setup.

Themes

Kanagawa comes in three variants:

Themes can be changed in three ways:

Customization

In kanagawa, there are two kinds of colors: PaletteColors and ThemeColors; PaletteColors are defined directly as RGB Hex strings, and have arbitrary names that recall their actual color. Conversely, ThemeColors are named and grouped semantically on the basis of their actual function.

In short, a palette defines all the available colors, while a theme maps the PaletteColors to specific ThemeColors and the same palette color may be assigned to multiple theme colors.

You can change both theme or palette colors using config.colors. All the palette color names can be found here, while their usage by each theme can be found here.

require('kanagawa').setup({
    ...,
    colors = {
        palette = {
            -- change all usages of these colors
            sumiInk0 = "#000000",
            fujiWhite = "#FFFFFF",
        },
        theme = {
            -- change specific usages for a certain theme, or for all of them
            wave = {
                ui = {
                    float = {
                        bg = "none",
                    },
                },
            },
            dragon = {
                syn = {
                    parameter = "yellow",
                },
            },
            all = {
                ui = {
                    bg_gutter = "none"
                }
            }
        }
    },
    ...
})

You can also conveniently add/modify hlgroups using the config.overrides option. Supported keywords are the same for :h nvim_set_hl {val} parameter.

require('kanagawa').setup({
    ...,
    overrides = function(colors)
        return {
            -- Assign a static color to strings
            String = { fg = colors.palette.carpYellow, italic = true },
            -- theme colors will update dynamically when you change theme!
            SomePluginHl = { fg = colors.theme.syn.type, bold = true },
        }
    end,
    ...
})

Common customizations

Remove gutter background

Remove the background of LineNr, {Sign,Fold}Column and friends

colors = {
    theme = {
        all = {
            ui = {
                bg_gutter = "none"
            }
        }
    }
}

Transparent Floating Windows

This will make floating windows look nicer with default borders.

overrides = function(colors)
    local theme = colors.theme
    return {
        NormalFloat = { bg = "none" },
        FloatBorder = { bg = "none" },
        FloatTitle = { bg = "none" },

        -- Save an hlgroup with dark background and dimmed foreground
        -- so that you can use it where your still want darker windows.
        -- E.g.: autocmd TermOpen * setlocal winhighlight=Normal:NormalDark
        NormalDark = { fg = theme.ui.fg_dim, bg = theme.ui.bg_m3 },

        -- Popular plugins that open floats will link to NormalFloat by default;
        -- set their background accordingly if you wish to keep them dark and borderless
        LazyNormal = { bg = theme.ui.bg_m3, fg = theme.ui.fg_dim },
        MasonNormal = { bg = theme.ui.bg_m3, fg = theme.ui.fg_dim },
    }
end,

If you'd like to keep the floating windows darker, but you're unhappy with how borders are rendered, consider using characters that are drawn at the edges of the box:

{ "🭽", "▔", "🭾", "▕", "🭿", "▁", "🭼", "▏" }

Borderless Telescope

Block-like modern Telescope UI

overrides = function(colors)
    local theme = colors.theme
    return {
        TelescopeTitle = { fg = theme.ui.special, bold = true },
        TelescopePromptNormal = { bg = theme.ui.bg_p1 },
        TelescopePromptBorder = { fg = theme.ui.bg_p1, bg = theme.ui.bg_p1 },
        TelescopeResultsNormal = { fg = theme.ui.fg_dim, bg = theme.ui.bg_m1 },
        TelescopeResultsBorder = { fg = theme.ui.bg_m1, bg = theme.ui.bg_m1 },
        TelescopePreviewNormal = { bg = theme.ui.bg_dim },
        TelescopePreviewBorder = { bg = theme.ui.bg_dim, fg = theme.ui.bg_dim },
    }
end,

Dark completion (popup) menu

More uniform colors for the popup menu.

overrides = function(colors)
    local theme = colors.theme
    return {
        Pmenu = { fg = theme.ui.shade0, bg = theme.ui.bg_p1 },  -- add `blend = vim.o.pumblend` to enable transparency
        PmenuSel = { fg = "NONE", bg = theme.ui.bg_p2 },
        PmenuSbar = { bg = theme.ui.bg_m1 },
        PmenuThumb = { bg = theme.ui.bg_p2 },
    }
end,

Integration

Get palette and theme colors

-- Get the colors for the current theme
local colors = require("kanagawa.colors").setup()
local palette_colors = colors.palette
local theme_colors = colors.theme

-- Get the colors for a specific theme
local wave_colors = require("kanagawa.colors").setup({ theme = 'wave' })

Terminal integration

The following example provides a snippet to automatically change the theme for the Kitty terminal emulator.

vim.api.nvim_create_autocmd("ColorScheme", {
    pattern = "kanagawa",
    callback = function()
        if vim.o.background == "light" then
            vim.fn.system("kitty +kitten themes Kanagawa_light")
        elseif vim.o.background == "dark" then
            vim.fn.system("kitty +kitten themes Kanagawa_dragon")
        else
            vim.fn.system("kitty +kitten themes Kanagawa")
        end
    end,
})
<details> <summary><h2>Color palette</h2></summary>
NameHexUsage
<img src="assets/circles/fujiWhite.svg" width="40">fujiWhite#DCD7BADefault foreground
<img src="assets/circles/oldWhite.svg" width="40">oldWhite#C8C093Dark foreground (statuslines)
<img src="assets/circles/sumiInk0.svg" width="40">sumiInk0#16161DDark background (statuslines and floating windows)
<img src="assets/circles/sumiInk1.svg" width="40">sumiInk1#1F1F28Default background
<img src="assets/circles/sumiInk2.svg" width="40">sumiInk2#2A2A37Lighter background (colorcolumn, folds)
<img src="assets/circles/sumiInk3.svg" width="40">sumiInk3#363646Lighter background (cursorline)
<img src="assets/circles/sumiInk4.svg" width="40">sumiInk4#54546DDarker foreground (line numbers, fold column, non-text characters), float borders
<img src="assets/circles/waveBlue1.svg" width="40">waveBlue1#223249Popup background, visual selection background
<img src="assets/circles/waveBlue2.svg" width="40">waveBlue2#2D4F67Popup selection background, search background
<img src="assets/circles/winterGreen.svg" width="40">winterGreen#2B3328Diff Add (background)
<img src="assets/circles/winterYellow.svg" width="40">winterYellow#49443CDiff Change (background)
<img src="assets/circles/winterRed.svg" width="40">winterRed#43242BDiff Deleted (background)
<img src="assets/circles/winterBlue.svg" width="40">winterBlue#252535Diff Line (background)
<img src="assets/circles/autumnGreen.svg" width="40">autumnGreen#76946AGit Add
<img src="assets/circles/autumnRed.svg" width="40">autumnRed#C34043Git Delete
<img src="assets/circles/autumnYellow.svg" width="40">autumnYellow#DCA561Git Change
<img src="assets/circles/samuraiRed.svg" width="40">samuraiRed#E82424Diagnostic Error
<img src="assets/circles/roninYellow.svg" width="40">roninYellow#FF9E3BDiagnostic Warning
<img src="assets/circles/waveAqua1.svg" width="40">waveAqua1#6A9589Diagnostic Info
<img src="assets/circles/dragonBlue.svg" width="40">dragonBlue#658594Diagnostic Hint
<img src="assets/circles/fujiGray.svg" width="40">fujiGray#727169Comments
<img src="assets/circles/springViolet1.svg" width="40">springViolet1#938AA9Light foreground
<img src="assets/circles/oniViolet.svg" width="40">oniViolet#957FB8Statements and Keywords
<img src="assets/circles/crystalBlue.svg" width="40">crystalBlue#7E9CD8Functions and Titles
<img src="assets/circles/springViolet2.svg" width="40">springViolet2#9CABCABrackets and punctuation
<img src="assets/circles/springBlue.svg" width="40">springBlue#7FB4CASpecials and builtin functions
<img src="assets/circles/lightBlue.svg" width="40">lightBlue#A3D4D5Not used
<img src="assets/circles/waveAqua2.svg" width="40">waveAqua2#7AA89FTypes
<img src="assets/circles/springGreen.svg" width="40">springGreen#98BB6CStrings
<img src="assets/circles/boatYellow1.svg" width="40">boatYellow1#938056Not used
<img src="assets/circles/boatYellow2.svg" width="40">boatYellow2#C0A36EOperators, RegEx
<img src="assets/circles/carpYellow.svg" width="40">carpYellow#E6C384Identifiers
<img src="assets/circles/sakuraPink.svg" width="40">sakuraPink#D27E99Numbers
<img src="assets/circles/waveRed.svg" width="40">waveRed#E46876Standout specials 1 (builtin variables)
<img src="assets/circles/peachRed.svg" width="40">peachRed#FF5D62Standout specials 2 (exception handling, return)
<img src="assets/circles/surimiOrange.svg" width="40">surimiOrange#FFA066Constants, imports, booleans
<img src="assets/circles/katanaGray.svg" width="40">katanaGray#717C7CDeprecated
</details>

Accessibility

The colors maintain a 4.5:1 contrast ratio, complying with WCAG 2.1 | Level AA.

Extras

Acknowledgements

Donate

Buy me coffee and support my work ;)

Donate