From 63d1428cff774c8c4d066e1919286d92adba2046 Mon Sep 17 00:00:00 2001 From: Naomi Carrigan Date: Thu, 27 Mar 2025 14:56:25 -0700 Subject: [PATCH] feat: add dark theme --- conf/app.ini | 2 +- .../assets/css/theme-sakura-dreams-dark.css | 342 ++++++++++++++++++ 2 files changed, 343 insertions(+), 1 deletion(-) create mode 100644 public/assets/css/theme-sakura-dreams-dark.css diff --git a/conf/app.ini b/conf/app.ini index e01296e..49d8159 100644 --- a/conf/app.ini +++ b/conf/app.ini @@ -110,4 +110,4 @@ JWT_SECRET = [ui] DEFAULT_THEME = sakura-dreams -THEMES = [sakura-dreams] +THEMES = sakura-dreams,sakura-dreams-dark diff --git a/public/assets/css/theme-sakura-dreams-dark.css b/public/assets/css/theme-sakura-dreams-dark.css new file mode 100644 index 0000000..9193696 --- /dev/null +++ b/public/assets/css/theme-sakura-dreams-dark.css @@ -0,0 +1,342 @@ +/* Sakura Night - A dark mode variant of Sakura Dreams for Gitea */ + +:root { + --is-dark-theme: true; + /* Primary Colors */ + --color-primary: #ff85a1; + --color-primary-dark: #ff6b8b; + --color-primary-light: #ffa6c9; + --color-primary-very-light: #59253a; + + /* Main Text & Background */ + --color-text: #ffd6e0; + --color-text-light: #ffb7c5; + --color-text-dark: #ff9ecf; + --color-body: #7a2048; + + /* UI Colors */ + --color-secondary: #732e4f; + --color-secondary-dark: #5a1737; + --color-secondary-light: #8f3d60; + + /* 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: #251626; + --color-card: #2c1e2e; + --color-markup-table-row: #3a2538; + --color-markup-code-block: #3a2538; + --color-button: #ff85a1; + --color-border: #59253a; + --color-input-border: #8f3d60; + --color-input-background: #2c1e2e; + --color-small-accent: #ff6eb5; + + /* Diff Colors */ + --color-diff-add-line: #2a1829; + --color-diff-add-word: #3e1f3a; + --color-diff-del-line: #3b1c1c; + --color-diff-del-word: #512626; + --color-diff-section: #2a1829; + + /* 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; + + --vscode-editor-background: #1a1a2e; + } + + /* 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); + } + + .monaco-editor, .monaco-diff-editor, .monaco-component, .monaco-editor-background, .monaco-editor .margin { + background: #fff5f8 !important; + } + + .monaco-editor { + --vscode-editor-selectionBackground: var(--color-primary) !important; + --vscode-editor-inactiveSelectionBackground: var(--color-primary) !important; + --vscode-editor-lineHighlightBackground: var(--color-primary) !important; + } + + .monaco-editor .view-overlays .current-line { + background-color: var(--color-primary) !important; + } + + .monaco-editor .margin { + background-color: transparent !important; + } + + .monaco-editor .margin-view-overlays .current-line-margin { + background-color: var(--color-primary) !important; + } + + .active-line-number { + background-color: transparent !important; + } + + /* 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); + } + + body::before { + background: url(https://cdn.nhcarrigan.com/background.png); + background-size: cover; + background-position: center; + width: 100%; + height: 100%; + z-index: -100; + content: ""; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 1; + pointer-events: none; + } + + body::after { + background: var(--color-body); + opacity: 0.8; + width: 100%; + height: 100%; + z-index: -50; + content: ""; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; + } + + html { + cursor: url('https://cdn.nhcarrigan.com/cursors/cursor.cur'), auto; + } + + a, button, .button, .dropdown { + cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer !important; + } + + #tree-nation-offset-website { + display: flex; + align-items: center; + } + @media screen and (max-width: 885px) { + #tree-nation-offset-website { + display: none; + } + } + + footer { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + color: var(--foreground); + background-color: var(--background); + position: fixed; + bottom: 0; + height: 75px; + padding: 0 10px; + } + + @media (max-width: 880px) { + .page-footer { + flex-direction: row; + } + } + + @media screen and (max-width: 600px) { + #blinkies { + display: none; + } + } + + #navbar { + position: fixed; + top: 0; + height: 50px; + width: 100%; + z-index: 1; + } + + .page-content { + margin-top: 50px; + } \ No newline at end of file