├── readme.md
├── rose-pine-dawn.css
├── rose-pine-moon.css
└── rose-pine.css
/readme.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
Rosé Pine for Waybar
4 |
5 |
6 | All natural pine, faux fur and a bit of soho vibes for the classy minimalist
7 |
8 |
9 |
10 | 
11 |
12 |
13 |
14 | ## Usage
15 |
16 | 1. Clone the repo and choose your desired variant e.g. `rose-pine-moon.css`
17 | 2. Copy it into your waybar config folder e.g. `~/.config/waybar/`
18 | 3. Import the variant file at the top of your `style.css`
19 | ```css
20 | @import "./rose-pine.css";
21 | /* @import "./rose-pine-moon.css"; */
22 | /* @import "./rose-pine-dawn.css"; */
23 | ```
24 | 4. Use the colors in your Waybar `style.css`.
25 |
26 | ```css
27 | * {
28 | /* reference the color by using @color-name */
29 | background: @base;
30 | border: 1px solid @overlay;
31 | }
32 |
33 | #memory {
34 | color: @foam;
35 | }
36 |
37 | #temperature {
38 | color: @rose;
39 | }
40 | ```
41 |
42 | ## Gallery
43 |
44 | **🌹 Rosé Pine**
45 | 
46 |
47 | **🌙 Rosé Pine Moon**
48 | 
49 |
50 | **🌅 Rosé Pine Dawn**
51 | 
52 |
53 | ## Thanks to
54 |
55 | - [Danko Fox](https://github.com/DankChoir)
56 |
--------------------------------------------------------------------------------
/rose-pine-dawn.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Variant: Rosé Pine Dawn
3 | * Maintainer: DankChoir
4 | */
5 |
6 | @define-color base #faf4ed;
7 | @define-color surface #fffaf3;
8 | @define-color overlay #f2e9e1;
9 |
10 | @define-color muted #9893a5;
11 | @define-color subtle #797593;
12 | @define-color text #575279;
13 |
14 | @define-color love #b4637a;
15 | @define-color gold #ea9d34;
16 | @define-color rose #d7827e;
17 | @define-color pine #286983;
18 | @define-color foam #56949f;
19 | @define-color iris #907aa9;
20 |
21 | @define-color highlightLow #f4ede8;
22 | @define-color highlightMed #dfdad9;
23 | @define-color highlightHigh #cecacd;
24 |
--------------------------------------------------------------------------------
/rose-pine-moon.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Variant: Rosé Pine Moon
3 | * Maintainer: DankChoir
4 | */
5 |
6 | @define-color base #232136;
7 | @define-color surface #2a273f;
8 | @define-color overlay #393552;
9 |
10 | @define-color muted #6e6a86;
11 | @define-color subtle #908caa;
12 | @define-color text #e0def4;
13 |
14 | @define-color love #eb6f92;
15 | @define-color gold #f6c177;
16 | @define-color rose #ea9a97;
17 | @define-color pine #3e8fb0;
18 | @define-color foam #9ccfd8;
19 | @define-color iris #c4a7e7;
20 |
21 | @define-color highlightLow #2a283e;
22 | @define-color highlightMed #44415a;
23 | @define-color highlightHigh #56526e;
24 |
--------------------------------------------------------------------------------
/rose-pine.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Variant: Rosé Pine
3 | * Maintainer: DankChoir
4 | */
5 |
6 | @define-color base #191724;
7 | @define-color surface #1f1d2e;
8 | @define-color overlay #26233a;
9 |
10 | @define-color muted #6e6a86;
11 | @define-color subtle #908caa;
12 | @define-color text #e0def4;
13 |
14 | @define-color love #eb6f92;
15 | @define-color gold #f6c177;
16 | @define-color rose #ebbcba;
17 | @define-color pine #31748f;
18 | @define-color foam #9ccfd8;
19 | @define-color iris #c4a7e7;
20 |
21 | @define-color highlightLow #21202e;
22 | @define-color highlightMed #403d52;
23 | @define-color highlightHigh #524f67;
24 |
--------------------------------------------------------------------------------