/* ============================================================================ Tema gelap Djeonail. Palet sama persis dengan design pack: Basalt, Veil, Steam. Ditulis di tingkat TOKEN frappe-ui, bukan filter invert. Mengikuti setelan sistem; bisa dipaksa lewat . Skrip menambahkan kelas .dj-dark dan .dj-app- pada . ============================================================================ */ :root { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --surface-white: #000000; --surface-base: #000000; --surface-sidebar: #0A0B0C; --surface-cards: #0A0B0C; --surface-modal: #121316; --surface-menu-bar: #0A0B0C; --surface-selected: #1A1C1F; --surface-elevation-1: #0A0B0C; --surface-elevation-2: #121316; --surface-elevation-3: #1A1C1F; --surface-elevation-4: #24272B; --surface-elevation-5: #2C3034; --surface-gray-1: #0A0B0C; --surface-gray-2: #121316; --surface-gray-3: #1A1C1F; --surface-gray-4: #24272B; --surface-gray-5: #A0A0A0; --surface-gray-6: #D2D4D6; --surface-gray-7: #F0F0F0; --ink-gray-9: #FFFFFF; --ink-gray-8: #F0F0F0; --ink-gray-7: #D2D4D6; --ink-gray-6: #BCBFC2; --ink-gray-5: #A0A0A0; --ink-gray-4: #8B8E90; --ink-gray-3: #6C6C6C; --ink-gray-2: #54585B; --ink-gray-1: #3A3E41; --ink-white: #FFFFFF; --outline-white: #000000; --outline-gray-1: rgba(214,235,253,.09); --outline-gray-2: rgba(214,235,253,.14); --outline-gray-3: rgba(214,235,253,.19); --outline-gray-4: rgba(214,235,253,.32); --outline-gray-5: #A0A0A0; --outline-gray-modals: rgba(214,235,253,.14); --surface-blue-1: #0E1B2A; --surface-blue-2: #132538; --ink-blue-1: #A5F3FC; --ink-blue-2: #A5F3FC; --ink-blue-3: #A5F3FC; --outline-blue-1: rgba(214,235,253,.19); --surface-cyan-1: #0C1D22; --surface-cyan-2: #0F2731; --ink-cyan-1: #A5F3FC; --ink-cyan-2: #A5F3FC; --ink-cyan-3: #A5F3FC; --outline-cyan-1: rgba(214,235,253,.19); --surface-green-1: #0C1E15; --surface-green-2: #10291D; --ink-green-1: #6EE7A8; --ink-green-2: #6EE7A8; --ink-green-3: #6EE7A8; --outline-green-1: rgba(214,235,253,.19); --surface-amber-1: #211A0C; --surface-amber-2: #2C230F; --ink-amber-1: #F5A524; --ink-amber-2: #F5A524; --ink-amber-3: #F5A524; --outline-amber-1: rgba(214,235,253,.19); --surface-orange-1: #231A11; --surface-orange-2: #2E2216; --ink-orange-1: #F5A524; --ink-orange-2: #F5A524; --ink-orange-3: #F5A524; --outline-orange-1: rgba(214,235,253,.19); --surface-red-1: #241213; --surface-red-2: #2F1819; --ink-red-1: #FF6B6B; --ink-red-2: #FF6B6B; --ink-red-3: #FF6B6B; --outline-red-1: rgba(214,235,253,.19); --surface-violet-1: #191531; --surface-violet-2: #201C3E; --ink-violet-1: #C4B5FD; --ink-violet-2: #C4B5FD; --ink-violet-3: #C4B5FD; --outline-violet-1: rgba(214,235,253,.19); --surface-pink-1: #26132049; --surface-pink-2: #2C1726; --ink-pink-1: #C4B5FD; --ink-pink-2: #C4B5FD; --ink-pink-3: #C4B5FD; --outline-pink-1: rgba(214,235,253,.19); --ink-blue-link: #A5F3FC; --ink-red-4: #FF6B6B; --ink-amber-3: #F5A524; --ink-green-3: #6EE7A8; } } :root[data-theme="dark"] { color-scheme: dark; --surface-white: #000000; --surface-base: #000000; --surface-sidebar: #0A0B0C; --surface-cards: #0A0B0C; --surface-modal: #121316; --surface-menu-bar: #0A0B0C; --surface-selected: #1A1C1F; --surface-elevation-1: #0A0B0C; --surface-elevation-2: #121316; --surface-elevation-3: #1A1C1F; --surface-elevation-4: #24272B; --surface-elevation-5: #2C3034; --surface-gray-1: #0A0B0C; --surface-gray-2: #121316; --surface-gray-3: #1A1C1F; --surface-gray-4: #24272B; --surface-gray-5: #A0A0A0; --surface-gray-6: #D2D4D6; --surface-gray-7: #F0F0F0; --ink-gray-9: #FFFFFF; --ink-gray-8: #F0F0F0; --ink-gray-7: #D2D4D6; --ink-gray-6: #BCBFC2; --ink-gray-5: #A0A0A0; --ink-gray-4: #8B8E90; --ink-gray-3: #6C6C6C; --ink-gray-2: #54585B; --ink-gray-1: #3A3E41; --ink-white: #FFFFFF; --outline-white: #000000; --outline-gray-1: rgba(214,235,253,.09); --outline-gray-2: rgba(214,235,253,.14); --outline-gray-3: rgba(214,235,253,.19); --outline-gray-4: rgba(214,235,253,.32); --outline-gray-5: #A0A0A0; --outline-gray-modals: rgba(214,235,253,.14); --surface-blue-1: #0E1B2A; --surface-blue-2: #132538; --ink-blue-1: #A5F3FC; --ink-blue-2: #A5F3FC; --ink-blue-3: #A5F3FC; --outline-blue-1: rgba(214,235,253,.19); --surface-cyan-1: #0C1D22; --surface-cyan-2: #0F2731; --ink-cyan-1: #A5F3FC; --ink-cyan-2: #A5F3FC; --ink-cyan-3: #A5F3FC; --outline-cyan-1: rgba(214,235,253,.19); --surface-green-1: #0C1E15; --surface-green-2: #10291D; --ink-green-1: #6EE7A8; --ink-green-2: #6EE7A8; --ink-green-3: #6EE7A8; --outline-green-1: rgba(214,235,253,.19); --surface-amber-1: #211A0C; --surface-amber-2: #2C230F; --ink-amber-1: #F5A524; --ink-amber-2: #F5A524; --ink-amber-3: #F5A524; --outline-amber-1: rgba(214,235,253,.19); --surface-orange-1: #231A11; --surface-orange-2: #2E2216; --ink-orange-1: #F5A524; --ink-orange-2: #F5A524; --ink-orange-3: #F5A524; --outline-orange-1: rgba(214,235,253,.19); --surface-red-1: #241213; --surface-red-2: #2F1819; --ink-red-1: #FF6B6B; --ink-red-2: #FF6B6B; --ink-red-3: #FF6B6B; --outline-red-1: rgba(214,235,253,.19); --surface-violet-1: #191531; --surface-violet-2: #201C3E; --ink-violet-1: #C4B5FD; --ink-violet-2: #C4B5FD; --ink-violet-3: #C4B5FD; --outline-violet-1: rgba(214,235,253,.19); --surface-pink-1: #26132049; --surface-pink-2: #2C1726; --ink-pink-1: #C4B5FD; --ink-pink-2: #C4B5FD; --ink-pink-3: #C4B5FD; --outline-pink-1: rgba(214,235,253,.19); --ink-blue-link: #A5F3FC; --ink-red-4: #FF6B6B; --ink-amber-3: #F5A524; --ink-green-3: #6EE7A8; } /* Gameplan memakai frappe-ui lebih baru: skala token 1..10 dan --surface-elevation-*. Nama token sama tetapi artinya berbeda, jadi paletnya dipisah. */ .dj-dark.dj-app-gameplan { color-scheme: dark; --surface-white: #000000; --surface-base: #000000; --surface-sidebar: #0A0B0C; --surface-cards: #0A0B0C; --surface-modal: #121316; --surface-menu-bar: #0A0B0C; --surface-selected: #1A1C1F; --surface-elevation-1: #0A0B0C; --surface-elevation-2: #121316; --surface-elevation-3: #1A1C1F; --surface-elevation-4: #24272B; --surface-elevation-5: #2C3034; --surface-gray-1: #0A0B0C; --surface-gray-2: #121316; --surface-gray-3: #1A1C1F; --surface-gray-4: #24272B; --surface-gray-5: #2C3034; --surface-gray-6: #343940; --surface-gray-7: #3D434A; --surface-gray-8: #464C54; --surface-gray-9: #2E3339; --surface-gray-10: #3A4047; --ink-gray-9: #FFFFFF; --ink-gray-8: #F0F0F0; --ink-gray-7: #D2D4D6; --ink-gray-6: #BCBFC2; --ink-gray-5: #A0A0A0; --ink-gray-4: #8B8E90; --ink-gray-3: #6C6C6C; --ink-gray-2: #54585B; --ink-gray-1: #3A3E41; --ink-gray-10: #FFFFFF; --ink-white: #FFFFFF; --outline-white: #000000; --outline-gray-1: rgba(214,235,253,.09); --outline-gray-2: rgba(214,235,253,.14); --outline-gray-3: rgba(214,235,253,.19); --outline-gray-4: rgba(214,235,253,.32); --outline-gray-5: #A0A0A0; --outline-gray-6: #BCBFC2; --outline-gray-7: #D2D4D6; --outline-gray-8: #E4E5E6; --outline-gray-9: #F0F0F0; --outline-gray-10: #FFFFFF; --outline-gray-modals: rgba(214,235,253,.14); --surface-blue-1: #0E1B2A; --surface-blue-2: #132538; --ink-blue-1: #A5F3FC; --ink-blue-2: #A5F3FC; --ink-blue-3: #A5F3FC; --outline-blue-1: rgba(214,235,253,.19); --surface-cyan-1: #0C1D22; --surface-cyan-2: #0F2731; --ink-cyan-1: #A5F3FC; --ink-cyan-2: #A5F3FC; --ink-cyan-3: #A5F3FC; --outline-cyan-1: rgba(214,235,253,.19); --surface-green-1: #0C1E15; --surface-green-2: #10291D; --ink-green-1: #6EE7A8; --ink-green-2: #6EE7A8; --ink-green-3: #6EE7A8; --outline-green-1: rgba(214,235,253,.19); --surface-amber-1: #211A0C; --surface-amber-2: #2C230F; --ink-amber-1: #F5A524; --ink-amber-2: #F5A524; --ink-amber-3: #F5A524; --outline-amber-1: rgba(214,235,253,.19); --surface-orange-1: #231A11; --surface-orange-2: #2E2216; --ink-orange-1: #F5A524; --ink-orange-2: #F5A524; --ink-orange-3: #F5A524; --outline-orange-1: rgba(214,235,253,.19); --surface-red-1: #241213; --surface-red-2: #2F1819; --ink-red-1: #FF6B6B; --ink-red-2: #FF6B6B; --ink-red-3: #FF6B6B; --outline-red-1: rgba(214,235,253,.19); --surface-violet-1: #191531; --surface-violet-2: #201C3E; --ink-violet-1: #C4B5FD; --ink-violet-2: #C4B5FD; --ink-violet-3: #C4B5FD; --outline-violet-1: rgba(214,235,253,.19); --surface-pink-1: #26132049; --surface-pink-2: #2C1726; --ink-pink-1: #C4B5FD; --ink-pink-2: #C4B5FD; --ink-pink-3: #C4B5FD; --outline-pink-1: rgba(214,235,253,.19); --ink-blue-link: #A5F3FC; --ink-red-4: #FF6B6B; --ink-amber-3: #F5A524; --ink-green-3: #6EE7A8; } /* -------- Tambalan warna hardcode -------- */ .dj-dark body, .dj-dark #app { background-color: var(--surface-white); color: var(--ink-gray-8); } .dj-dark .bg-white, .dj-dark .bg-surface-white { background-color: var(--surface-cards) !important; } .dj-dark ::-webkit-scrollbar-thumb { background-color: #2A2E32; } .dj-dark ::-webkit-scrollbar-track { background-color: var(--surface-gray-2); } .dj-dark svg[stroke="black"], .dj-dark svg[fill="black"] { stroke: var(--ink-gray-7); fill: none; } /* Tombol solid frappe-ui: latar jadi terang saat gelap, jadi teksnya digelapkan. */ .dj-dark .bg-surface-gray-7.text-ink-white, .dj-dark .bg-surface-gray-6.text-ink-white, .dj-dark .bg-surface-gray-5.text-ink-white, .dj-dark .bg-surface-gray-7.text-ink-white *, .dj-dark .bg-surface-gray-6.text-ink-white *, .dj-dark .bg-surface-gray-5.text-ink-white * { color: #0A0B0C !important; } /* Gameplan: sebagian warna utilitas dibakukan saat build, jadi kelasnya ditimpa. */ .dj-dark.dj-app-gameplan .text-ink-gray-9 { color: #FFFFFF !important; } .dj-dark.dj-app-gameplan .text-ink-gray-8 { color: #F0F0F0 !important; } .dj-dark.dj-app-gameplan .text-ink-gray-7 { color: #D2D4D6 !important; } .dj-dark.dj-app-gameplan .text-ink-gray-6 { color: #BCBFC2 !important; } .dj-dark.dj-app-gameplan .text-ink-gray-5 { color: #A8ABAD !important; } .dj-dark.dj-app-gameplan .text-ink-gray-4 { color: #9A9D9F !important; } .dj-dark.dj-app-gameplan .text-ink-gray-3 { color: #85888A !important; } .dj-dark.dj-app-gameplan button span.truncate, .dj-dark.dj-app-gameplan a.inline-flex span.truncate, .dj-dark.dj-app-gameplan button .grid > span, .dj-dark.dj-app-gameplan [id^="frappe-ui-"] span { color: #F0F0F0; } .dj-dark.dj-app-gameplan .bg-surface-gray-9, .dj-dark.dj-app-gameplan .bg-surface-gray-10, .dj-dark.dj-app-gameplan .bg-surface-gray-9 span, .dj-dark.dj-app-gameplan .bg-surface-gray-10 span { color: #FFFFFF !important; } /* -------- Desk ERPNext: samakan dengan Basalt -------- */ .dj-dark [data-theme="dark"], .dj-dark.dj-app-lain { --bg-color: #000000; --fg-color: #0A0B0C; --card-bg: #0A0B0C; --control-bg: #121316; --navbar-bg: #0A0B0C; --sidebar-bg: #0A0B0C; --border-color: rgba(214,235,253,.14); --text-color: #F0F0F0; --text-muted: #A0A0A0; --text-light: #6C6C6C; --primary: #A5F3FC; --blue-500: #7CC4FF; } /* -------- Tombol pengalih tema -------- */ #dj-theme-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 9999; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(214,235,253,.19); background: var(--surface-cards, #0A0B0C); color: var(--ink-gray-7, #D2D4D6); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: background .15s ease, border-color .15s ease; } #dj-theme-toggle:hover { background: var(--surface-gray-3, #1A1C1F); } #dj-theme-toggle svg { width: 18px; height: 18px; } @media (prefers-reduced-motion: reduce) { #dj-theme-toggle { transition: none; } }