From 25f4d0cdc4db3cc842264d0a8ae1625a453c3e30 Mon Sep 17 00:00:00 2001 From: shreecreators Date: Thu, 12 Sep 2024 07:56:34 +0200 Subject: [PATCH] Initial commit --- README.md | 12 ++++++ theme-beetroot-auto.css | 2 + theme-beetroot-dark.css | 87 ++++++++++++++++++++++++++++++++++++++++ theme-beetroot-light.css | 78 +++++++++++++++++++++++++++++++++++ 4 files changed, 179 insertions(+) create mode 100644 README.md create mode 100755 theme-beetroot-auto.css create mode 100755 theme-beetroot-dark.css create mode 100755 theme-beetroot-light.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..e5a72b6 --- /dev/null +++ b/README.md @@ -0,0 +1,12 @@ +## Disroot theme for Foregejo + +Customizing Gitea is typically done using the `CustomPath` folder - by default this is the `custom` folder from the running directory of Forgejo, but it may be different if your build has set this differently. This is the central place to override configuration settings, templates, etc. You can check the `CustomPat`h using `gitea help`. You can also find the path on the Configuration tab in the Site Administration page. You can override the `CustomPath` by setting either the `GITEA_CUSTOM` environment variable or by using the `--custom-path` option on the gitea binary. (The option will override the environment variable.) + +In this `custom` folder, create a `public\css` folder then, to use this theme, `git clone` it in `custom/public/css`. It will create copy the css files of our Beetroot themes. + +Then edit `app.ini` and edit the `THEMES` var like this: +`THEMES = beetroot-light,beetroot-dark,beetroot-auto` (you can also keep the themes already dfined there). + +Don't forget to restart gitea: `service gitea restart` + +To know more about customizing Forgejo, check https://docs.gitea.io/en-us/customizing-gitea/#customizing-the-look-of-gitea \ No newline at end of file diff --git a/theme-beetroot-auto.css b/theme-beetroot-auto.css new file mode 100755 index 0000000..63b0b76 --- /dev/null +++ b/theme-beetroot-auto.css @@ -0,0 +1,2 @@ +@import "theme-beetroot-light.css"; +@import "theme-beetroot-dark.css" (prefers-color-scheme: dark); diff --git a/theme-beetroot-dark.css b/theme-beetroot-dark.css new file mode 100755 index 0000000..6fcc760 --- /dev/null +++ b/theme-beetroot-dark.css @@ -0,0 +1,87 @@ +@import "theme-forgejo-dark.css"; + +:root { + --disroot-main: #50162D; + --disroot-main-light1: #611332; + --disroot-main-light2: #a43a65; + --disroot-main-dark1: #201c1c; + --disroot-secondary: #8EB726; + --disroot-secondary-light1: #afcf60; + --disroot-secondary-light2: #cde78c; + --disroot-secondary-dark1: #71911E; + --disroot-tertiary: #1F5C60; + + --color-primary: var(--disroot-main); /*#fb923c;*/ + --color-primary-contrast: #fff; /*#000;*/ + --color-primary-dark-1: var(--disroot-main-dark1); /*#fdba74;*/ + --color-primary-dark-2: var(--disroot-main-dark1); /*#fdba74;*/ + --color-green: var(--disroot-main); /*#15803d;*/ + --color-grey: var(--disroot-main); /*var(--steel-500);*/ + --color-green-light: var(--disroot-main-light1); /*#16a34a;*/ + --color-footer: var(--disroot-main-dark1); /*var(--steel-900);*/ + --color-nav-bg: var(--disroot-main-dark1); /*var(--steel-900);*/ +} + + +/* Disroot Modifications */ +.ui.basic.red.button { + background-color: var(--steel-650); /*var(--color-red);*/ + color: var(--color-red); /*var(--color-white);*/ +} + + +/* Disroot additions */ + +/* Top bar */ +#navbar > .menu > .item { + color: var(--zinc-200); +} + +#navbar > .menu > .item:hover { + color: var(--zinc-50); + background: var(--disroot-main); +} + +#navbar > .menu > .active.item { + color: var(--zinc-50); + background: var(--disroot-main-light1); +} + +#navbar > .menu > .right .item:hover { + color: var(--zinc-50); + background: var(--disroot-main); +} + +#navbar > .menu > .righ .active.item { + color: var(--zinc-50); + background: var(--disroot-main-light1); +} + +/* Dashboard navbar (for Organizations) */ +.dashboard.feeds .right.stackable.menu > .item.active, .dashboard.issues .right.stackable.menu > .item.active { + color: var(--disroot-main-light2); +} + +/* Footer */ +.page-footer .left-links > a { + color: var(--disroot-secondary); +} + +.page-footer .right-links > a { + color: var(--disroot-secondary); +} + +/* Links */ +a { + color: var(--disroot-main-light2); +} + +a:hover, a.muted:hover{ + color: var(--disroot-main-light2); +} + +.flex-item a:not(.label, .button):hover { + color: var(--disroot-main-light2) !important; +} + + diff --git a/theme-beetroot-light.css b/theme-beetroot-light.css new file mode 100755 index 0000000..b3eecbe --- /dev/null +++ b/theme-beetroot-light.css @@ -0,0 +1,78 @@ +@import "theme-forgejo-light.css"; + +:root { + --disroot-main: #50162D; + --disroot-main-light1: #611332; + --disroot-main-light2: #a43a65; + --disroot-main-dark1: #201c1c; + --disroot-secondary: #8EB726; + --disroot-secondary-light1: #afcf60; + --disroot-secondary-light2: #cde78c; + --disroot-secondary-dark1: #71911E; + --disroot-tertiary: #1F5C60; + + --color-primary: var(--disroot-secondary); /*#c2410c;*/ + --color-primary-dark-2: var(--disroot-secondary-dark1);/*#9a3412;*/ + --color-primary-light-1: var(--disroot-secondary-light1);/*#ea580c;*/ + --color-green: var(--disroot-main); /*#15803d;*/ + --color-grey: var(--disroot-main); /*#4b5563;*/ + --color-green-light: var(--disroot-main-light1);/*#16a34a;*/ + --color-text-light: var(--zinc-400); /*var(--zinc-700);*/ + --color-footer: var(--disroot-main); /*var(--zinc-100);*/ + --color-nav-bg: var(--disroot-main); /* var(--zinc-100);*/ +} + + +/* Removes this for Disroot style +.ui.basic.primary.button.item { + background-color: var(--color-active) !important; + color: var(--color-text) !important; + box-shadow: none !important; +} +*/ + +/* Disroot Modifications */ +.ui.basic.labels .primary.label, +.ui.ui.ui.basic.primary.label { + background-color: var(--disroot-main) !important; /* addition */ + color: initial !important; /* color: var(--color-text-dark) !important;*/ +} + + +/* Disroot additions */ + +/* Top bar */ +#navbar > .menu > .item { + color: var(--zinc-200); +} + +#navbar > .menu > .item:hover { + color: var(--zinc-50); + background: var(--disroot-main-light1); +} + +#navbar > .menu > .active.item { + color: var(--zinc-50); + background: var(--disroot-main-light2); +} + +#navbar > .menu > .right .item:hover { + color: var(--zinc-50); + background: var(--disroot-main-light1); +} + +#navbar > .menu > .righ .active.item { + color: var(--zinc-50); + background: var(--disroot-main-light2); +} + +/* Dashboard navbar (for Organizations) */ +.dashboard.feeds .right.stackable.menu > .item.active, .dashboard.issues .right.stackable.menu > .item.active { + color: var(--disroot-main-light2); +} + +/* Footer */ +.page-footer .left-links { + color: white; +} +