feat: custom css

conf/app.ini

@@ -100,3 +100,7 @@ DEFAULT_TRUST_MODEL = committer
 
 [oauth2]
 JWT_SECRET = <redacted>
+
+[ui]
+DEFAULT_THEME = sakura-dreams
+THEMES = [sakura-dreams]

public/assets/css/theme-sakura-dreams.css

@@ -0,0 +1,227 @@
+/* Sakura Dreams - A cherry blossom inspired theme for Gitea */
+
+:root {
+  /* Primary Colors */
+  --color-primary: #ff85a1;
+  --color-primary-dark: #ff6b8b;
+  --color-primary-light: #ffa6c9;
+  --color-primary-very-light: #ffd6e0;
+
+  /* Main Text & Background */
+  --color-text: #7a2048;
+  --color-text-light: #c75b7c;
+  --color-text-dark: #5a1737;
+  --color-body: #fff5f8;
+
+  /* UI Colors */
+  --color-secondary: #ffb7c5;
+  --color-secondary-dark: #ffa6b4;
+  --color-secondary-light: #ffc8d6;
+
+  /* State Colors */
+  --color-success: #ff9ecf;
+  --color-success-dark: #ff85c0;
+  --color-success-light: #ffb7de;
+  --color-danger: #ff5c5c;
+  --color-danger-dark: #ff4747;
+  --color-danger-light: #ff7171;
+  --color-warning: #ffc3a0;
+  --color-warning-dark: #ffb78f;
+  --color-warning-light: #ffd4b7;
+  --color-info: #c393ff;
+  --color-info-dark: #b47eff;
+  --color-info-light: #d2a8ff;
+
+  /* Other UI Elements */
+  --color-menu: #fff0f5;
+  --color-card: #fff9fb;
+  --color-markup-table-row: #fff0f5;
+  --color-markup-code-block: #fff0f5;
+  --color-button: #ff85a1;
+  --color-border: #ffb7c5;
+  --color-input-border: #ffc8d6;
+  --color-input-background: #fffafc;
+  --color-small-accent: #ff6eb5;
+
+  /* Diff Colors */
+  --color-diff-add-line: #ffecf5;
+  --color-diff-add-word: #ffd6e7;
+  --color-diff-del-line: #ffe8e8;
+  --color-diff-del-word: #ffd1d1;
+  --color-diff-section: #fff0f5;
+
+  /* Code Syntax Highlighting */
+  --color-code-keyword: #ff69b4;
+  --color-code-function: #db7093;
+  --color-code-string: #ff9aac;
+  --color-code-number: #c75b7c;
+  --color-code-comment: #e5a3b5;
+  --color-code-type: #e35a8f;
+}
+
+/* Header */
+.ui.menu.inverted {
+  background-color: var(--color-secondary);
+  color: var(--color-text);
+}
+
+.ui.secondary.menu .item {
+  color: var(--color-text);
+}
+
+.ui.secondary.menu .active.item {
+  background-color: var(--color-primary-very-light);
+}
+
+/* Repository header */
+.repository.header {
+  background-color: var(--color-menu);
+}
+
+/* Buttons */
+.ui.primary.button {
+  background-color: var(--color-primary);
+}
+
+.ui.primary.button:hover {
+  background-color: var(--color-primary-dark);
+}
+
+.ui.basic.button {
+  box-shadow: 0 0 0 1px var(--color-border) inset;
+  color: var(--color-text) !important;
+}
+
+.ui.basic.button:hover {
+  background-color: var(--color-primary-very-light) !important;
+  color: var(--color-text-dark) !important;
+}
+
+/* Tabs */
+.ui.tabular.menu .item {
+  color: var(--color-text-light);
+}
+
+.ui.tabular.menu .active.item {
+  background-color: var(--color-primary-very-light);
+  color: var(--color-text);
+  border-color: var(--color-border);
+}
+
+/* Tables */
+.ui.table thead th {
+  background: var(--color-menu);
+  color: var(--color-text);
+}
+
+.ui.table {
+  border-color: var(--color-border);
+}
+
+/* Form inputs */
+.ui.input input {
+  background-color: var(--color-input-background);
+  border-color: var(--color-input-border);
+  color: var(--color-text);
+}
+
+.ui.input input:focus {
+  border-color: var(--color-primary);
+}
+
+/* Labels */
+.ui.label {
+  background-color: var(--color-primary-very-light);
+  color: var(--color-text);
+}
+
+/* Markdown Content */
+.markdown:not(code) {
+  color: var(--color-text);
+}
+
+.markdown code,
+.markdown pre {
+  background-color: var(--color-markup-code-block);
+  border-color: var(--color-border);
+}
+
+/* Sidebar */
+.ui.vertical.menu {
+  background-color: var(--color-menu);
+}
+
+.ui.vertical.menu .item {
+  color: var(--color-text);
+}
+
+.ui.vertical.menu .active.item {
+  background-color: var(--color-primary-very-light);
+}
+
+/* Status tags */
+.ui.green.label {
+  background-color: var(--color-success) !important;
+  color: var(--color-body) !important;
+}
+
+.ui.red.label {
+  background-color: var(--color-danger) !important;
+  color: var(--color-body) !important;
+}
+
+.ui.yellow.label {
+  background-color: var(--color-warning) !important;
+  color: var(--color-text-dark) !important;
+}
+
+.ui.blue.label {
+  background-color: var(--color-info) !important;
+  color: var(--color-body) !important;
+}
+
+/* Dashboard cards */
+.dashboard-card {
+  background-color: var(--color-card);
+  border-color: var(--color-border);
+}
+
+/* Timeline and activities */
+.timeline-item {
+  border-color: var(--color-border);
+}
+
+.timeline-item .badge {
+  background-color: var(--color-primary-very-light);
+  color: var(--color-text);
+}
+
+/* Code diff view */
+.diff-file-box .code-diff-split .add-code {
+  background-color: var(--color-diff-add-line);
+}
+
+.diff-file-box .code-diff-split .del-code {
+  background-color: var(--color-diff-del-line);
+}
+
+.diff-file-box .code-diff-split .add-code .add-line {
+  background-color: var(--color-diff-add-word);
+}
+
+.diff-file-box .code-diff-split .del-code .del-line {
+  background-color: var(--color-diff-del-word);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar-thumb {
+  background: var(--color-primary-light);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-primary);
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-primary-very-light);
+}