Create the real dark mode (#6309)

static/colour.ts

@@ -56,13 +56,13 @@ export const schemes: ColourSchemeInfo[] = [
         name: 'gray-shade',
         desc: 'Gray shades',
         count: 4,
-        themes: ['dark', 'darkplus'],
+        themes: ['dark', 'darkplus', 'real-dark'],
     },
     {
         name: 'rainbow-dark',
         desc: 'Dark Rainbow',
         count: 12,
-        themes: ['dark', 'darkplus'],
+        themes: ['dark', 'darkplus', 'real-dark'],
     },
     {
         name: 'pink',

static/main.ts

@@ -67,6 +67,7 @@ import * as utils from '../shared/common-utils.js';
 import {Printerinator} from './print-view.js';
 import {formatISODate, updateAndCalcTopBarHeight} from './utils.js';
 import {localStorage, sessionThenLocalStorage} from './local.js';
+import {setup_real_dark} from './real-dark.js';
 
 const logos = require.context('../views/resources/logos', false, /\.(png|svg)$/);
 
@@ -746,6 +747,8 @@ function start() {
         $('[name="editor-btn-toolbar"]').addClass('d-none');
     }
 
+    setup_real_dark(hub);
+
     window.onSponsorClick = (sponsorUrl: string) => {
         analytics.proxy('send', {
             hitType: 'event',

static/real-dark.ts

@@ -0,0 +1,57 @@
+import $ from 'jquery';
+
+import {Settings} from './settings.js';
+import {Hub} from './hub.js';
+
+import * as local from './local.js';
+
+const localKey = 'aprilfools2024';
+
+function toggleButton() {
+    const theme = Settings.getStoredSettings().theme;
+    const date = new Date();
+    // month is 0-index and date is 1-indexed, because obviously that makes sense
+    const is_april_1 = date.getMonth() === 3 && date.getDate() === 1;
+    $('#true-dark .content').toggle(
+        is_april_1 && theme !== 'real-dark' && local.localStorage.get(localKey, '') !== 'hidden',
+    );
+}
+
+export function setup_real_dark(hub: Hub) {
+    const overlay = $('#real-dark');
+    let overlay_on = false;
+    const toggleOverlay = () => {
+        const theme = Settings.getStoredSettings().theme;
+        overlay_on = theme === 'real-dark';
+        overlay.toggle(overlay_on);
+    };
+
+    const eventHub = hub.createEventHub();
+    eventHub.on('settingsChange', () => {
+        toggleButton();
+        toggleOverlay();
+    });
+    toggleButton();
+    toggleOverlay();
+    $('#true-dark .content').on('click', e => {
+        if (e.target.classList.contains('content')) {
+            // A little bit of a hack:
+            $('#settings .theme').val('real-dark').trigger('change');
+        }
+    });
+    $('#true-dark .content .close').on('click', e => {
+        local.localStorage.set(localKey, 'hidden');
+        toggleButton();
+        toggleOverlay();
+    });
+
+    window.addEventListener(
+        'mousemove',
+        e => {
+            if (overlay_on) {
+                overlay.css({top: e.pageY - window.innerHeight, left: e.pageX - window.innerWidth});
+            }
+        },
+        false,
+    );
+}

static/styles/explorer.scss

@@ -1501,6 +1501,99 @@ html[data-theme='pink'] {
     }
 }
 
+#real-dark {
+    display: none; // turned on conditionally by a script
+    background: rgb(2, 0, 36);
+    background: radial-gradient(
+        circle,
+        rgba(2, 0, 36, 0) 0%,
+        rgba(0, 0, 0, 0) 4%,
+        rgba(0, 0, 0, 1) 28%,
+        rgba(0, 0, 0, 1) 100%
+    );
+    width: 200vw;
+    height: 200vh;
+    top: -50vh;
+    left: -50vw;
+    position: fixed;
+    z-index: 100000000000000;
+    // square with a little hole in the middle
+    clip-path: polygon(0% 0%, 0% 100%, 49% 100%, 49% 49%, 51% 49%, 51% 51%, 49% 51%, 49% 100%, 100% 100%, 100% 0%);
+}
+
+@keyframes rotate {
+    100% {
+        transform: rotate(1turn);
+    }
+}
+
+#true-dark {
+    .content {
+        display: none; // turned on conditionally by a script
+        font-weight: bold;
+        font-size: 18px;
+        padding: 10px 30px;
+        background: #1a1a1a;
+        color: white;
+        position: absolute;
+        top: 5px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 1000; // below a modal
+        border-radius: 5px;
+        cursor: pointer;
+        box-shadow:
+            0 3px 6px rgba(0, 0, 0, 0.16),
+            0 3px 6px rgba(0, 0, 0, 0.23);
+
+        background-image: linear-gradient(
+            122deg,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, 0) 40%,
+            rgba(255, 255, 255, 0.5) 50%,
+            rgba(255, 255, 255, 0) 60%,
+            rgba(255, 255, 255, 0) 100%
+        );
+        animation: glide 10s linear infinite;
+
+        background-size: 200px 50px;
+
+        @keyframes glide {
+            0%,
+            90% {
+                background-position: 0vw;
+            }
+            90%,
+            100% {
+                background-position: 20vw;
+            }
+        }
+
+        .close {
+            position: absolute;
+            bottom: 0px;
+            right: -12px;
+            //background: #e787e7;
+            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #1a1a1a 48%, #1a1a1a 100%);
+            width: 24px;
+            height: 24px;
+            border-radius: 100%;
+            opacity: 1 !important;
+            text-shadow: none !important;
+            float: none !important;
+            font-size: 16px;
+            line-height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            cursor: pointer;
+            color: white;
+            &:hover {
+                background: #313131;
+            }
+        }
+    }
+}
+
 :root {
     // Default terminal 3 and 4 bit color codes, colors come from the original ansi-to-html script
     // A theme should override these to make them look nicer, this can be done at the `body` level

static/themes.ts

@@ -28,7 +28,7 @@ import {SiteSettings} from './settings.js';
 import GoldenLayout from 'golden-layout';
 import {isString} from '../shared/common-utils.js';
 
-export type Themes = 'default' | 'dark' | 'darkplus' | 'pink' | 'system';
+export type Themes = 'default' | 'dark' | 'darkplus' | 'pink' | 'real-dark' | 'system';
 
 export type Theme = {
     path: string;
@@ -67,6 +67,13 @@ export const themes: Record<Themes, Theme> = {
         mainColor: '#333333',
         monaco: 'ce-pink',
     },
+    'real-dark': {
+        path: 'dark',
+        id: 'real-dark',
+        name: 'Real dark',
+        mainColor: '#333333',
+        monaco: 'ce-dark',
+    },
     system: {
         id: 'system',
         name: 'Same as system',

views/index.pug

@@ -105,3 +105,8 @@ block prepend content
 
 block append footer
   include popups/_all
+  #real-dark
+  #true-dark
+    .content Try the real dark theme 🔦
+      .close
+        i.fa-solid.fa-xmark