Skip to content

Commit 24a8562

Browse files
juliamertzjuliamertz
committed
feat: hetzner cloud theme
1 parent 1dcbf51 commit 24a8562

3 files changed

Lines changed: 280 additions & 0 deletions

File tree

‎styles/hetzner-cloud/license‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2025 Rosé Pine
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎styles/hetzner-cloud/readme.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<p align="center">
2+
<img src="https://github.com/rose-pine/rose-pine-theme/raw/main/assets/icon.png" width="80" />
3+
<h2 align="center">Rosé Pine for Hetzner Cloud</h2>
4+
</p>
5+
6+
<p align="center">All natural pine, faux fur and a bit of soho vibes for the classy minimalist</p>
7+
8+
<p align="center">
9+
<a href="https://github.com/rose-pine/rose-pine-theme">
10+
<img src="https://img.shields.io/badge/community-rosé%20pine-26233a?labelColor=191724&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwIiBoZWlnaHQ9IjIzNyIgdmlld0JveD0iMCAwIDI1MCAyMzciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNjEuMjI3IDE2MS4yNTFDMTMyLjE1NCAxNjkuMDQxIDExNC45MDEgMTk4LjkyNCAxMjIuNjkxIDIyNy45OTdDMTIzLjkyNSAyMzIuNjAzIDEyOC42NTkgMjM1LjMzNiAxMzMuMjY0IDIzNC4xMDJMMTg1LjkwNyAyMTkuOTk2QzIxOS41ODUgMjEwLjk3MiAyMzkuNTcgMTc2LjM1NCAyMzAuNTQ2IDE0Mi42NzdMMTYxLjIyNyAxNjEuMjUxWiIgZmlsbD0iIzI0NjI3QiIvPgo8cGF0aCBkPSJNODguMTgzNiAxNTkuOTg4QzExNy4yNTcgMTY3Ljc3OCAxMzQuNTEgMTk3LjY2MiAxMjYuNzIgMjI2LjczNUMxMjUuNDg2IDIzMS4zNCAxMjAuNzUyIDIzNC4wNzMgMTE2LjE0NyAyMzIuODM5TDYzLjUwNDEgMjE4LjczM0MyOS44MjY0IDIwOS43MSA5Ljg0MDk0IDE3NS4wOTIgMTguODY0OSAxNDEuNDE0TDg4LjE4MzYgMTU5Ljk4OFoiIGZpbGw9IiMyNDYyN0IiLz4KPHBhdGggZD0iTTE4Ni44NjcgMTcyLjk4QzE1Mi4wMDIgMTcyLjk4IDEyMy43MzcgMjAxLjI0NSAxMjMuNzM3IDIzNi4xMTFIMTg2Ljg3QzIyMS43MzYgMjM2LjExMSAyNTAgMjA3Ljg0NiAyNTAgMTcyLjk4TDE4Ni44NjcgMTcyLjk4WiIgZmlsbD0iIzMxNzQ4RiIvPgo8cGF0aCBkPSJNNjMuMTMyNyAxNzIuOThDOTcuOTk4NCAxNzIuOTggMTI2LjI2MyAyMDEuMjQ1IDEyNi4yNjMgMjM2LjExMUg2My4xM0MyOC4yNjQyIDIzNi4xMTEgLTEuNTI0MDNlLTA2IDIwNy44NDYgMCAxNzIuOThMNjMuMTMyNyAxNzIuOThaIiBmaWxsPSIjMzE3NDhGIi8+CjxwYXRoIGQ9Ik0xNzEuNzE3IDc1LjEyNjNDMTcxLjcxNyAxMDEuMjc2IDE1MC41MTggMTIyLjQ3NSAxMjQuMzY5IDEyMi40NzVDOTguMjE4OCAxMjIuNDc1IDc3LjAyMDIgMTAxLjI3NiA3Ny4wMjAyIDc1LjEyNjNDNzcuMDIwMiA0OC45NzY0IDk4LjIxODggMjcuNzc3OCAxMjQuMzY5IDI3Ljc3NzhDMTUwLjUxOCAyNy43Nzc4IDE3MS43MTcgNDguOTc2NCAxNzEuNzE3IDc1LjEyNjNaIiBmaWxsPSIjRUJCQ0JBIi8+CjxwYXRoIGQ9Ik0xNDQuMjE3IDg2LjIzNzlDMTYxLjY0OSA1Ni4wNDMyIDE1MS4zMDMgMTcuNDMyOSAxMjEuMTA4IDBMMTA2LjA2IDI2LjA2NDRDODguNjI3IDU2LjI1OSA5OC45NzM2IDk0Ljg2OTQgMTI5LjE2OCAxMTIuMzAyTDE0NC4yMTcgODYuMjM3OVoiIGZpbGw9IiNFQkJDQkEiLz4KPHBhdGggZD0iTTEyNS4yOTkgNjAuOTc4OUMxMTYuMjc1IDI3LjMwMTIgODEuNjU3NSA3LjMxNTY3IDQ3Ljk3OTcgMTYuMzM5Nkw2NC4zMTk3IDc3LjMyMTFDNzMuMzQzNiAxMTAuOTk5IDEwNy45NjEgMTMwLjk4NCAxNDEuNjM5IDEyMS45NkwxMjUuMjk5IDYwLjk3ODlaIiBmaWxsPSIjRUJCQ0JBIi8+CjxwYXRoIGQ9Ik0xMjQuOTI2IDYwLjk3ODlDMTMzLjk1IDI3LjMwMTIgMTY4LjU2NyA3LjMxNTY3IDIwMi4yNDUgMTYuMzM5NkwxODUuOTA1IDc3LjMyMTFDMTc2Ljg4MSAxMTAuOTk5IDE0Mi4yNjMgMTMwLjk4NCAxMDguNTg2IDEyMS45NkwxMjQuOTI2IDYwLjk3ODlaIiBmaWxsPSIjRUJCQ0JBIi8+Cjwvc3ZnPgo=&style=for-the-badge" />
11+
</a>
12+
<a href="https://github.com/rose-pine/userstyles/raw/main/hetzner-cloud/rose-pine.user.less"><img src="https://img.shields.io/badge/stylus-install-cba6f7?colorA=363a4f&style=for-the-badge"></a>
13+
</p>
14+
15+
## Usage
16+
17+
1. Make sure you have the [Stylus](https://github.com/openstyles/stylus) browser
18+
extension installed, then visit
19+
[this link](https://github.com/rose-pine/userstyles/raw/main/styles/hetzner-cloud/rose-pine.user.less)
20+
2. Configure your preferred accent color and theme variant
21+
3. Click install on the top left
22+
23+
## Thanks to
24+
25+
- [Julia](https://github.com/juliamertz)

‎styles/hetzner-cloud/rose-pine.user.less‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
/* ==UserStyle==
2+
@name Rosé Pine for Hetzner Cloud
3+
@description Soho vibes for Hetzner Cloud
4+
@version 1.0.0
5+
@license MIT
6+
@author Rosé Pine (https://github.com/rose-pine)
7+
@namespace https://github.com/rose-pine
8+
@homepageURL https://github.com/rose-pine/userstyles
9+
@updateURL https://github.com/rose-pine/userstyles/raw/main/styles/hetzner-cloud/rose-pine.user.less
10+
@preprocessor less
11+
12+
@var select lightVariant "Light Variant" ["main:Rosé Pine", "moon:Rosé Pine Moon", "dawn:Rosé Pine Dawn*"]
13+
@var select darkVariant "Dark Variant" ["main:Rosé Pine*", "moon:Rosé Pine Moon", "dawn:Rosé Pine Dawn"]
14+
@var select accentColor "Accent" ["love:Love*", "gold:Gold", "rose:Rose", "pine:Pine", "foam:Foam", "iris:Iris"]
15+
==/UserStyle== */
16+
17+
@-moz-document domain("console.hetzner.cloud") {
18+
:root {
19+
@media (prefers-color-scheme: light) {
20+
#rose-pine(@lightVariant);
21+
}
22+
@media (prefers-color-scheme: dark) {
23+
#rose-pine(@darkVariant);
24+
}
25+
}
26+
27+
:root[data-theme="dark"] {
28+
#rose-pine(@darkVariant);
29+
}
30+
:root[data-theme="light"] {
31+
#rose-pine(@lightVariant);
32+
}
33+
34+
#rose-pine(@variant) {
35+
@base: @rose-pine[@@variant][@base];
36+
@surface: @rose-pine[@@variant][@surface];
37+
@overlay: @rose-pine[@@variant][@overlay];
38+
@muted: @rose-pine[@@variant][@muted];
39+
@subtle: @rose-pine[@@variant][@subtle];
40+
@text: @rose-pine[@@variant][@text];
41+
@love: @rose-pine[@@variant][@love];
42+
@gold: @rose-pine[@@variant][@gold];
43+
@rose: @rose-pine[@@variant][@rose];
44+
@pine: @rose-pine[@@variant][@pine];
45+
@foam: @rose-pine[@@variant][@foam];
46+
@iris: @rose-pine[@@variant][@iris];
47+
@highlightLow: @rose-pine[@@variant][@highlightLow];
48+
@highlightMed: @rose-pine[@@variant][@highlightMed];
49+
@highlightHigh: @rose-pine[@@variant][@highlightHigh];
50+
@accent-color: @rose-pine[@@variant][@@accentColor];
51+
color-scheme: if(@variant = dawn, light, dark);
52+
53+
::selection {
54+
background-color: fade(@accent-color, 30%);
55+
}
56+
57+
input,
58+
textarea {
59+
&::placeholder {
60+
color: @highlightLow !important;
61+
}
62+
}
63+
64+
// TODO: find what selectors we need
65+
* {
66+
--color-primary: @accent-color;
67+
--color-primary--link: saturate(@accent-color, -10%);
68+
--color-primary--hover: saturate(@accent-color, 10%);
69+
--color-green--light: @pine;
70+
--color-green--background: saturate(@pine, -30%);
71+
--color-red-full--background: saturate(@love, -50%);
72+
--color-red-full--text: @love;
73+
--color-text: @text;
74+
--color-text--disabled: @muted;
75+
--color-back-link--hover: @subtle;
76+
--color-background--layer-0: @base;
77+
--color-background--layer-10: @base;
78+
--color-background--layer-20: @surface;
79+
--color-background--layer-30: @surface;
80+
--color-background--layer-40: @overlay;
81+
--color-background--layer-50: @overlay;
82+
--color-background--gradient-card-0: @highlightLow;
83+
--color-background--gradient-card-15: fade(@highlightLow, 8%);
84+
--color-background--overlay: rgba(0, 0, 0, 0.7);
85+
--color-background-empty-state: @highlightLow;
86+
--color-background-empty-state--side-sheet: darken(@highlightLow, 5%);
87+
--color-card-background: @surface;
88+
--color-card-background--disabled: darken(@surface, 5%);
89+
--color-card-background--hover: lighten(@surface, 3%);
90+
--color-card-background--light: lighten(@surface, 1%);
91+
--color-card--disabled-text: darken(@muted, 5%);
92+
--color-nav-primary-background--hover: darken(@overlay, 2%);
93+
--color-nav-primary-background--hover-mobile: @surface;
94+
--color-nav-primary-background--active: lighten(@overlay, 2%);
95+
--color-nav-primary-background--active-mobile: @highlightLow;
96+
--color-nav-primary--icon: lighten(@muted, 20%);
97+
--color-nav-secondary--hover: lighten(@muted, 30%);
98+
--color-nav-secondary--disabled: lighten(@muted, 10%);
99+
--color-nav-secondary--hover-background: lighten(@overlay, 2%);
100+
--color-mobile-menu-background: fade(@base, 80%);
101+
--color-form-border: lighten(@overlay, 10%);
102+
--color-form-border--disabled: lighten(@overlay, 2%);
103+
--color-form-addon-wrapper--background: lighten(@overlay, 2%);
104+
--color-input--background: darken(@base, 2%);
105+
--color-input--background-dropdown: lighten(@base, 3%);
106+
--color-input-hover--button: lighten(@overlay, 2%);
107+
--color-dropdown-background--hover: lighten(@overlay, 4%);
108+
--color-dropdown-background--active: lighten(@overlay, 2%);
109+
--color-dropdown-background--header: lighten(@base, 3%);
110+
--color-dropdown-background--disabled: lighten(@overlay, 2%);
111+
--color-dropdown-label-background: lighten(@overlay, 10%);
112+
--color-dropdown-button-grey: lighten(@overlay, 10%);
113+
--color-dropdown-button-grey--hover: lighten(@overlay, 13%);
114+
--color-dropdown-filter--background: lighten(@overlay, 2%);
115+
--color-dropdown-filter--hover: lighten(@overlay, 4%);
116+
--color-dropdown-filter--active: lighten(@overlay, 10%);
117+
--color-border: lighten(@overlay, 10%);
118+
--color-border--dark: lighten(@overlay, 2%);
119+
--color-button-secondary-background: lighten(@overlay, 10%);
120+
--color-button-secondary-background--hover: lighten(@overlay, 20%);
121+
--color-button-secondary-background--disabled: lighten(@overlay, 8%);
122+
--color-button-secondary-text--disabled: lighten(@muted, 10%);
123+
--color-button-secondary--seperator: lighten(@overlay, 2%);
124+
--color-button-vote: lighten(@overlay, 10%);
125+
--color-button-vote--hover: lighten(@overlay, 20%);
126+
--color-button-vote--voted: lighten(@overlay, 2%);
127+
--color-button-switch-background: lighten(@overlay, 2%);
128+
--color-button-switch-background--selected: lighten(@overlay, 10%);
129+
--color-button-switch-background--hover: lighten(@overlay, 20%);
130+
--color-button-switch--text-secondary: @text;
131+
--color-button-dashed-background--hover: darken(@base, 2%);
132+
--color-button-dashed-content: lighten(@overlay, 10%);
133+
--color-table-background--head: lighten(@base, 3%);
134+
--color-table-background--highlighted: lighten(@base, 3%);
135+
--color-badge--grey: lighten(@overlay, 10%);
136+
--color-status-badge-grey--background: lighten(@overlay, 2%);
137+
--color-status-badge-grey--color: lighten(@muted, 10%);
138+
--color-step-header-background: fade(@base, 60%);
139+
--color-stepper-sidenav--item-active: darken(@overlay, 2%);
140+
--color-ui-slider-background: lighten(@overlay, 2%);
141+
--color-ui-slider-background--limit: lighten(@base, 3%);
142+
--color-ui-slider-gradient--limit: darken(@overlay, 2%);
143+
--color-ui-slider--handle: lighten(@overlay, 10%);
144+
--color-select-box-border--default: lighten(@overlay, 2%);
145+
--color-select-box-border--hover: lighten(@overlay, 10%);
146+
--color-select-box-border--dropdown: @surface;
147+
--color-select-box-border--selected: @love;
148+
--color-select-box-background--default: @surface;
149+
--color-select-box-background--hover: lighten(@surface, 3%);
150+
--color-select-box-dropdown--default: lighten(@surface, 3%);
151+
--color-select-box-dropdown--hover: lighten(@overlay, 2%);
152+
--color-side-sheet--highlighted-header: darken(@overlay, 2%);
153+
--color-ghost-loading--fill: lighten(@base, 3%);
154+
--color-ghost-loading-highlight--gradient-0: fade(@highlightLow, 0%);
155+
--color-ghost-loading-highlight--gradient-20: fade(@highlightLow, 20%);
156+
--color-ghost-loading-highlight--gradient-60: fade(@highlightLow, 50%);
157+
--color-modal--background: @surface;
158+
--color-modal--overlay-mask: rgba(0, 0, 0, 0.7);
159+
--color-modal--footer: lighten(@base, 2%);
160+
--color-notification--info: lighten(@overlay, 10%);
161+
--color-load-mask-background--table: fade(@surface, 50%);
162+
--color-editable--hover: lighten(@muted, 20%);
163+
--color-spinner: lighten(@overlay, 2%);
164+
--color-click-to-copy-label: lighten(@overlay, 2%);
165+
--color-click-to-copy-label--snippet: @base;
166+
--color-box-code-background: darken(@overlay, 2%);
167+
--color-label-border: lighten(@overlay, 10%);
168+
--color-label-border--hover: lighten(@overlay, 13%);
169+
--color-label-key-background: lighten(@overlay, 10%);
170+
--color-label-key-background--hover: lighten(@overlay, 13%);
171+
--color-label-add-label-background--hover: lighten(@base, 3%);
172+
--color-tooltip--background: lighten(@overlay, 10%);
173+
--color-shadow: rgba(0, 0, 0, 0.35);
174+
--color-shadow--hover: rgba(0, 0, 0, 0.4);
175+
--color-ui-message-background: darken(@overlay, 2%);
176+
--color-ui-message-background--in-card: lighten(@overlay, 2%);
177+
--color-global-search-trigger: @base;
178+
--color-global-search-trigger--hover: lighten(@base, 2%);
179+
--color-search-result-background: @base;
180+
--color-search-result-background--hover: lighten(@base, 2%);
181+
--color-search-result-background--selected: @love;
182+
--color-search-result-background--busy: lighten(@love, 5%);
183+
--color-search-result-color: darken(@overlay, 2%);
184+
--color-search-result-color--hover: @text;
185+
--color-search-result-color--disabled: lighten(@muted, 10%);
186+
--color-search-result-color--match: @text;
187+
--color-search-result-color--match-disabled: lighten(@muted, 10%);
188+
--color-search-result-icon--background: darken(@love, 10%);
189+
--color-search-result-icon--background-hover: darken(@love, 10%);
190+
--color-search-result-icon--background-selected: fade(@text, 30%);
191+
--color-search-result-icon--background-busy: lighten(@love, 10%);
192+
--color-search-result-icon--color: @love;
193+
--color-search-result-icon--color-hover: @text;
194+
--color-dashboard-map: darken(@overlay, 2%);
195+
--color-dashboard-map--connection: @text;
196+
--color-pie-chart--empty: lighten(@overlay, 2%);
197+
--color-project-list-background--default: lighten(@base, 3%);
198+
--color-project-list-background--colored: darken(@base, 2%);
199+
--color-icon-fill: lighten(@muted, 10%);
200+
--color-icon-list-item--background: lighten(@muted, 10%);
201+
--color-icon-month-select--fill: lighten(@overlay, 2%);
202+
--color-icon-checkbox--fill: darken(@base, 5%);
203+
--color-icon-checkbox--fill-on-label: darken(@base, 5%);
204+
--color-icon-checkbox--stroke: lighten(@overlay, 10%);
205+
--color-icon-checkbox--stroke-on-label: lighten(@overlay, 10%);
206+
--color-icon-checkbox--hover: lighten(@overlay, 13%);
207+
--color-icon--map: lighten(@overlay, 10%);
208+
--color-icon-action--fill-active: lighten(@muted, 20%);
209+
--color-icon-action--background: lighten(@overlay, 1%);
210+
--color-icon-lock--background: darken(@overlay, 2%);
211+
--color-icon-volume-size-block-outline: lighten(@overlay, 10%);
212+
--color-icon-search: @text;
213+
--color-icon-activity--background: lighten(@overlay, 10%);
214+
--color-icon-activity--icon: @text;
215+
--color-icon-activity--status: lighten(@overlay, 10%);
216+
--color-illustration-snapshot--fill: lighten(@overlay, 10%);
217+
--color-illustration-sad-smiley--fill: lighten(@overlay, 10%);
218+
--color-logo-text: @text;
219+
--color-server-status-indicator-base--fill: @base;
220+
--color-server-status-indicator-base--stroke: @base;
221+
--color-server-status-indicator-off--fill: lighten(@overlay, 10%);
222+
--color-server-status-indicator-off--stroke: lighten(@overlay, 10%);
223+
--color-usage-preview-item-odd--background: darken(@overlay, 2%);
224+
--color-console--background: @surface;
225+
}
226+
}
227+
}
228+
229+
/* deno-fmt-ignore */
230+
@rose-pine: {
231+
@main: { @base: #191724; @surface: #1f1d2e; @overlay: #26233a; @muted: #6e6a86; @subtle: #908caa; @text: #e0def4; @love: #eb6f92; @gold: #f6c177; @rose: #ebbcba; @pine: #31748f; @foam: #9ccfd8; @iris: #c4a7e7; @highlightLow: #21202e; @highlightMed: #403d52; @highlightHigh: #524f67; };
232+
@moon: { @base: #232136; @surface: #2a273f; @overlay: #393552; @muted: #6e6a86; @subtle: #908caa; @text: #e0def4; @love: #eb6f92; @gold: #f6c177; @rose: #ea9a97; @pine: #3e8fb0; @foam: #9ccfd8; @iris: #c4a7e7; @highlightLow: #2a283e; @highlightMed: #44415a; @highlightHigh: #56526e; };
233+
@dawn: { @base: #faf4ed; @surface: #fffaf3; @overlay: #f2e9e1; @muted: #9893a5; @subtle: #797593; @text: #575279; @love: #b4637a; @gold: #ea9d34; @rose: #d7827e; @pine: #286983; @foam: #56949f; @iris: #907aa9; @highlightLow: #f4ede8; @highlightMed: #dfdad9; @highlightHigh: #cecacd; };
234+
};

0 commit comments

Comments
 (0)