From 648636d9a7ae74ec1c32cac5f7532022c2155f4f Mon Sep 17 00:00:00 2001 From: edshot99 Date: Mon, 28 Oct 2024 12:10:22 -0500 Subject: [PATCH] add new dark theme (phonon) and work-in-progress light theme (photon) --- app/javascript/src/styles/base/_themable.scss | 2 + .../src/styles/themes/_theme_phonon.scss | 16 ++++ .../src/styles/themes/_theme_photon.scss | 87 +++++++++++++++++++ app/views/static/theme.html.erb | 2 + 4 files changed, 107 insertions(+) create mode 100644 app/javascript/src/styles/themes/_theme_phonon.scss create mode 100644 app/javascript/src/styles/themes/_theme_photon.scss diff --git a/app/javascript/src/styles/base/_themable.scss b/app/javascript/src/styles/base/_themable.scss index 2c7dee3aa..678ad4aa3 100644 --- a/app/javascript/src/styles/base/_themable.scss +++ b/app/javascript/src/styles/base/_themable.scss @@ -3,6 +3,8 @@ @import "../themes/theme_bloodlust"; @import "../themes/theme_serpent"; @import "../themes/theme_hotdog"; +@import "../themes/theme_phonon"; +@import "../themes/theme_photon"; @import "../themes/palette_deutranomaly"; @import "../themes/palette_tritanomaly"; diff --git a/app/javascript/src/styles/themes/_theme_phonon.scss b/app/javascript/src/styles/themes/_theme_phonon.scss new file mode 100644 index 000000000..250897b49 --- /dev/null +++ b/app/javascript/src/styles/themes/_theme_phonon.scss @@ -0,0 +1,16 @@ +$phonon-color-background: #111111; +$phonon-color-foreground: #222222; +$phonon-color-section: #333333; + +body[data-th-main="phonon"] { + // Layout Colors + --color-background: #{$phonon-color-background}; + --color-foreground: #{$phonon-color-foreground}; + --color-section: #{$phonon-color-section}; + --color-section-lighten-5: #{lighten($phonon-color-section, 5%)}; + --color-section-lighten-10: #{lighten($phonon-color-section, 10%)}; + --color-section-darken-5: #{darken($phonon-color-section, 5%)}; + + // Tag Categories + --color-tag-meta-alt: #999; +} diff --git a/app/javascript/src/styles/themes/_theme_photon.scss b/app/javascript/src/styles/themes/_theme_photon.scss new file mode 100644 index 000000000..70ee13a8c --- /dev/null +++ b/app/javascript/src/styles/themes/_theme_photon.scss @@ -0,0 +1,87 @@ +$photon-color-background: #eeeeee; +$photon-color-foreground: #cccccc; +$photon-color-link: #006fd9; +$photon-color-link-hover: #0888fa; +$photon-color-link-active: #bfa139; +$photon-color-link-alt: #004c8d; +$photon-color-text: #000000; +$photon-color-text-muted: #333333; +$photon-color-section: #dddddd; +$photon-color-section-border: #000000; + +body[data-th-main="photon"] { + // Layout Colors + --color-background: #{$photon-color-background}; + --color-foreground: #{$photon-color-foreground}; + --color-section: #{$photon-color-section}; + --color-section-lighten-5: #{lighten($photon-color-section, 5%)}; + --color-section-lighten-10: #{lighten($photon-color-section, 10%)}; + --color-section-darken-5: #{darken($photon-color-section, 5%)}; + --color-table-border: #{lighten($photon-color-section, 10%)}; + + --color-section-pending: #{$photon-color-section}; + --color-section-pending-border: #{$photon-color-section-border}; + + // Main Colors + --color-text: #{$photon-color-text}; + --color-text-muted: #{$photon-color-text-muted}; + --color-text-white: #ffffff; + --color-text-table-header: #{darken($photon-color-text, 10%)}; + + --color-link: #{$photon-color-link}; + --color-link-hover: #{$photon-color-link-hover}; + --color-link-active: #{$photon-color-link-active}; + --color-button-active: #{$photon-color-link-active}; + + --color-success: darkseagreen; + --color-success-darken-5: #{darken(darkseagreen, 5%)}; + --color-danger: indianred; + --color-danger-darken-5: #{darken(indianred, 5%)}; + --color-danger-darken-10: #{darken(indianred, 10%)}; + --color-warning: rosybrown; + --color-warning-darken-5: #{darken(rosybrown, 5%)}; + + // User Groups + --color-user-member: #{$photon-color-link}; + --color-user-member-alt: #{$photon-color-link-alt}; + --color-user-privileged: #{$photon-color-link}; + --color-user-privileged-alt: #{$photon-color-link-alt}; + + --color-user-blocked: #{$photon-color-link}; + --color-user-blocked-alt: #{$photon-color-link-alt}; + + --color-user-former-staff: #4da073; + --color-user-former-staff-alt: #78dca5; + + // Tag Categories + --color-tag-general: #{$photon-color-link}; + --color-tag-general-alt: #{$photon-color-link-alt}; + + --color-tag-artist: #{darken(#f2ac08, 10%)}; + --color-tag-artist-alt: #{darken(#fbd67f, 25%)}; + + --color-tag-copyright: #d0d; + --color-tag-copyright-alt: #{darken(#ff5eff, 10%)}; + + --color-tag-character: #0a0; + --color-tag-character-alt: #{darken(#2bff2b, 20%)}; + + --color-tag-species: #ed5d1f; + --color-tag-species-alt: #{darken(#f6b295, 10%)}; + + --color-tag-invalid: #{darken(#ff3d3d, 10%)}; + --color-tag-invalid-alt: #{lighten(#ff3d3d, 10%)}; + + --color-tag-meta: #666; + --color-tag-meta-alt: #fff; + + --color-tag-lore: #282; + --color-tag-lore-alt: #{darken(#5fdb5f, 10%)}; + + --color-tag-pool: #{darken(#d0b27a, 10%)}; + --color-tag-pool-alt: #{darken(wheat, 20%)}; + + // Spoilers + --color-spoiler-link: #{$photon-color-link}; + --color-spoiler-link-hover: #{$photon-color-link-hover}; +} diff --git a/app/views/static/theme.html.erb b/app/views/static/theme.html.erb index 86aa7f648..1f21e0d2b 100644 --- a/app/views/static/theme.html.erb +++ b/app/views/static/theme.html.erb @@ -23,6 +23,8 @@ + +