Skip to content

Instantly share code, notes, and snippets.

@arsenstorm

arsenstorm/halloween.css

Last active March 2, 2023 21:22
Download ZIP

Revisions

  1. arsenstorm revised this gist Mar 2, 2023. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions halloween.css
    View file
    Original file line number Diff line number Diff line change
    @@ -8,18 +8,22 @@

    .ContributionCalendar-day[data-level="1"] {
    fill: var(--color-calendar-halloween-graph-day-L1-bg) !important;
    background-color: var(--color-calendar-halloween-graph-day-L1-bg) !important;
    }

    .ContributionCalendar-day[data-level="2"] {
    fill: var(--color-calendar-halloween-graph-day-L2-bg) !important;
    background-color: var(--color-calendar-halloween-graph-day-L2-bg) !important;
    }

    .ContributionCalendar-day[data-level="3"] {
    fill: var(--color-calendar-halloween-graph-day-L3-bg) !important;
    background-color: var(--color-calendar-halloween-graph-day-L3-bg) !important;
    }

    .ContributionCalendar-day[data-level="4"] {
    fill: var(--color-calendar-halloween-graph-day-L4-bg) !important;
    background-color: var(--color-calendar-halloween-graph-day-L4-bg) !important;
    }

    .Progress-item[style] {
  2. arsenstorm revised this gist Nov 7, 2022. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions halloween.css
    View file
    Original file line number Diff line number Diff line change
    @@ -20,4 +20,8 @@

    .ContributionCalendar-day[data-level="4"] {
    fill: var(--color-calendar-halloween-graph-day-L4-bg) !important;
    }

    .Progress-item[style] {
    background-color: var(--color-calendar-halloween-graph-day-L3-bg) !important;
    }
  3. arsenstorm revised this gist Nov 1, 2022. 1 changed file with 4 additions and 8 deletions.
    12 changes: 4 additions & 8 deletions halloween.css
    View file
    Original file line number Diff line number Diff line change
    @@ -6,22 +6,18 @@
    - Head over to your Github Profile Page
    */

    .ContributionCalendar-day[data-level="0"] {
    fill: #ebedf0 !important;
    }

    .ContributionCalendar-day[data-level="1"] {
    fill: --color-calendar-halloween-graph-day-L1-bg !important;
    fill: var(--color-calendar-halloween-graph-day-L1-bg) !important;
    }

    .ContributionCalendar-day[data-level="2"] {
    fill: --color-calendar-halloween-graph-day-L2-bg !important;
    fill: var(--color-calendar-halloween-graph-day-L2-bg) !important;
    }

    .ContributionCalendar-day[data-level="3"] {
    fill: --color-calendar-halloween-graph-day-L3-bg !important;
    fill: var(--color-calendar-halloween-graph-day-L3-bg) !important;
    }

    .ContributionCalendar-day[data-level="4"] {
    fill: --color-calendar-halloween-graph-day-L4-bg !important;
    fill: var(--color-calendar-halloween-graph-day-L4-bg) !important;
    }
  4. arsenstorm revised this gist Nov 1, 2022. 1 changed file with 13 additions and 47 deletions.
    60 changes: 13 additions & 47 deletions halloween.css
    View file
    Original file line number Diff line number Diff line change
    @@ -6,56 +6,22 @@
    - Head over to your Github Profile Page
    */

    /* Current Issue:
    - This CSS code works depending on the SYSTEM theme, not the GITHUB theme.
    - If you have a dark theme on your system, the dark theme will be applied.
    - If you have a light theme on your system, the light theme will be applied.
    - If you have a dark theme on your system, but you have a light theme on GITHUB, the dark theme will be applied.
    - If you have a light theme on your system, but you have a dark theme on GITHUB, the light theme will be applied.
    */

    /* Halloween Contribution Dark Mode */
    @media (prefers-color-scheme: dark) {
    .ContributionCalendar-day[data-level="0"] {
    fill: #161b22 !important;
    }

    .ContributionCalendar-day[data-level="1"] {
    fill: #631c03 !important;
    }

    .ContributionCalendar-day[data-level="2"] {
    fill: #bd561d !important;
    }

    .ContributionCalendar-day[data-level="3"] {
    fill: #fa7a18 !important;
    }

    .ContributionCalendar-day[data-level="4"] {
    fill: #fddf68 !important;
    }
    .ContributionCalendar-day[data-level="0"] {
    fill: #ebedf0 !important;
    }

    /* Halloween Contribution Light Mode */
    @media (prefers-color-scheme: light) {
    .ContributionCalendar-day[data-level="0"] {
    fill: #ebedf0 !important;
    }

    .ContributionCalendar-day[data-level="1"] {
    fill: #ffee4a !important;
    }
    .ContributionCalendar-day[data-level="1"] {
    fill: --color-calendar-halloween-graph-day-L1-bg !important;
    }

    .ContributionCalendar-day[data-level="2"] {
    fill: #ffc501 !important;
    }
    .ContributionCalendar-day[data-level="2"] {
    fill: --color-calendar-halloween-graph-day-L2-bg !important;
    }

    .ContributionCalendar-day[data-level="3"] {
    fill: #fe9600 !important;
    }
    .ContributionCalendar-day[data-level="3"] {
    fill: --color-calendar-halloween-graph-day-L3-bg !important;
    }

    .ContributionCalendar-day[data-level="4"] {
    fill: #03001c !important;
    }
    .ContributionCalendar-day[data-level="4"] {
    fill: --color-calendar-halloween-graph-day-L4-bg !important;
    }
  5. arsenstorm created this gist Nov 1, 2022.
    61 changes: 61 additions & 0 deletions halloween.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,61 @@
    /* Installation:
    - Download the Stylebot Extension
    - Create a new style for the URL https://github.com
    - Paste this code into the new style
    - Ensure that the style is enabled
    - Head over to your Github Profile Page
    */

    /* Current Issue:
    - This CSS code works depending on the SYSTEM theme, not the GITHUB theme.
    - If you have a dark theme on your system, the dark theme will be applied.
    - If you have a light theme on your system, the light theme will be applied.
    - If you have a dark theme on your system, but you have a light theme on GITHUB, the dark theme will be applied.
    - If you have a light theme on your system, but you have a dark theme on GITHUB, the light theme will be applied.
    */

    /* Halloween Contribution Dark Mode */
    @media (prefers-color-scheme: dark) {
    .ContributionCalendar-day[data-level="0"] {
    fill: #161b22 !important;
    }

    .ContributionCalendar-day[data-level="1"] {
    fill: #631c03 !important;
    }

    .ContributionCalendar-day[data-level="2"] {
    fill: #bd561d !important;
    }

    .ContributionCalendar-day[data-level="3"] {
    fill: #fa7a18 !important;
    }

    .ContributionCalendar-day[data-level="4"] {
    fill: #fddf68 !important;
    }
    }

    /* Halloween Contribution Light Mode */
    @media (prefers-color-scheme: light) {
    .ContributionCalendar-day[data-level="0"] {
    fill: #ebedf0 !important;
    }

    .ContributionCalendar-day[data-level="1"] {
    fill: #ffee4a !important;
    }

    .ContributionCalendar-day[data-level="2"] {
    fill: #ffc501 !important;
    }

    .ContributionCalendar-day[data-level="3"] {
    fill: #fe9600 !important;
    }

    .ContributionCalendar-day[data-level="4"] {
    fill: #03001c !important;
    }
    }