几个Ubuntu adw-colors 主题颜色

比较喜欢用 https://github.com/lassekongo83/adw-gtk3 主题，用 https://github.com/lassekongo83/adw-colors 昨天用 DeepSeek 改了几个😁 真省事、真方便👍👍

蓝色主题 → “北极蓝调”(Polar Blue)
- 灵感：冷色调的蓝色让人联想到北极冰川
- 特点：专业、冷静、清爽的科技感
- 适合：开发者、办公环境、需要专注的场景
橙色主题 → “秋日暖阳”(Autumn Glow)
- 灵感：温暖橙色调如同秋日午后阳光
- 特点：活力、温暖、富有创造力
- 适合：创意工作、寒冷季节、需要激发热情的场景
舒适主题 → “羊绒灰雾”(Cashmere Mist)
- 灵感：高级羊绒织物的柔软质感
- 特点：中性、优雅、全天候舒适
- 适合：长时间使用、设计工作、需要减少视觉疲劳的场景

蓝色主题

“北极蓝调”(Polar Blue)

  1@define-color window_bg_color #f0f5ff;
  2@define-color window_fg_color #1a1a2e;
  3@define-color view_bg_color #e6f0ff;
  4@define-color view_fg_color #1a1a2e;
  5@define-color accent_bg_color #3a7bd5;
  6@define-color accent_fg_color white;
  7@define-color headerbar_bg_color #d6e4ff;
  8@define-color headerbar_fg_color #1a1a2e;
  9@define-color headerbar_backdrop_color @window_bg_color;
 10@define-color popover_bg_color #e6f0ff;
 11@define-color popover_fg_color @view_fg_color;
 12@define-color dialog_bg_color #e6f0ff;
 13@define-color dialog_fg_color @view_fg_color;
 14@define-color card_bg_color #e6f0ff;
 15@define-color card_fg_color @view_fg_color;
 16@define-color sidebar_bg_color #d6e4ff;
 17@define-color sidebar_fg_color #1a1a2e;
 18@define-color sidebar_backdrop_color @window_bg_color;
 19@define-color sidebar_shade_color rgba(0,0,0,0.25);
 20@define-color sidebar_border_color rgba(0, 0, 0, 0.07);
 21@define-color secondary_sidebar_bg_color #f0f5ff;
 22@define-color secondary_sidebar_fg_color @view_fg_color;
 23@define-color secondary_sidebar_backdrop_color @view_bg_color;
 24@define-color secondary_sidebar_shade_color rgba(0, 0, 0, 0.07);
 25@define-color secondary_sidebar_border_color rgba(0, 0, 0, 0.07);
 26@define-color destructive_bg_color #c14a4a;
 27@define-color success_bg_color #4caf50;
 28@define-color warning_bg_color #ff9800;
 29@define-color error_bg_color #f44336;
 30:root {
 31  --accent-blue: #3a7bd5;
 32  --accent-teal: #00b4d8;
 33  --accent-green: #4caf50;
 34  --accent-yellow: #ffc107;
 35  --accent-orange: #ff9800;
 36  --accent-red: #f44336;
 37  --accent-pink: #e91e63;
 38  --accent-purple: #9c27b0;
 39  --accent-slate: #607d8b;
 40  --accent-bg-color: @accent_bg_color;
 41  --accent-fg-color: @accent_fg_color;
 42  --window-bg-color: @window_bg_color;
 43  --window-fg-color: @window_fg_color;
 44  --view-bg-color: @view_bg_color;
 45  --view-fg-color: @view_fg_color;
 46  --headerbar-bg-color: @headerbar_bg_color;
 47  --headerbar-fg-color: @headerbar_fg_color;
 48  --headerbar-backdrop-color: @headerbar_backdrop_color;
 49  --sidebar-bg-color: @sidebar_bg_color;
 50  --sidebar-fg-color: @sidebar_fg_color;
 51  --sidebar-backdrop-color: @sidebar_backdrop_color;
 52  --sidebar-shade-color: @sidebar_shade_color;
 53  --sidebar-border-color: @sidebar_border_color;
 54  --secondary-sidebar-bg-color: @secondary_sidebar_bg_color;
 55  --secondary-sidebar-fg-color: @secondary_sidebar_fg_color;
 56  --secondary-sidebar-backdrop-color: @secondary_sidebar_backdrop_color;
 57  --secondary-sidebar-shade-color: @secondary_sidebar_shade_color;
 58  --secondary-sidebar-border-color: @secondary_sidebar_border_color;
 59  --card-bg-color: @card_bg_color;
 60  --card-fg-color: @card_fg_color;
 61  --dialog-bg-color: @dialog_bg_color;
 62  --dialog-fg-color: @dialog_fg_color;
 63  --popover-bg-color: @popover_bg_color;
 64  --popover-fg-color: @popover_fg_color;
 65  --destructive-bg-color: @destructive_bg_color;
 66  --success-bg-color: @success_bg_color;
 67  --warning-bg-color: @warning_bg_color;
 68  --error-bg-color: @error_bg_color;
 69}
 70
 71windowcontrols > button > image {
 72  min-width: 18px;
 73  min-height: 18px;
 74  border-radius: 24px;
 75  color: transparent;
 76}
 77
 78windowcontrols.end {
 79  margin-right: 0px;
 80}
 81windowcontrols.start {
 82  margin-left: 0px;
 83}
 84
 85windowcontrols > button {
 86  min-width: 18px;
 87  min-height: 18px;
 88}
 89windowcontrols > button > image {
 90  padding: 0;
 91}
 92windowcontrols > button.close > image {
 93  background-color: #f44336;
 94}
 95windowcontrols > button.close:hover > image {
 96  background-color: color-mix(in srgb, black 30%, #f44336);
 97}
 98windowcontrols > button.close:active > image {
 99  background-color: color-mix(in srgb, black 50%, #f44336);
100}
101windowcontrols > button.maximize > image {
102  background-color: #4caf50;
103}
104windowcontrols > button.maximize:hover > image {
105  background-color: color-mix(in srgb, black 30%, #4caf50);
106}
107windowcontrols > button.maximize:active > image {
108  background-color: color-mix(in srgb, black 50%, #4caf50);
109}
110windowcontrols > button.minimize > image {
111  background-color: #ff9800;
112}
113windowcontrols > button.minimize:hover > image {
114  background-color: color-mix(in srgb, black 30%, #ff9800);
115}
116windowcontrols > button.minimize:active > image {
117  background-color: color-mix(in srgb, black 50%, #ff9800);
118}
119
120.maximized windowcontrols > button.maximize > image {
121  background-color: #4caf50;
122}
123.maximized windowcontrols > button.maximize:hover > image {
124  background-color: color-mix(in srgb, black 30%, #4caf50);
125}
126.maximized windowcontrols > button.maximize:active > image {
127  background-color: color-mix(in srgb, black 50%, #4caf50);
128}
129
130windowcontrols > button:backdrop.close > image {
131  background-color: color-mix(in srgb, var(--headerbar-bg-color) 80%, var(--headerbar-fg-color));
132}
133windowcontrols > button:backdrop.close:hover > image {
134  background-color: color-mix(in srgb, black 30%, #f44336);
135}
136windowcontrols > button:backdrop.close:active > image {
137  background-color: color-mix(in srgb, black 50%, #f44336);
138}
139windowcontrols > button:backdrop.maximize > image {
140  background-color: color-mix(in srgb, var(--headerbar-bg-color) 80%, var(--headerbar-fg-color));
141}
142windowcontrols > button:backdrop.maximize:hover > image {
143  background-color: color-mix(in srgb, black 30%, #4caf50);
144}
145windowcontrols > button:backdrop.maximize:active > image {
146  background-color: color-mix(in srgb, black 50%, #4caf50);
147}
148windowcontrols > button:backdrop.minimize > image {
149  background-color: color-mix(in srgb, var(--headerbar-bg-color) 80%, var(--headerbar-fg-color));
150}
151windowcontrols > button:backdrop.minimize:hover > image {
152  background-color: color-mix(in srgb, black 30%, #ff9800);
153}
154windowcontrols > button:backdrop.minimize:active > image {
155  background-color: color-mix(in srgb, black 50%, #ff9800);
156}
157
158.maximized windowcontrols > button:backdrop.maximize > image {
159  background-color: color-mix(in srgb, var(--headerbar-bg-color) 80%, var(--headerbar-fg-color));
160}
161.maximized windowcontrols > button:backdrop.maximize:hover > image {
162  background-color: color-mix(in srgb, black 30%, #4caf50);
163}
164.maximized windowcontrols > button:backdrop.maximize:active > image {
165  background-color: color-mix(in srgb, black 50%, #4caf50);
166}

橙色主题

秋日暖阳"(Autumn Glow)

  1@define-color window_bg_color #fff5e6;
  2@define-color window_fg_color #2e1a00;
  3@define-color view_bg_color #ffeedd;
  4@define-color view_fg_color #2e1a00;
  5@define-color accent_bg_color #ff7b25;
  6@define-color accent_fg_color white;
  7@define-color headerbar_bg_color #ffddbb;
  8@define-color headerbar_fg_color #2e1a00;
  9@define-color headerbar_backdrop_color @window_bg_color;
 10@define-color popover_bg_color #ffeedd;
 11@define-color popover_fg_color @view_fg_color;
 12@define-color dialog_bg_color #ffeedd;
 13@define-color dialog_fg_color @view_fg_color;
 14@define-color card_bg_color #ffeedd;
 15@define-color card_fg_color @view_fg_color;
 16@define-color sidebar_bg_color #ffddbb;
 17@define-color sidebar_fg_color #2e1a00;
 18@define-color sidebar_backdrop_color @window_bg_color;
 19@define-color sidebar_shade_color rgba(0,0,0,0.25);
 20@define-color sidebar_border_color rgba(0, 0, 0, 0.07);
 21@define-color secondary_sidebar_bg_color #fff5e6;
 22@define-color secondary_sidebar_fg_color @view_fg_color;
 23@define-color secondary_sidebar_backdrop_color @view_bg_color;
 24@define-color secondary_sidebar_shade_color rgba(0, 0, 0, 0.07);
 25@define-color secondary_sidebar_border_color rgba(0, 0, 0, 0.07);
 26@define-color destructive_bg_color #e53935;
 27@define-color success_bg_color #43a047;
 28@define-color warning_bg_color #fb8c00;
 29@define-color error_bg_color #e53935;
 30:root {
 31  --accent-blue: #42a5f5;
 32  --accent-teal: #26a69a;
 33  --accent-green: #66bb6a;
 34  --accent-yellow: #ffee58;
 35  --accent-orange: #ff7b25;
 36  --accent-red: #ef5350;
 37  --accent-pink: #f48fb1;
 38  --accent-purple: #ab47bc;
 39  --accent-slate: #78909c;
 40  --accent-bg-color: @accent_bg_color;
 41  --accent-fg-color: @accent_fg_color;
 42  --window-bg-color: @window_bg_color;
 43  --window-fg-color: @window_fg_color;
 44  --view-bg-color: @view_bg_color;
 45  --view-fg-color: @view_fg_color;
 46  --headerbar-bg-color: @headerbar_bg_color;
 47  --headerbar-fg-color: @headerbar_fg_color;
 48  --headerbar-backdrop-color: @headerbar_backdrop_color;
 49  --sidebar-bg-color: @sidebar_bg_color;
 50  --sidebar-fg-color: @sidebar_fg_color;
 51  --sidebar-backdrop-color: @sidebar_backdrop_color;
 52  --sidebar-shade-color: @sidebar_shade_color;
 53  --sidebar-border-color: @sidebar_border_color;
 54  --secondary-sidebar-bg-color: @secondary_sidebar_bg_color;
 55  --secondary-sidebar-fg-color: @secondary_sidebar_fg_color;
 56  --secondary-sidebar-backdrop-color: @secondary_sidebar_backdrop_color;
 57  --secondary-sidebar-shade-color: @secondary_sidebar_shade_color;
 58  --secondary-sidebar-border-color: @secondary_sidebar_border_color;
 59  --card-bg-color: @card_bg_color;
 60  --card-fg-color: @card_fg_color;
 61  --dialog-bg-color: @dialog_bg_color;
 62  --dialog-fg-color: @dialog_fg_color;
 63  --popover-bg-color: @popover_bg_color;
 64  --popover-fg-color: @popover_fg_color;
 65  --destructive-bg-color: @destructive_bg_color;
 66  --success-bg-color: @success_bg_color;
 67  --warning-bg-color: @warning_bg_color;
 68  --error-bg-color: @error_bg_color;
 69}
 70
 71windowcontrols > button > image {
 72  min-width: 18px;
 73  min-height: 18px;
 74  border-radius: 24px;
 75  color: transparent;
 76}
 77
 78windowcontrols.end {
 79  margin-right: 0px;
 80}
 81windowcontrols.start {
 82  margin-left: 0px;
 83}
 84
 85windowcontrols > button {
 86  min-width: 18px;
 87  min-height: 18px;
 88}
 89windowcontrols > button > image {
 90  padding: 0;
 91}
 92windowcontrols > button.close > image {
 93  background-color: #e53935;
 94}
 95windowcontrols > button.close:hover > image {
 96  background-color: color-mix(in srgb, black 30%, #e53935);
 97}
 98windowcontrols > button.close:active > image {
 99  background-color: color-mix(in srgb, black 50%, #e53935);
100}
101windowcontrols > button.maximize > image {
102  background-color: #43a047;
103}
104windowcontrols > button.maximize:hover > image {
105  background-color: color-mix(in srgb, black 30%, #43a047);
106}
107windowcontrols > button.maximize:active > image {
108  background-color: color-mix(in srgb, black 50%, #43a047);
109}
110windowcontrols > button.minimize > image {
111  background-color: #fb8c00;
112}
113windowcontrols > button.minimize:hover > image {
114  background-color: color-mix(in srgb, black 30%, #fb8c00);
115}
116windowcontrols > button.minimize:active > image {
117  background-color: color-mix(in srgb, black 50%, #fb8c00);
118}
119
120.maximized windowcontrols > button.maximize > image {
121  background-color: #43a047;
122}
123.maximized windowcontrols > button.maximize:hover > image {
124  background-color: color-mix(in srgb, black 30%, #43a047);
125}
126.maximized windowcontrols > button.maximize:active > image {
127  background-color: color-mix(in srgb, black 50%, #43a047);
128}
129
130windowcontrols > button:backdrop.close > image {
131  background-color: color-mix(in srgb, var(--headerbar-bg-color) 80%, var(--headerbar-fg-color));
132}
133windowcontrols > button:backdrop.close:hover > image {
134  background-color: color-mix(in srgb, black 30%, #e53935);
135}
136windowcontrols > button:backdrop.close:active > image {
137  background-color: color-mix(in srgb, black 50%, #e53935);
138}
139windowcontrols > button:backdrop.maximize > image {
140  background-color: color-mix(in srgb, var(--headerbar-bg-color) 80%, var(--headerbar-fg-color));
141}
142windowcontrols > button:backdrop.maximize:hover > image {
143  background-color: color-mix(in srgb, black 30%, #43a047);
144}
145windowcontrols > button:backdrop.maximize:active > image {
146  background-color: color-mix(in srgb, black 50%, #43a047);
147}
148windowcontrols > button:backdrop.minimize > image {
149  background-color: color-mix(in srgb, var(--headerbar-bg-color) 80%, var(--headerbar-fg-color));
150}
151windowcontrols > button:backdrop.minimize:hover > image {
152  background-color: color-mix(in srgb, black 30%, #fb8c00);
153}
154windowcontrols > button:backdrop.minimize:active > image {
155  background-color: color-mix(in srgb, black 50%, #fb8c00);
156}
157
158.maximized windowcontrols > button:backdrop.maximize > image {
159  background-color: color-mix(in srgb, var(--headerbar-bg-color) 80%, var(--headerbar-fg-color));
160}
161.maximized windowcontrols > button:backdrop.maximize:hover > image {
162  background-color: color-mix(in srgb, black 30%, #43a047);
163}
164.maximized windowcontrols > button:backdrop.maximize:active > image {
165  background-color: color-mix(in srgb, black 50%, #43a047);
166}

舒适主题

“羊绒灰雾”(Cashmere Mist)

  1@define-color window_bg_color #f8f4f0;
  2@define-color window_fg_color #333333;
  3@define-color view_bg_color #f5f0eb;
  4@define-color view_fg_color #333333;
  5@define-color accent_bg_color #5d8aa8;  /* 舒适的蓝灰色 */
  6@define-color accent_fg_color #ffffff;
  7@define-color headerbar_bg_color #ece6e0;
  8@define-color headerbar_fg_color #333333;
  9@define-color headerbar_backdrop_color @window_bg_color;
 10@define-color popover_bg_color #f5f0eb;
 11@define-color popover_fg_color @view_fg_color;
 12@define-color dialog_bg_color #f5f0eb;
 13@define-color dialog_fg_color @view_fg_color;
 14@define-color card_bg_color #f5f0eb;
 15@define-color card_fg_color @view_fg_color;
 16@define-color sidebar_bg_color #ece6e0;
 17@define-color sidebar_fg_color #333333;
 18@define-color sidebar_backdrop_color @window_bg_color;
 19@define-color sidebar_shade_color rgba(0,0,0,0.1);
 20@define-color sidebar_border_color rgba(0, 0, 0, 0.05);
 21@define-color secondary_sidebar_bg_color #f8f4f0;
 22@define-color secondary_sidebar_fg_color @view_fg_color;
 23@define-color secondary_sidebar_backdrop_color @view_bg_color;
 24@define-color secondary_sidebar_shade_color rgba(0, 0, 0, 0.05);
 25@define-color secondary_sidebar_border_color rgba(0, 0, 0, 0.05);
 26@define-color destructive_bg_color #c45c4c;  /* 柔和的红色 */
 27@define-color success_bg_color #6a8d73;     /* 柔和的绿色 */
 28@define-color warning_bg_color #b08968;     /* 柔和的棕色 */
 29@define-color error_bg_color #c45c4c;
 30
 31:root {
 32  --accent-blue: #5d8aa8;
 33  --accent-teal: #6a8d82;
 34  --accent-green: #6a8d73;
 35  --accent-yellow: #b08968;
 36  --accent-orange: #c45c4c;
 37  --accent-red: #c45c4c;
 38  --accent-pink: #b07d8d;
 39  --accent-purple: #8d6a8d;
 40  --accent-slate: #7a7a7a;
 41  --accent-bg-color: @accent_bg_color;
 42  --accent-fg-color: @accent_fg_color;
 43  --window-bg-color: @window_bg_color;
 44  --window-fg-color: @window_fg_color;
 45  --view-bg-color: @view_bg_color;
 46  --view-fg-color: @view_fg_color;
 47  --headerbar-bg-color: @headerbar_bg_color;
 48  --headerbar-fg-color: @headerbar_fg_color;
 49  --headerbar-backdrop-color: @headerbar_backdrop_color;
 50  --sidebar-bg-color: @sidebar_bg_color;
 51  --sidebar-fg-color: @sidebar_fg_color;
 52  --sidebar-backdrop-color: @sidebar_backdrop_color;
 53  --sidebar-shade-color: @sidebar_shade_color;
 54  --sidebar-border-color: @sidebar_border_color;
 55  --secondary-sidebar-bg-color: @secondary_sidebar_bg_color;
 56  --secondary-sidebar-fg-color: @secondary_sidebar_fg_color;
 57  --secondary-sidebar-backdrop-color: @secondary_sidebar_backdrop_color;
 58  --secondary-sidebar-shade-color: @secondary_sidebar_shade_color;
 59  --secondary-sidebar-border-color: @secondary_sidebar_border_color;
 60  --card-bg-color: @card_bg_color;
 61  --card-fg-color: @card_fg_color;
 62  --dialog-bg-color: @dialog_bg_color;
 63  --dialog-fg-color: @dialog_fg_color;
 64  --popover-bg-color: @popover_bg_color;
 65  --popover-fg-color: @popover_fg_color;
 66  --destructive-bg-color: @destructive_bg_color;
 67  --success-bg-color: @success_bg_color;
 68  --warning-bg-color: @warning_bg_color;
 69  --error-bg-color: @error_bg_color;
 70}
 71
 72/* 窗口控制按钮样式保持不变 */
 73windowcontrols > button > image {
 74  min-width: 18px;
 75  min-height: 18px;
 76  border-radius: 24px;
 77  color: transparent;
 78}
 79
 80windowcontrols.end { margin-right: 0px; }
 81windowcontrols.start { margin-left: 0px; }
 82
 83windowcontrols > button {
 84  min-width: 18px;
 85  min-height: 18px;
 86}
 87
 88windowcontrols > button > image {
 89  padding: 0;
 90}
 91
 92windowcontrols > button.close > image {
 93  background-color: #c45c4c;
 94}
 95windowcontrols > button.close:hover > image {
 96  background-color: color-mix(in srgb, black 15%, #c45c4c);
 97}
 98windowcontrols > button.close:active > image {
 99  background-color: color-mix(in srgb, black 30%, #c45c4c);
100}
101
102windowcontrols > button.maximize > image {
103  background-color: #6a8d73;
104}
105windowcontrols > button.maximize:hover > image {
106  background-color: color-mix(in srgb, black 15%, #6a8d73);
107}
108windowcontrols > button.maximize:active > image {
109  background-color: color-mix(in srgb, black 30%, #6a8d73);
110}
111
112windowcontrols > button.minimize > image {
113  background-color: #b08968;
114}
115windowcontrols > button.minimize:hover > image {
116  background-color: color-mix(in srgb, black 15%, #b08968);
117}
118windowcontrols > button.minimize:active > image {
119  background-color: color-mix(in srgb, black 30%, #b08968);
120}
121
122.maximized windowcontrols > button.maximize > image {
123  background-color: #6a8d73;
124}
125.maximized windowcontrols > button.maximize:hover > image {
126  background-color: color-mix(in srgb, black 15%, #6a8d73);
127}
128.maximized windowcontrols > button.maximize:active > image {
129  background-color: color-mix(in srgb, black 30%, #6a8d73);
130}
131
132/* 背景模糊状态下的按钮样式 */
133windowcontrols > button:backdrop.close > image {
134  background-color: color-mix(in srgb, var(--headerbar-bg-color) 80%, var(--headerbar-fg-color));
135}
136windowcontrols > button:backdrop.close:hover > image {
137  background-color: color-mix(in srgb, black 15%, #c45c4c);
138}
139windowcontrols > button:backdrop.close:active > image {
140  background-color: color-mix(in srgb, black 30%, #c45c4c);
141}
142
143windowcontrols > button:backdrop.maximize > image {
144  background-color: color-mix(in srgb, var(--headerbar-bg-color) 80%, var(--headerbar-fg-color));
145}
146windowcontrols > button:backdrop.maximize:hover > image {
147  background-color: color-mix(in srgb, black 15%, #6a8d73);
148}
149windowcontrols > button:backdrop.maximize:active > image {
150  background-color: color-mix(in srgb, black 30%, #6a8d73);
151}
152
153windowcontrols > button:backdrop.minimize > image {
154  background-color: color-mix(in srgb, var(--headerbar-bg-color) 80%, var(--headerbar-fg-color));
155}
156windowcontrols > button:backdrop.minimize:hover > image {
157  background-color: color-mix(in srgb, black 15%, #b08968);
158}
159windowcontrols > button:backdrop.minimize:active > image {
160  background-color: color-mix(in srgb, black 30%, #b08968);
161}
162
163.maximized windowcontrols > button:backdrop.maximize > image {
164  background-color: color-mix(in srgb, var(--headerbar-bg-color) 80%, var(--headerbar-fg-color));
165}
166.maximized windowcontrols > button:backdrop.maximize:hover > image {
167  background-color: color-mix(in srgb, black 15%, #6a8d73);
168}
169.maximized windowcontrols > button:backdrop.maximize:active > image {
170  background-color: color-mix(in srgb, black 30%, #6a8d73);
171}

几个Ubuntu Adw-Colors 主题颜色

目录

蓝色主题

橙色主题

舒适主题

版权

几个Ubuntu Adw-Colors 主题颜色

目录

蓝色主题

橙色主题

舒适主题

版权

相关文章